序言
W3C规范中对css3的transition这是样叙述的：“css的transition容许css的特性值在1定的時间区段内光滑地过渡。这类实际效果能够在电脑鼠标点击、得到聚焦点、被点一下或对元素任何更改中开启，并圆润地以动漫实际效果更改CSS的特性值。”
过渡transition
先看来1个小事例
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: royalblue;
}
.demo:hover {
width: 200px;
}
这样当我的光标飘浮在demo的1一瞬间
它的宽度变为了200px
有木有方法让大家光标飘浮在元素时，元素宽度迟缓变宽呢
在CSS3以前大家只能应用不便的js脚本制作
可是如今大家只必须加上1个特性
便可以做到大家的目地
.demo {
width: 100px;
height: 100px;
background-color: royalblue;
transition: width 1s; /*增*/
}
.demo:hover {
width: 200px;
}
transition它的功效便是特定当你的元素一些款式产生转变时
这些款式能够逐渐过渡到最后特性值
它是1个复合型特性
有下列子特性
transition-property：特定过渡或动态性仿真模拟的css特性
transition-duration：特定过渡所必须的時间
transition-timing-function：特定过渡涵数
transition-delay：特定刚开始出現的延迟时间時间
transition-property 大家要想哪样特性过渡就写哪样特性
或果断写过渡全部特性的重要字all
transition-duration渐变色時间特性值便是“数据+s”
意味着几秒钟内过渡
transition-timing-function 是可选的特性值，有以下可选值
linear
线形过渡，等额的贝塞尔曲线图(0.0, 0.0, 1.0, 1.0)
ease（默认设置）
光滑过渡，等额的贝塞尔曲线图(0.25, 0.1, 0.25, 1.0)
ease-in
由慢到快，等额的贝塞尔曲线图(0.42, 0, 1.0, 1.0)
ease-out
由快到慢，等额的贝塞尔曲线图(0, 0, 0.58, 1.0)
ease-in-out
由慢到快再到慢，等额的贝塞尔曲线图(0.42, 0, 0.58, 1.0)
step-start
等同于 steps(1, start)
step-end
等同于 steps(1, end)
steps()：
两个主要参数的步进电机涵数。第1个主要参数为正整数金额，特定涵数步数。第2个主要参数赋值是start或end，特定每步的值产生转变的時间点。第2个主要参数可选，默认设置值为end。
cubic-bezier(num, num, num, num)：
特殊的贝塞尔曲线图种类，4个标值需在[0, 1]区段内
大多数大家都用不上，最常见的大约便是大家默认设置的ease和线形过渡linear了
transition-delay 一样是可选特性值
假如你要想延迟时间过渡，换句话说假如大家要想在过渡前停1小会儿
那末就在这个复合型特性的最终加上大家必须延迟时间的時间“数据+s”
这个特性能够对好几个不一样的特性开展设定
大家要做的便是应用逗号分隔
.demo {
width: 100px;
height: 100px;
background-color: royalblue;
transition: width 1s linear,
height 1s linear,
background-color 2s 1s; /*改*/
}
.demo:hover {
width: 200px;
height: 200px;
background-color: lawngreen; /*改*/
}
电脑鼠标移出元素后，元素又过渡回家
应用过渡特性而并不是脚本制作的另外一个缘故是
脚本制作方式更改好几个元素款式将会会造成矛盾
处理的方法是应用bool自变量加锁，還是很不便
大家的transition过渡特性就不必须考虑到这么多
元素与元素之间互不危害
也有1点要留意，元素过渡必须了解款式实际的起止特性和结尾特性
例如说大家事例中的width确立了从100px过渡到200px
.demo:hover {
width: auto; /*改*/
height: 200px;
background-color: lawngreen; /*改*/
}
更改了飘浮款式width为auto
大家发现当光标飘浮元素后
width特性并沒有产生过渡
参加过渡的特性
自然也并不是全部的款式都可以以过渡
例如说你想让 display:block 过渡到 display:inline-block
那是不能能的
有下列特性参加过渡
color visibility opacity vertical-align z-index clip width/height top/bottom/left/right background-color/position border-top/bottom/left/right-color/width border/letter/word-spacing font-size/weight line-height margin/padding-top/bottom/left/right max/min-height/width outline-color/width text-indent/shadow
能够看到这个特性真的是10分强劲
总结
以上便是这篇文章内容的所有內容，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，假如有疑惑大伙儿能够留言沟通交流。