transition过渡

transition过渡

定义和用法
transition用于设置四个过渡属性：
1、transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
2、transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
3、transition-delay : 定义过渡效果何时开始。
eg：
transition-delay : 2s : 延迟两秒进行过渡
transition-delay : -2s : 提前两秒进行过渡
4、transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速…
linear：匀速
ease（默认值）：逐渐慢下来
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
cubic-bezier（贝塞尔曲线）
（ http://cubic-bezier.com ）这是贝塞尔曲线在线取值的网址：
这里我们可以通过拖动线条来实现自己想要的运动效果，
点击copy复制代码直接使用。

transition属性一般使用复合写法：
eg：
transition:all 2s linear;
transition:linear 2s all;
transition:2s linear all; （这几种写法是没有顺序的）
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
eg：
transition:2s 3s linear all;
注意：不要把transition放到hover中，此时只有当鼠标移入才会有过渡效果，鼠标移出是没有过渡效果的。