animation-direction: reverse 未生效主因是关键帧未适配倒播逻辑：浏览器仅反转播放顺序，从100%状态起始过渡至0%，若100%与元素初始态冲突或0%/100%值相同，则视觉无变化。
animation-direction: reverse 为什么动画没“倒过来”？
设了 animation-direction: reverse 却看不出变化，大概率不是属性写错了，而是关键帧定义没配合倒播逻辑。浏览器不会重写你的 @keyframes，它只是把播放顺序倒过来读：原本从 0% → 100%，现在就从 100% 状态开始，过渡到 0% 状态。
常见错误场景：
- 元素初始状态是默认的
transform: translateX(0)，但@keyframes里100%是translateX(100px)；加reverse后，第一帧直接应用100%的样式（即translateX(100px)），导致视觉上“跳”到右边再滑回来——如果你没预留这个初始偏移，就会觉得“没反向” -
@keyframes里0%和100%值相同（比如都是opacity: 1），那无论正播反播都看不出区别 - 用了
animation-fill-mode: forwards但没注意：它保留的是最后一帧状态，而reverse的“最后一帧”是0%，不是你印象中的终点
alternate 和 reverse 的核心区别在哪？
animation-direction: reverse 是“每轮都倒着播”，alternate 是“轮流倒着播”——这是行为本质差异，直接影响动画节奏和最终停留态。
举个例子，假设 animation-iteration-count: 3：
-
reverse：第1轮100% → 0%，第2轮还是100% → 0%，第3轮还是100% → 0%；3轮结束停在0% -
alternate：第1轮0% → 100%，第2轮100% → 0%，第3轮0% → 100%；3轮结束停在100% -
alternate-reverse：第1轮100% → 0%，第2轮0% → 100%，第3轮100% → 0%；3轮结束停在0%
所以，想实现“播一次正向、再播一次反向”，必须用 alternate，而不是 reverse 加 iteration-count: 2。
多个 animation-direction 值怎么配对 keyframes？
当动画名有多个（用逗号分隔），animation-direction 也支持逗号分隔的值列表，按顺序一一对应。没写全的部分会回退到默认值 normal。
例如：
animation-name: slide, fade, spin; animation-direction: reverse, alternate;
实际生效的是：slide → reverse，fade → alternate，spin → normal（因为第三个值缺失）。
注意点：
- 值数量不匹配时，浏览器不会报错，但容易误判行为
- 所有动画共享同一个
animation-duration和animation-timing-function，但方向可独立控制 - 如果某段动画本身不包含位移或渐变类变化（比如纯
z-index切换），配reverse或alternate就完全不可见
animation-direction 在 JS 动态切换时要注意什么？
用 JS 改 element.style.animationDirection = 'alternate' 是可行的，但别指望它“立刻倒带”——它只影响下一轮循环的起始方向。
典型陷阱：
- 当前动画正在运行中，改 direction 不会中断或重置当前轮次，只是为下一轮预设方向
- 想强制从新方向重新开始，得先清掉动画：临时设
animation: none，offsetWidth触发重排，再恢复原动画声明 - 用
getComputedStyle读取animation-direction返回的是计算值（如"reverse"），但无法得知当前处于哪一轮、正向还是反向中间态
真正难处理的，是那些依赖方向语义做状态判断的交互逻辑——比如“滑入完成才显示按钮”，在 alternate 下，同一动画可能交替以不同端点结束，得靠监听 animationiteration 事件并自己维护轮次计数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
