CSS3-Transition-说中

CSS3 Transition

css 属性值在一定时间内平滑地过渡；

transition主要包含四个属性值：

transition-property

执行变换的属性；应用所有属性用 all ；

transition-duration

动画持续 的时间 ；注意要加单位 s 或者 ms

transition-timing-function

在延续时间段，变换的速率变化 ；包括：

ease：默认项，动画效果慢慢开始然后加速，到中点后再减速最后缓慢到达终点

ease-in-out：与 ease类似，加减速更柔和一些

ease-in：开始比较慢，但是加速和停止曲线比较陡峭

ease-out：开始较快，然后缓慢停止

linear：线性平均速率，通常在 color和opacity属性的变化上

cubic-bezier函数：自定义速度模式 可以使用工具： http://cubic-bezier.com/#.17,.67,.83,.67

transition-delay

变换延迟时间 ；delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的 transition可以连在一起，形成复杂效果。

transition需要事件触发，所以没法在网页加载时自动发生。

例：

简写：

img{
    transition: 1s 1s height ease;
    -webkit-transition: 1s 1s height ease;
} 

查看更多关于CSS3-Transition-说中的详细内容...