animation-direction 为动画指定播放方向，有 4 个可能取值：
- normal（默认），正向播放动画；
- reverse，反向播放动画；
- alternate，动画来回播放（从正向开始）；
- alternate-reverse，动画来回播放（从反向开始）。
以下面的动画为例：
@keyframes move-smooth {
to {
transform: translateX(50px);
}
}
正向播放动画（默认）
这个动画效果 move-smooth，是让应用元素向右平移 50px。比如：
.move {
animation: 1s move-smooth;
}
<div class="move">这是一段移动文字</div>
div.move 会自动执行动画 move-smooth 1 次，周期 1 秒。动画效果：元素 div.move 花费 1 秒从 translate(0) 处 ease 到 translate(50px) 的地方，即从原处向右 ease 式的平移了 50px，1 秒到动画结束，元素立即回到初始位置。
这个动画属于正向播放的，因为当我们没有为 animation-direction 指定方向时，默认值是 normal。
反向播放动画
我们再来看看动画反向播放的情况，即 animation-direction 属性值取 reverse 的情况。我们简单修改下现有 CSS 样式声明 .move，添加一个 reverse：
.move {
animation: 1s move-smooth reverse;
}
欸！发现 div.move 变为向左平移 50px 了，初始状态则是在 translate(50px) 处。整个运动过程是：从 translate(50px) 的地方花费 1 秒 ease 到了 translate(0) 的地方，然后动画结束！如此自然的运动效果，没有上面取值 normal 时，动画结束，元素突然回到初始状态的状况发生。
从中我们可以体会到，reverse 的作用就是让动画反向播放的。
来回播放动画
alternate 和 alternate-reverse 都是用来控制动画来回播放的，不同的是：
- alternate 是从正向开始播放动画的；
- alternate-reverse 是从反向开始播放动画的。
“来回播放”也意味着在使用 alternate 和 alternate-reverse 这两个值时，动画执行次数至少要 2 次，才能完整体现它们的作用效果。
我们先拿 alternate 下刀。
从正向开始
我们修改下 .move 样式成 alternate 的，动画运动次数给 2。
.move {
animation: 1s move-smooth 2 alternate;
}
下面我们细细观察动画效果……
发生 2 次动画，第一次从 translate(0) 运动到 translate(50px)；第二次从 translate(50px) 运动到 translate(0)。每次运动时间为 1 秒。
嗯，发现 alternate 有点 normal,reverse 的意思啊，normal,reverse normal,reverse…… 这样子，所以为了保证 alternate 这类动画运动的完整性，要保证运动次数都是偶数次（2、4、6……）。
从反向开始
我们修改下 .move 样式成 alternate-reverse 的，动画运动次数给 3。
.move {
animation: 1s move-smooth 3 alternate-reverse;
}
下面我们细细观察动画效果……
发生 3 次动画，第一次从 translate(50px) 运动到 translate(0)；第二次从 translate(0) 运动到 translate(50px)；第三次从 translate(50px) 运动到 translate(0)。啊哈，第三次终于回到初始位置了！所以保证 alternate-reverse 这类动画运动的完整性，要保证运动次数都是奇数次（3、5、7……）。
这样看，alternate-reverse 就是 reverse,normal reverse,normal……的意思，为了保证运动结束元素处于初始状态，所以我们设定的动画数都是奇数次的，也就是最后一次动画都是 reverse 的。
（完）
