目前animation有下面9种属性，其中第一个是后面属性的简写形式。
| 属性 | 描述 |
|---|---|
| animation | 下面各属性的简写（除了 animation-play-state）语法如下： animation: name duration timing-function delay iteration-count direction fill-mode; |
| animation-name | 指定 @keyframes 动画的名称，语句中可以使用from...to结构，也可以使用百分比来定义。 |
| animation-duration | 动画完成一个周期的时间，默认为 0s表示无动画 |
| animation-timing-function | 动画运行的'节奏'，默认是 ease ease ease-in ease-out ease-in-out linear step-start step-end step-middle |
| animation-delay | 动画开始播放的延迟时间，默认是 0，允许负值，-2s使动画马上开始，但跳过2秒进入动画。 |
| animation-iteration-count | 动画播放的次数，默认是1， 不可以为负数， infinite表示无限循环， 可以为小数，比如 0.5 代表播放动画的一半即结束。 |
| animation-direction | 规定动画是否在下一个周期逆向播放 normal: 每次从@keyframes 0%执行到100%，一个周期结束后立即回到0%的位置 alternate: 假设animation-iteration-count:infinite，从@keyframes 0%执行到100%后，再从100%的位置回到0%，周而复始 reverse: 每次从@keyframes 100%执行到0%，一个周期结束后立即回到100%的位置 alternate-reverse: 假设animation-iteration-count: infinite，从@keyframes 100%执行到0%后，再从0%的位置回到100%，周而复始 |
| animation-fill-mode | 用于设定动画时间外的属性，也就是说一个动画周期开始之前或结束之后，元素的状态应该是什么样的。该属性有四个属性值，分别是： forwards：表示动画播放完成后，保持@keyframes里最后一帧的样式。 backwards：表示开始播放动画之前，元素的样式将设置为动画第一帧的样式 both：相当于同时配置了forwards和backwards。也就是说，动画开始前，元素样式将设置为动画第一帧的样式；而在动画线束状态，元素样式将设置为动画最后一帧样式。 |
| animation-play-state | 控制动画的运行或暂停，默认是running 该属性用于让一个动画的暂停与启动，有两个属性值，分别是running和pause，当设置为pause时，动画会立即会停在当前位置，当取消暂停后会在停住的位置继续执行，而不会回到原点（或终点）重新执行。 |
每个属性都可以添加多个属性值，他们之间用逗号隔开，就可以给一个元素添加多个动画。
