animation-direction

animation-direction 属性指定动画是否应该在一些或所有循环或迭代中反向播放。

animation-direction 属性很有用，通常与 animation-iteration-count 属性结合使用。后者指定在动画结束之前要重复多少次动画循环，并且当循环重复不止一次时，允许动画从末端回到开始播放是有用的，以避免“跳跃”循环之间的行为。

哎呀，今天好喜欢打比方哦~

我们再来个比方：你在跑 50 米折返跑的时候，肯定是跑过去再跑回来的对吧；如果每次当你到达 50 米处的时候，瞬间你就回到了原点，这是不是很奇怪！

为了避免这种视觉效果发生，我们就可以使用它，使动画反方向再播放。

它的参数：normal | reverse | alternate | alternate-reverse

• normal。默认值，动画应该正常播放。
• reverse。反向运行动画，每周期结束动画由尾到头运行。
• alternate。动画交替反向运行。反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代。
• alternate-reverse。反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

简单吧。使用时，不清楚了，再回来看看就好啦。

下一节：animation-fill-mode