css3 transition属性和使用方法

CSS3 transition 属性

个人理解transition是一个类似动画的过度属性；可以设置变换属性的过渡效果，比如将一个div的宽度从100px变成200px；
鼠标划过div宽度发生变化

属性及用法

transition-property

transition-property: width;

规定设置过渡效果的 CSS 属性的名称。
参数：
　　none：默认值，也是没有
　　all：监测所有变换属性的属性。
　　property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
transition-duration

 transition-duration: 2s;

规定完成过渡效果需要多少秒或毫秒。
参数：
　　0：默认值
　　1s, 2.5s 等等
transition-timing-function

transition-timing-function: linear;

规定速度效果的速度曲线。
参数：
　　linear：匀速过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
　　ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) (默认值)
　　ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
　　ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
　　ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
　　cubic-bezier：特定的贝塞尔曲线类型。
　　step-start:：等同于 steps(1, start)
　　step-end：等同于steps(1, end)
　　steps(第一个参数必须为正数，指定动画会以几步的方式来分割总时长
transition-delay

transition-delay: 3s;

定义transition效果开始的时候
参数：
　　0：默认值
　　1s, 2.5s 等等
transition各个属性简写
transition:property duration timing-function delay;
警告：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。