transition
transition属性是一个实验性的技术。
因为这个技术的兼容性还不稳定，不能够兼容所有的浏览器。
浏览器兼容性
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 -webkit 26.0 |
4.0 (2.0) -moz 16.0 (16.0) |
10.0 | 11.6 -o 12.10 # |
3.0 -webkit |
Mobile
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1 -webkit | 4.0 (2.0) -moz 16.0 (16.0) |
? | 10.0 -o 12.10 # |
3.2 -webkit |
概括
css transition属性是transition-property, transition-duration, transition-timing-function和transition-delay的简写方式。它允许在一个元素上定义两个声明之间的过渡。不同的声明也许用伪类定义，像:hover,:active或者通过js设置动态的效果。
transition：<过度属性名称> <过度时间> <过渡模式>
初始值：
transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease。transition-timing-function有5种过渡模式：ease 缓慢的开始，缓慢的结束；linear 匀速；ease-in 缓慢开始；ease-out 缓慢结束；ease-in-out 缓慢开始，缓慢结束（和ease稍有区别）；
语法
语法形式：_[ none | <single-transition-property> ] || <time> || <timing-function> || <time>_例：transition: width 300ms, height 300ms, box-shadow 1500ms;
实例：