css transition属性详解

transition 已经被越来越多的应用在了移动端的网页展示,一期能达到原生app的动画效果.比如这个屏幕的滑动.

具体的属性详解可参考
http://www.w3chtml.com/css3/properties/transition/transition.html
四个属性:

transition：[ transition-property ]
|| [ transition-duration ]
|| [ transition-timing-function ]
|| [ transition-delay ]

取值：

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

说明：

复合属性。检索或设置对象变换时的过渡。

可以为同一元素的多个属性定义过渡效果。示例：

缩写方式：

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, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;

如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：

拆分方式：

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

如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

缩写方式：

transition:all .5s ease-in .1s;

拆分方式：

transition-property:all;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

对应的脚本特性为transition。

兼容性：

浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6-9	4-18	5.1.7	13-23	11.5-12.5
版本	10

示例：