animation-direction取值为normal、reverse、alternate、alternate-reverse，分别控制动画每轮的播放方向逻辑；设reverse无变化常因关键帧定义未适配倒播顺序。
animation-direction 的取值和实际效果
这个属性决定动画在每次循环中是正向播放、反向播放，还是来回交替。关键不是“反转一次”，而是控制每一遍的走向逻辑。
-
normal：从@keyframes定义的 0% 到 100%，每轮都一样 -
reverse：每轮都从 100% 倒着播到 0%，但关键帧定义本身不变（即你写的 0% 仍是起始状态，只是被倒着用） -
alternate：第 1 轮 normal，第 2 轮 reverse，第 3 轮 normal……奇数轮正向，偶数轮反向 -
alternate-reverse：第 1 轮 reverse，第 2 轮 normal，第 3 轮 reverse……奇数轮反向，偶数轮正向
为什么设了 reverse 看不出变化？
常见错觉：写了 animation-direction: reverse，但动画看起来没“反转”。本质原因是——你没改 @keyframes 里的关键帧语义，而浏览器只是把播放顺序倒过来读而已。
比如你定义：
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }加 reverse 后，它会先应用 100% 的状态（translateX(100px)），再过渡到 0%（translateX(0)），视觉上就是从右往左滑。但如果关键帧写反了（比如 0% 是 100px、100% 是 0px），再加 reverse 就又绕回来了。
立即学习“前端免费学习笔记（深入）”；
和 animation-play-state 或 js 控制暂停/重播的区别
animation-direction 不影响播放状态，只影响方向逻辑；它和 animation-play-state: paused 或 JS 中调用 el.getAnimations()[0].reverse() 是不同层面的事。
- 用 css 属性控制方向，适合声明式、循环稳定的场景（比如呼吸灯、无限滚动条）
- 用 JS 的
reverse()方法，是实时翻转当前动画的播放方向（包括已进行的时间点），适合交互触发的即时反转（如 hover 进入时倒播回原位） -
animation-direction对单次动画（animation-iteration-count: 1）设reverse，只会播一遍倒序，不会“来回”——那得靠alternate
兼容性和性能注意点
所有现代浏览器都支持 animation-direction，包括 safari 9+ 和 chrome 43+，但 IE 完全不支持（IE10/11 只支持旧版 -webkit- 前缀，且行为不稳定，建议回避）。
性能上它本身不触发重排，但若关键帧里含 top/left 等触发 layout 的属性，倒播时仍会同样消耗。更稳妥的做法是始终用 transform 和 opacity，无论方向怎么变。
容易被忽略的是：当多个动画叠加在同一个元素上，每个动画的 animation-direction 都要单独设置，它不继承也不全局生效。