css3动效一：transition 过渡的简单整理

transition 过渡

语法（简写）：transition:porperty duration timing-function delay

例：transition: width 2s 1s,height 2s 2s,background-color 3s 1s;（连写示例 多个以逗号分隔）

注：在开发的时候，推荐尽可能的使用简写属性。

属性：

transition-porperty
需要使用过渡的css的属性的名称

属性值：
none
all
property
(css属性名称，用逗号进行分隔)

transition-duration
过渡需要的时间 s/ms

transition-timing-function
过渡效果的时间曲线，默认为ease

属性值：

cubic-bezier (n,n,n,n)
贝塞尔曲线
关于`贝塞尔曲线，可以参考下面的网址：http://cubic-bezier.com/#.17,.67,.94,.18

linear
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

ease
规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))

ease-in
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）

ease-out
慢速结束过渡效果 等于 cubic-bezier(0,0,0.58,1)

ease-in-out
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

transition-dely
延迟
transition: width 2s 1s（该简写中的1s为延迟）

简单示例（摘抄自菜鸟网）：

 




注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 div 元素上，查看过渡效果。