CSS3中的Transition过度与Animation动画属性使用要点

Transition（过度）
Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法如下：

transition: property duration timing-function delay; /*
property：执行过渡的属性 duration：执行过渡的持续时间
timing-function：执行过渡的速率模式 delay：延时多久执行
*/

transition-property
可取值：

none
没有属性会获得过渡效果。
all
所有属性都将获得过渡效果。
property
定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

CSS Code复制内容到剪贴板

div{ transition-property:width;
-moz-transition-property: width;/* Firefox 4 */ -webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; /* Opera */}

transition-duration
参数为时间，单位为s（秒）或者ms（毫秒），默认就是0，回想一下如果只有transform属性，是不是变换啪地一下完成了。

CSS Code复制内容到剪贴板

div{ transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */ -webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */}

transition-timing-function

既然是动画，那么就有动画的运行速率，不同的速度会产生不同的结果，以下是可取值。

ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
2016520122009291.png (491×167)