animation-direction: reverse 是最简倒播方案，需确保 @keyframes 中 0% 为起始态、100% 为结束态，且避免关键帧两端样式相同或使用 layout 触发属性；reverse 不改变 duration 和 fill-mode，仅镜像缓动曲线；动态切换推荐重置动画或 Web Animations API 的 reverse() 方法。
animation-direction: reverse 是最简方案，但得配对关键帧语义
直接设 animation-direction: reverse 就能倒播，前提是你的 @keyframes 里 0% 和 100% 状态有明确位移或变化。比如 transform: translateX(0) → translateX(100px)，加 reverse 后会从 100px 回到 0。
常见错误是：关键帧写反了（0% 写成终点，100% 写成起点），再加 reverse 就抵消了；或者关键帧两端样式相同（如都是 opacity: 1），倒播就看不出效果。
- 确保
0%是动画“起始态”，100%是“结束态”，这样reverse才有实际意义 - 避免用
top/left等触发 layout 的属性，倒播时仍会重排，推荐统一用transform和opacity -
reverse不改变animation-duration或缓动函数，但浏览器会镜像cubic-bezier曲线（ease-in变成ease-out）
alternate 实现“正向播完自动倒播回来”，不是 reverse
想让动画播完立刻原路退回（比如弹窗展开后自动收起），别用 reverse，要用 animation-direction: alternate + animation-iteration-count: 2 或 infinite。
它不是“单次倒放”，而是定义循环行为：第一轮正向（0% → 100%），第二轮反向（100% → 0%），每轮都完整走一遍关键帧，且自动重置起始状态。
立即学习“前端免费学习笔记（深入）”；
-
alternate必须配合大于 1 的animation-iteration-count，否则只播一次正向，看不出交替 - 如果设了
animation-fill-mode: forwards，第二轮反向开始前，元素会先跳回 0% 状态——这会导致视觉断层，建议去掉或改用backwards - 不要和
reverse混用，CSS 不支持alternate-reverse这种组合值，写了也无效
JS 动态切换方向时，光改 direction 不够
运行中用 JS 改 element.style.animationDirection = 'reverse' 能生效，但只影响下一次播放；如果动画正在运行，当前帧位置不变，会从当前位置往 0% 倒着走——这常导致“卡顿”或“跳变”。
真正可控的切换方式是重置动画实例：
- 先移除动画 class，强制触发重排：
el.classList.remove('animate');→void el.offsetWidth;→el.classList.add('animate-reverse'); - 或用 Web Animations API：
el.getAnimations()[0].reverse()，它能精确倒带并保持当前时间点 - 更稳妥的做法是预定义两个动画（
slideIn/slideOut），用 class 切换，语义清晰、无歧义
reverse 不等于“撤销动画”，最终样式仍由 fill-mode 决定
animation-direction: reverse 只控制播放顺序，不改变动画结束后的停留状态。比如一个 slideIn 动画播完停在 translateX(100px)，你加 reverse 并重播，它会从 100px 回到 0，但播完又停在 0——这取决于你有没有设 animation-fill-mode。
-
fill-mode: forwards会让元素停在最后一帧（即 0%，因为 reverse 把 100% 当起点） -
fill-mode: backwards会让元素在动画开始前就应用 100% 的样式（适合倒播准备） - 别指望
reverse自动把元素“还原”到初始 DOM 状态，它只管动画过程，不管静态样式
reverse 没反应，最后发现是 0% 写错了位置，或者忘了删掉 forwards 导致倒播起点错位。 
