CSS3 Transition讲解

transition 属性设置元素过渡效果，一般与transform配合使用，包括4个属性：
（1）transition-property:规定设置过渡效果的CSS属性的名称。

语法：transition-property: none|all|property;

下图为transition-property属性使用方法（在实际应用中选择其中一个值即可）

（2）transition-duration:规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms

语法：transition-duration: time;

（3）规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

语法：transition-delay: time;


（4）transition-timing-function：规定速度效果的速度曲线。

语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);


复合写法
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
transition:2s 3s linear all; √
注意：不要把transition放到hover中。