语法：
selector {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
属性值：
1. normal（默认值）:
- 动画正常播放。
2. reverse:
- 动画反向播放。
3. alternate:
- 动画正向反向交替播放，即正向-反向-正向-反向...。
4. alternate-reverse:
- 动画反向正向交替播放，即反向-正向-反向-正向...。
示例：
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.bouncing-ball {
animation: bounce 2s ease-in-out infinite alternate;
animation-direction: alternate-reverse;
}
在这个例子中，定义了一个名为 bounce 的动画规则，使元素在垂直方向上反复弹跳。然后，通过 .bouncing-ball 类选择器将这个动画应用到具体的元素上，并使用 animation-direction: alternate-reverse; 设置了交替反向播放，即反向-正向-反向-正向... 的循环。
转载请注明出处：http://www.zyzy.cn/article/detail/4099/CSS