animation-direction [播放方向]

### 语法
```css
/*指定对象动画运动的方向。*/
animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*;
```

<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>normal</td></tr><tr><td>适用于</td><td>所有元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
检索或设置对象动画循环播放次数大于1次时，动画是否反向运动。

如果提供多个属性值，以逗号进行分隔。

### 取值
`normal`：正常方向。

`reverse`：动画反向运行,方向始终与`normal`相反。（FF14.0.1以下不支持）

`alternate`：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。

`alternate-revers`e：动画从反向开始，再正反方向交替运动，运动方向始终与`alternate`定义的相反。（FF14.0.1以下不支持）

### 实例代码
<iframe src="http://example.itshubao.com/inexample/443.html" width="100%" height="450px" frameborder="0" scrolling="no"></iframe>

### 兼容性
<table class="table"><thead><tr><th class="ie" width="20%">IE</th><th class="firefox" width="20%">Firefox</th><th class="opera" width="20%">Opera</th><th class="safari" width="20%">Safari</th><th class="chrome" width="20%">Chrome</th></tr></thead><tbody><tr><td>IE 10+</td><td>Firefox 3.5+</td><td>目前暂无版本支持</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>