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》，欢迎来我个人博客逛逛！
网友评论