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

CSS属性参考 | transition

08-15

CSS transition 属性用于指定元素过渡动画效果。它是transition-propertytransition-durationtransition-timing-functiontransition-delay的简写属性。

transition属性用于为元素的动画制作平滑过渡的效果。它可以使元素在两种状态之间的平滑过渡。不同状态可以用:hover:active之类的伪元素来定义,或者使用JavaScript动态设置。

transition属性中各个具体过渡动画属性的书写顺序不是随意的,必须按照以下顺序来书写:动画属性 > 动画持续时间 > 动画的速度曲线 > 动画的延迟时间。在transition属性中出现的第一个时间会被解析为transition-duration,如果有第二个时间出现,它会被解析为transition-delay

你可以在同一个transition声明中指定多个transition属性,使用逗号来进行分隔。例如:

/* 单一transition */
transition: background-color .3s linear;
/* 多个transitions */
transition: color .6s ease, font-size .3s linear;
transition: background-color 1s linear,
            left .6s ease-out 1s,
            transform 1s steps(3, start);

如果你在transition声明中指定了多个transition属性,其中一个没有指定transition-property属性,那么该transition声明无效。

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

官方语法
transition: <single-transition> [ ',' <single-transition> ]*  
其中 
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> 
                                          || <time>

参数:

  • <single-transition>:一个或多个动画过渡声明,使用逗号来进行分隔。每个动画过渡声明由各个具体的动画过渡属性组成。

transition属性的初始值为none 0s ease 0s;。它们是各个具体过渡动画属性的初始值。

应用范围

transition属性可以应用所有元素,以及:before:after伪元素上。

示例代码
/* 动画属性名称 | 持续时间 */
transition: margin-left 4s;

/* property 动画属性名称 | 持续时间 | 延迟时间 */
transition: margin-left 4s 1s;

/* 动画属性名称 | 持续时间 | 速度曲线 | 延迟时间 */
transition: margin-left 4s ease-in-out 1s;

/* 2个transition属性 */
transition: margin-left 4s, color 1s;

/* 为元素的所有变化使用过渡动画效果 */
transition: all 0.5s ease-out;
在线演示

下面的例子演示了使用transition过渡动画和没有使用transition过渡动画的效果。

1

2

浏览器支持

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

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

相关阅读
Previous:
上一篇:CSS属性参考 | transition-timing-function
Next:
下一篇:CSS属性参考 | visibility
返回顶部