animation属性包含8个子属性，其中每个子属性所起的作用都不一样，只有了解并掌握了每个子属性的功能以及其使用方法，才能够更好地运用animation属性实现完美的动画效果。

1.animation-name属性——调用动画

animation-name属性主要用来调用动画，其调用的动画是通过@keyframes声明的动画。animation-name属性的语法格式如下。

animation-name: none | IDENT[,none | IDENT] *;

2.animation-duration属性——动画播放时间

animation-duration属性用来设置所调用的关键帧动画的播放时间。animation-duration属性的语法格式如下。

animation-duration: <time>[,<time>] *;

animation-duration属性与transition-duration属性的使用方法类似，是用来指定元素播放动画所持续的时间，也就是完成从0%~100%一次动画所需要的时间。<time>取值为数值，单位为秒，其默认值为0，意味着动画周期为0，也就是没有动画效果。如果取值为负值则会被视为0。

3.animation-timing-function属性——动画播放方式

animation-timing-function属性用来设置所调用的关键帧动画的播放方式。animation-timing-function属性的语法格式如下。

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) [,ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>)] *;

animation-timing-function属性是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。

4.animation-delay属性——动画开始播放时间

animation-delay属性用来设置所调用的关键帧动画开始播放的时间，是延迟还是提前等。animation-delay属性的语法格式如下。

animation-delay: <time> [,<time>] *;

animation-delay属性与transition-delay属性的使用方法以及所起到的作用是相同的。

5.animation-iteration-count属性——动画播放次数

animation-iteration-count属性用来设置所调用的关键帧动画的播放次数。animation-iteration-count属性的语法格式如下。

animation-iteration-count: infinite | <number> [,infinite | <number>]*;

该属性主要用于设置动画的播放次数，其属性值通常为整数，但也可以使用带有小数的数值。该属性的属性值默认为1，这也意味着动画只播放一次。如果取值为infinite，动画将会无限循环播放。

6.animation-direction属性——动画播放方向

animation-direction属性主要用于设置所调用的关键帧动画的播放方向。animation-direction属性的语法格式如下。

animation-direction: normal | alternate [,normal | alternate]*;

animation-direction属性主要有两个属性值，默认值为normal，表示动画的每次循环播放都是向前播放；如果设置该属性值为 alternate，则动画播放为偶数次则向前播放，奇数次则向反方向播放。

7.animation-play-state属性——动画播放状态

animation-play-state属性主要用来设置所调用关键帧动画的播放状态。animation-play-state属性的语法格式如下。

animation-play-state: running | paused [,running | paused] *;

animation-play-state属性有两个属性值，其中running为默认值，作用类似于音乐播放器，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从动画的开始播放，也可能是从暂停的位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

8.animation-fill-mode属性——动画时间外属性

animation-fill-mode属性用于设置在动画开始之前和结束之后所发生的操作。animation-fill-mode属性的语法格式如下。

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

animation-fill-mode属性主要有4个属性值：none、forwards、backwards和both。其默认值为none，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会恢复到初始帧处。当属性值设置为forwards时，动画在结束后继续应用最后关键帧的位置。当属性值为backwards时，会在向元素应用动画样式时迅速应用动画的初始帧。当属性值为both时，元素动画同时具有forwards和backwards效果。