CSS属性参考 | transition-property

08-13 次

标签过渡动画 css教程 css属性

CSS transition-property 属性用于指定过渡动画的属性名称。

可以为transition-property指定一个或多个值，多个值之间使用逗号来分隔。多个动画属性名称会和其它过渡动画属性一一对应。例如，如果你提供了2个动画属性名称，那么第一个transition-property会与第一个transition-duration属性相对应，第二个transition-property会与第二个transition-duration属性相对应。

如果你指定的动画属性名称列表中有某个属性是错误的，或者该属性不可执行动画，则该属性仍然会保留在列表中，与其它相应位置的过渡动画属性相匹配，而不是会被剔除。

不是所有的CSS属性都可以执行动画效果，具体的可以参考W3C的Animation of property types & Animatable properties。

官方语法

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;