CSS3动画属性 - animation整理

调用动画

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

     动画：名称  播放时间     播放方式  开始播放时间   播放次数    播放方向  时间外属性  播放状态；

1.设置动画播放时间  （用来指定元素播放动画所持续的时间长）

animation-duration: time;

取值:<time>为数值，单位为s （秒.）其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。

2.设置动画播放方式  （让元素根据时间的推进来改变属性值的变换速率）

animation-timing-function: linear|ease|ease-in|ease_out|ease-in-out;

linear           ：动画从头到尾的速度是相同的。

ease            ：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in       ：动画以低速开始。

ease-out     ：动画以低速结束。

ease-in-out：动画以低速开始和结束。

3.设置动画开始播放的时间  （用来触发动画播放的时间点，定义在浏览器开始执行动画之前等待的时间）

animation-delay: time;

time为数值，单位为s(秒)，其默认值也是0。这个属性和 transition-delay使用方法是一样的。

4.设置动画播放次数

animation-iteration-count: number|infinite;

number  ：取值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次;

infinite：动画将会无限次的播放。

5.设置动画播放方向

animation-direction: normal|alternate;

normal（ 默认值）：动画的每次循环都是向前播放；

alternate                ：动画播放在第偶数次向前播放，第奇数次向反方向播放。

6.设置动画的播放状态

animation-play-state: paused|running;

running（ 默认值）：播放（  将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将    回到最原始设置状态）

paused                    ：暂停（将正在播放的动画停下来）

类似于音乐播放器一样。（这个属性目前很少内核支持，最好还是通过js来控制播放和暂停）

兼容性：安卓4.4以上
               苹果6Plus及以上

7.设置动画时间外的属性  （动画开始之前和结束之后发生的操作）

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

none（默认值）：表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards             ：表示动画在结束后继续应用最后的关键帧的位置

backwards         ： 会在向元素应用动画样式时迅速应用动画的初始帧

both                     ：元素动画同时具有forwards和backwards效果

在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。