transition

CSS transition 属性用于指定元素过渡动画效果。它是、、和的简写属性。

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

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

你可以在同一个 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 声明无效。

注意不是所有的CSS属性都可以执行动画效果的，具体的可以参考W3C的。

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

参数：

/* 动画属性名称 | 持续时间 */
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;