CSS transition-property 属性用于指定过渡动画的属性名称。
可以为 transition-property 指定一个或多个值,多个值之间使用逗号来分隔。多个动画属性名称会和其它过渡动画属性一一对应。例如,如果你提供了2个动画属性名称,那么第一个 transition-property 会与第一个 transition-duration 属性相对应,第二个 transition-property 会与第二个 transition-duration 属性相对应。
如果你指定的动画属性名称列表中有某个属性是错误的,或者该属性不可执行动画,则该属性仍然会保留在列表中,与其它相应位置的过渡动画属性相匹配,而不是会被剔除。
不是所有的CSS属性都可以执行动画效果,具体的可以参考W3C的。
官方语法transition-property: none | <single-transition-property> [ ',' <single-transition-property> ]*
参数:
none :没有CSS属性被指定要执行过渡动画。 all :指定所有的属性都执行过渡动画。 <single-transition-property> :一个或多个要执行过渡动画的CSS属性名称。多个属性名称之间使用逗号来分隔。transition-property 属性的初始值为 all 。
应用范围transition-property 属性可以应用所有元素,以及 :before 和 :after 伪元素上。
示例代码transition-property: color; transition-property: background-color; transition-property: left, top; transition-property: transform, color, background-color; transition-property: letter-spacing, font-size, line-height;在线演示
下面的例子演示了元素在0.5秒、1秒和2秒时间内分别完成 left 和 background-color 两个属性的过渡动画。
0.5s
1s
2s
浏览器支持CSS3 transition-property 属性的浏览器兼容性列表如下:
查看更多关于transition-property的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did31685