CSS3-animation总结

经常忘记参数的顺序及含义，做个总结方便日后查看

语法结构(简写)

animation: name duration timing-function delay iteration-count direction fill-mode;

举例：

.dom {
        animation: wang 3s linear 1s infinite alternate forwards ;
    }

含义：
动画名称：wang
动画持续时间：3 秒
动画速度：匀速
动画延迟：1 秒
动画播放次数：无限次播放
动画是否反向播放：是反向播放
动画播放前后是否可见：动画结束保留在最后一帧

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

参数含义

1. animation-name

规定需要绑定到选择器的 keyframe 名称。

语法：

animation-name: keyframename |none;

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

2. animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

语法：

animation-duration: time;

值	描述
time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

3. animation-timing-function

规定动画的速度曲线。

语法：

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述	测试
linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4. animation-delay

规定在动画开始之前的延迟。

语法：

animation-delay: time ;

值	描述	测试
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。	测试

5. animation-iteration-count

规定动画应该播放的次数。

语法：

animation-iteration-count: n |infinite;

值	描述	测试
n	定义动画播放次数的数值。	测试
infinite	规定动画应该无限次播放。	测试

6. animation-direction

规定是否应该轮流反向播放动画。

语法：

animation-direction: normal|alternate;

值	描述	测试
normal	默认值。动画应该正常播放。	测试
alternate	动画应该轮流反向播放。	测试

7. animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见。

语法：

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。