CSS3 transition介绍 | 如何设计炫酷的动画效果？

本篇介绍CSS3里另一个人气动画属性transition。transition从效果上看是一种平滑过渡的动画，本质上是在线性时间内将属性从开始值过渡到结束值。例如获得焦点，点击鼠标等动作导致CSS属性值的变化是瞬间完成的，感觉有点生硬。用transition可以指定在某时间段内将属性值平滑过渡，增强用户体验 。

4个子属性

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

触发过渡的方式

transitionend事件

隐式过渡

开关过渡和永久过渡

auto过渡

4个子属性

------------------------------

transition有4个子属性：transition-property，transition-duration，transition-timing-function，transition-delay

transition-property指定需要过渡的CSS属性。并不是所有属性都能过渡的，只有能数字量化的CSS属性才能过渡。哪些属于能数字量化的CSS属性呢？例如：

颜色系，如color，background-color，border-color，outline-color等

数字系，实在太多了，如width，height，top，right，bottom，left，zoom，opacity，line-height，background-position，word-spacing，font-weight，vertical-align，outline-outset，z-index等。

01系，如visibility（0表示隐藏，1表示显示）

还有更多如渐变，阴影等分类请参照W3C的Animation of property types，不一一列举了。W3C上还有可过渡属性一览表Properties from CSS。通常只要能设数字（包括%百分比）的属性都能过渡。

除了单个指定属性外，transition-property还能设为all，表示所有属性都将获得过渡效果。

transition-duration过渡需要的时间，单位可指定s秒，也可指定ms毫秒。默认值是0，表示立刻变化。如果设置了多个过渡属性，但每个属性的过渡时间都一样，你没必要为transition-duration设多个值，只有设一个即可，该值会应用到所有过渡属性上。

transition-timing-function过渡函数，有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。其实它们都是贝赛尔曲线。如下