CSS3 animation

CSS3 动画分为三大类别：Transitions 、Transforms 、Animations ;

 

因支持还不是很完善，所以在属性之前，请添加浏览器私有属性

-webk-transition 或者 -moz-transition

Transitions基本语法

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

动画时间

transition-duration ：动画执行的时间，以秒为单位，比如0.1秒可以写成”0.1s”或者”.1s”，注意后面有个“s”单位。

动画执行的计算方式

transition-timing-function ：动画执行的计算方式，这里时间函数是令人崩溃的贝塞尔曲线，幸好css3提过了几个取值：

ease：逐渐慢下来，函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear：线性过度,函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 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：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

动画延迟

transition-delay：在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

重叠动画

经常会碰到同一元素会有多个动画同时执行的时侯，比如文字颜色和背景同时变化：

-webkit-transition: color .25s linear , background-color 1s linear;

和transform(变形)结合的一些动画

这时候transition-property建议取值为“all”；关于css3 transform(变形)属性请查看

http://www.css88.com/archives/2168

比如放大缩小：

#blah { -webkit-transition: all .3s ease-in-out; }

#blah:hover { -webkit-transform: scale(1.5); }

旋转：

.arrow { -webkit-transition: all 1s ease-in-out;}

.arrow:hover  {-webkit-transform: rotate(720deg);}