CSS3 transition

通过CSS3可以直接实现动画效果。CSS动画有两大组成部分：transition和animation。今天简要介绍下transition。

CSS的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

####语法：####

transition: [ none | <single-transition-property> ] || <duration-time> || <timing-function> || <delay-time>
(即：css属性 || 动画持续时间 || 动画函数 || 动画延迟时间）

single-transition-property：
执行transition的css属性。默认all,即所有支持transition的css属性均有动画效果。并不是所有的css属性都支持transition，详细参考列表 CSS animated properties。

duration-time delay-time：
分别指动画的持续时间和动画的开始时间。

timing-function
动画函数：取值ease（逐渐变慢，默认值）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（加速然后减速）、cubic-bezier（自定义特定的时间曲线）、steps(number_of_steps, direction)分步过渡、step-start相当于steps(1, start)、step-end相当于steps(1, end)。
关于cubic-bezier可以通过cubic-bezier.com网站方便的自定义时间曲线。或者直接使用缓动函数（并不是所有的都支持）实现更加真实的动画效果。

####demo####

####tansition需要注意的地方#### 1. transition需要明确知道开始状态和结束状态的具体数值。比如，height从0px变化到100px。如果开始或结束的设置是height: auto，那么就不会产生动画效果。 2. transition需要事件触发（hover、click），无法在自动发生。 3. transition动画是一次性的，不能重复发生。