CSS3新特性(02)：Transition

CSS3中动画涉及到三个属性，一个是Transform：变形；一个是Transition：过渡，一个是Animation：动画。其中Transform、Animation可以搭配着使用，实现复杂动画，Transition可以实现简单动画。本文来介绍下Transition：

W3C标准中的CSS3是这样描述Transition的，“CSS的transition允许CSS的属性值在一定时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
(1)语法

transition: property duration timing-function delay;

有时我们不只改变一个transition效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。

-moz-transition: background 0.5s ease-in,left 0.3s steps(3,start);-webkit-transition: background 0.5s ease-in,left 0.3s steps(3,start);-o-transition: background 0.5s ease-in,left 0.3s steps(3,start);transition: background 0.5s ease-in,left 0.3s steps(3,start);

其中transition-property就是background、left，transition-duration就是0.5s,0.3s，也就是过渡效果花费的时间。ease-in、 steps(3,start)就是怎样过渡的曲线。

但需要值得注意的一点，如何有两个时间：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个值解析为transition-duration，第二个为transition-delay。

transition有下面这些属性：

transition-property具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果。
transition-duration是用来指定元素过渡转换过程的持续时间，取值：为数值，单位为s（秒）或ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。

transition-delay是用来规定过渡效果何时开始，其取值：为数值，单位为s（秒）或者ms(毫秒)，使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。

transition-timing-function的值是允许你根据时间的推进去改变属性值的变换速率。比较难理解，所以单独拎出来说。

其中像ease-in、ease等都可以用cubic-bezier自定义的贝塞尔曲线来写，所以cubic-bezier有必要弄清楚它的原理。

如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：

transition: all .5s ease-in-out 1s;

来看下这张图的transition各个属性表示：

后记：这是原文地址《CSS3新特性(02)：Transition》，欢迎来我个人博客逛逛！

作者：荷小音
链接：https://www.jianshu.com/p/b949b23fc564