当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | transition-property

CSS属性参考 | transition-property

2016-08-13
麦子学院

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;
在线演示

下面的例子演示了元素在0.5秒、1秒和2秒时间内分别完成leftbackground-color两个属性的过渡动画。

0.5s

1s

2s

浏览器支持

CSS3 transition-property属性的浏览器兼容性列表如下:

CSS3 transiton属性的浏览器兼容列表

相关阅读
Previous:
上一篇:CSS属性参考 | transition-duration
Next:
下一篇:CSS属性参考 | transition-timing-function

我要评论

返回顶部