太原WEB前端工程师，太原UI设计师，太原网络营销师汇总将CSS3的调用动画（动画属性）

太原WEB前端工程师，太原UI设计师，太原网络营销师郭文军汇总将CSS3的调用动画（动画属性）

动画：

animation

1、animation-name

指定动画的名称

2、animation-duration

动画完成一个周期所需要用的时间

s/ms 为单位

3、animation-timing-function：

ease

linear

ease-in

ease-out

ease-in-out

4、animation-delay：

播放之前的延迟

注意：以上属性，在使用过程中，根据不同浏览器添加不同的前缀

5、animation-iteration-counts：

动画播放次数

1、默认为1

2、infinite  无限次数

注意：在使用过程中，根据不同浏览器添加不同的前缀

6、animation-direction：

动画的播放方向

1、normal 正常播放 默认值 从0%~100%

2、reverse  反向播放  100%~0%

3、alternate  轮流播放  奇数次数：为正向播放

7、animation：

通过该属性设置动画所有子属性

animation：name  duration  timing-function  delay iteration-counts   direction

8、animation-fill-mode：

动画在播放前以及播放后的填充模式

1、none 默认值

2、forwards  当动画完成后，保持在最后一个属性状态上（100%）

3、backwards  当动画播放前，显示最开始的属性值（0%）

4、both 播放前后，均采用填充模式

9、animation-play-state：

动画的播放状态

取值：

paused ：动画暂停

running：动画播放（默认值）