css3 transition - 过度

很多时候，元素在hover时 或者 transform 变形时，没有过度，一下子变过去，感觉很生硬，很愣。

今天介绍的这个属性就是css3为我们提供了一个过渡属性，主要解决以上类型的问题。 

 

属性：对象变换时的过渡。

语法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]  //复合属性

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

取值：

[ transition-property ]：
检索或设置对象中的参与过渡的属性
[ transition-duration ]：
检索或设置对象过渡的持续时间
[ transition-timing-function ]：
检索或设置对象中过渡的动画类型
[ transition-delay ]：
检索或设置对象延迟过渡的时间

 

看一下每个具体的值：

transition-property

属性：对象中的参与过渡的属性。

语法：

transition-property：all | none | <property>[ ,<property> ]*

取值：

all：
所有可以进行过渡的css属性
none：
不指定过渡的css属性
<property>：
指定要进行过渡的css属性

实例：

-webkit-transition-property: border-color,background-color,color;

-webkit-transition-property:all;

...

 

transition-duration

属性：对象过渡的持续时间

语法：

transition-duration：<time>[ ,<time> ]*

取值：

<time>：
指定对象过渡的持续时间

实例：

-webkit-transition-duration:.5s , 0.7s;

注：时间以秒为单位。

transition-timing-function

属性：对象中过渡的动画类型

语法：

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

取值：

linear：
线性过渡。
ease：
平滑过渡。
ease-in：
由慢到快。
ease-out：
由快到慢。
ease-in-out：
由慢到快再到慢。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

实例：

-webkit-transition-timing-function:ease-in;

 

transition-delay

属性：对象延迟过渡的时间

语法：

transition-delay：<time>[ ,<time> ]*

取值：

<time>：
指定对象过渡的延迟时间

实例：

-webkit-transition-delay:.9s;

意思：在0.9s以后开始过渡。

 

 

复合写法：

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分写法：

transition-property:border-color, background-color, color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

 

  参考资料：W3CHTML