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	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的CSS属性的名称
transition-duration	定义过渡效果花费的时间，默认是0
transition-timing-function	规定过渡效果的时间曲线，默认是“ease”
transtion-delay	规定过渡效果何时开始，默认是0

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的值是允许你根据时间的推进去改变属性值的变换速率。比较难理解，所以单独拎出来说。

transition-timing-function属性值	描述
ease	中间快，两头慢
linear	匀速的
ease-in	开始的时候慢
ease-out	结束的时候慢
ease-in-out	中间快，两头慢，幅度比ease更大些
cubic-bezier	填四个值，自定义的贝塞尔曲线。所有值需在[0, 1]区域内，否则无效。
steps	(步骤次数，[start/end])

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

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

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

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

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