很多时候，元素在hover时 或者 transform 变形时，没有过度，一下子变过去，感觉很生硬，很愣。
今天介绍的这个属性就是css3为我们提供了一个过渡属性，主要解决以上类型的问题。
属性：对象变换时的过渡。
语法：
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] //复合属性
默认值：看每个独立属性
适用于：所有元素，包含伪对象:after和:before
取值：
[ transition-property ]：
检索或设置对象中的参与过渡的属性
[ transition-duration ]：
检索或设置对象过渡的持续时间
[ transition-timing-function ]：
检索或设置对象中过渡的动画类型
[ transition-delay ]：
检索或设置对象延迟过渡的时间
看一下每个具体的值：
transition-property
属性：对象中的参与过渡的属性。
语法：
transition-property：all | none | <property>[ ,<property> ]*
取值：
all：
所有可以进行过渡的css属性
none：
不指定过渡的css属性
<property>：
指定要进行过渡的css属性
实例：
-webkit-transition-property: border-color,background-color,color;
-webkit-transition-property:all;
...
transition-duration
属性：对象过渡的持续时间
语法：
transition-duration：<time>[ ,<time> ]*
取值：
<time>：
指定对象过渡的持续时间
实例：
-webkit-transition-duration:.5s , 0.7s;
注：时间以秒为单位。
transition-timing-function
属性：对象中过渡的动画类型
语法：
transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*
取值：
linear：
线性过渡。
ease：
平滑过渡。
ease-in：
由慢到快。
ease-out：
由快到慢。
ease-in-out：
由慢到快再到慢。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
实例：
-webkit-transition-timing-function:ease-in;
transition-delay
属性：对象延迟过渡的时间
语法：
transition-delay：<time>[ ,<time> ]*
取值：
<time>：
指定对象过渡的延迟时间
实例：
-webkit-transition-delay:.9s;
意思：在0.9s以后开始过渡。
复合写法：
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分写法：
transition-property:border-color, background-color, color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;
参考资料：W3CHTML