语法：
animation-direction: normal | reverse | alternate | alternate-reverse;
- normal: 默认值。动画在每次循环中正向播放。
- reverse: 动画在每次循环中反向播放。
- alternate: 动画在每次循环中轮流正向和反向播放。第一次循环正向播放，第二次循环反向播放，依此类推。
- alternate-reverse: 动画在每次循环中轮流反向和正向播放。第一次循环反向播放，第二次循环正向播放，依此类推。
示例：
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.slide-animation {
animation: slide 2s ease-in-out infinite alternate;
}
在上述示例中，通过 @keyframes 定义了一个名为 slide 的关键帧动画，然后将这个动画应用于类名为 .slide-animation 的元素。该元素将以 2 秒的时间在 x 轴方向上往右移动 100 像素，采用缓动函数 ease-in-out，无限循环并在每次循环中轮流正向和反向播放。
animation-direction 属性对于创建更加生动和有趣的动画效果非常有用。
转载请注明出处：http://www.zyzy.cn/article/detail/5981/CSS