CSS3 transition 属性
说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法:
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
默认值:看每个独立属性
适用于:所有元素,包含伪对象:after和:before
继承性:无
取值:
- [ 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 |