CSS3-transition(过渡)属性

 css3提供了用于实现过渡效果的transition属性，该属性可以用于设置HTML标签的某个属性发生改变时经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。

1、指定参与过渡的属性（transition-property)：

transition-property:all | none | []

• all：默认值，表示所有可以进行过渡的css属性。
• none：表示不指定过渡的css属性。
• ：表示指定要进行过渡的css属性；可同时指定多个属性值，用逗号“,”隔开

2、指定过渡持续时间的属性（transition-duration)：

transiton-duration:[,]
用于指定多度持续的时间，默认值为0，如果存在多个属性值，以逗号“,”隔开

3、指定过渡延迟时间的属性（transition-delay):

transition-delay:[,]
用于指定多度持续的时间，默认值为0，如果存在多个属性值，以逗号“,”隔开

4、指定过渡动画类型的属性（transition-timing-function):

transition-timing-function:linear | ease | ease-in | easse-out | ease-in-out | cubicbezier(x1,y1,x2,y2)[,linear | ease-in | easse-out | ease-in-out |cubicbezier(x1,y1,x2,y2)]

属性值	含义
linear	线性过渡，也叫匀速过渡
ease	平滑过渡，过渡的速度会逐渐慢下来
ease-in	由慢到快，逐渐加速
ease-out	由快到慢，逐渐减速
ease-in-out	由慢到块再到慢，线加速后减速
cubic-bezier(x1,y1,x2,y2)	特定的贝塞尔曲线类型

例如：