CSS属性参考 | transition

08-15 次

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

CSS transition 属性用于指定元素过渡动画效果。它是transition-property、transition-duration、transition-timing-function和transition-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;