CSS3 参考指南：Transition

 

     过渡：<属性> <时间> <动画类型> <延迟>

   

语法：property

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

 

语法：

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

 

transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：

四、transition-delay:

语法：

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

 

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。

格式： all（所有属性改变）这个也是其默认值  ， 5s 动画持续5s   ,动画类型  逐渐减慢， 0.3s开始执行

 
-webkit-transition: all 5s ease 0.3s;
 

transition: all 5s ease 0.3s;

图片来自： w3cplus