animation-direction 控制动画播放方向：normal（正向）、reverse（单次反向）、alternate（奇偶次交替）、alternate-reverse（首反次正）；它不修改关键帧，仅改变播放顺序逻辑。
animation-direction 控制动画正向还是反向
直接用 animation-direction 就能决定动画是正向（normal）、反向（reverse），还是来回交替（alternate）。它不改变关键帧定义，只改变播放时的顺序逻辑。
常见误区是以为改 @keyframes 里的百分比就能反转——其实没必要，也不推荐。真正该动的是这个属性。
-
normal：从0%到100%播放（默认） -
reverse：从100%到0%播放，整个动画倒着走一次 -
alternate：第 1 次正向，第 2 次反向，第 3 次又正向……循环切换 -
alternate-reverse：第 1 次反向，第 2 次正向，以此类推
配合 animation-iteration-count 实现“播完就倒放”效果
如果想让一个动画先正向播完、再原路倒放回起点（类似弹跳后回弹），单靠 animation-direction: alternate 不够——它每次都是完整周期，不会在末尾“接续”倒放。
更可靠的做法是用两个连续动画，或借助 animation-fill-mode + JavaScript 控制。但最轻量的纯 CSS 方案是叠加两次动画：
立即学习“前端免费学习笔记（深入）”；
div {
animation: slide 1s ease-in forwards,
slide-reverse 1s ease-out 1s forwards;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
@keyframes slide-reverse {
from { transform: translateX(100px); }
to { transform: translateX(0); }
}
注意第二段动画加了 1s 延迟，确保在第一段结束后立刻开始；两段都用 forwards 防止跳回初始态。
reverse 和 alternate 的行为差异容易混淆
很多人以为 reverse 是“播放完自动倒带”，其实它只是把单次播放方向翻转——和 normal 播放内容完全一样，只是顺序颠倒。而 alternate 是周期性翻转，每轮都变方向。
- 设
animation-direction: reverse; animation-iteration-count: 2;→ 两次都从100%走到0% - 设
animation-direction: alternate; animation-iteration-count: 2;→ 第 1 次0%→100%，第 2 次100%→0%
所以“播一次正向、再播一次反向”应该选 alternate，而不是 reverse。
用 JavaScript 动态切换 direction 时要注意重绘
直接改元素的 style.animationDirection 是有效的，但浏览器不会自动重播动画——它只影响下一次触发。如果想立刻反向播放，得先清空再重设：
el.style.animation = 'none'; el.offsetHeight; // 强制重排，清掉上一次动画状态 el.style.animation = 'slide 0.5s ease-in reverse';
否则即使样式改了，动画也可能卡在当前帧不动。这个细节在交互控制中经常被忽略。
