animation-direction: reverse 实现单次反向播放，从100%帧倒序执行至0%，不修改关键帧定义、不重置状态、不影响最终样式，仅翻转时间轴映射。
animation-direction 设置为 reverse 就能反向播放动画
直接把 animation-direction 设成 reverse，动画就会从最后一帧开始、按倒序执行。它不改变关键帧定义，只翻转播放顺序，是最轻量的反向控制方式。
常见错误是以为要重写 @keyframes 或手动调整百分比值——完全没必要。只要方向设对，浏览器自动处理帧映射。
-
animation-direction: reverse：从 100% 关键帧播到 0%，时间函数（如cubic-bezier）也按反向应用 - 搭配
animation-iteration-count: 2时，第一轮正向、第二轮反向（如果设成alternate才会交替） - 注意：
reverse不重置动画状态，比如元素已停在 100%，再触发该动画会从 100% 开始往回走
alternate 和 reverse 的区别必须分清
reverse 是单次反向播放；alternate 是奇数次正向、偶数次反向，且每次循环都重置起始状态。两者行为完全不同，选错会导致动画“跳变”或停顿异常。
例如一个移动动画：0% { left: 0 } → 100% { left: 200px }：
-
animation-direction: reverse：只播一次，从left: 200px移回left: 0 -
animation-direction: alternate：第一次左→右，第二次右→左，第三次又左→右……每次循环起点都是上一轮终点 - 若同时设
animation-direction: alternate-reverse？无效，CSS 不支持这种组合值
配合 animation-play-state 控制暂停后反向继续
暂停（animation-play-state: paused）后再切方向，不会自动跳帧——它会在当前帧位置开始反向运行动画。这点容易被忽略，导致视觉断层。
- 想让暂停后“无缝反向”，得确保动画本身是可逆的（比如
transform: translateX()比opacity更稳妥） - 不要依赖
reverse来“撤销”动画效果；它只是播放控制，不修改最终样式。要还原样式得靠 JS 或重置 class - 调试时可用
getComputedStyle(el).animationDirection检查当前生效值，注意返回的是计算后值（如reverse或normal）
兼容性与性能影响很小，但别和 transition 混用
animation-direction 在所有现代浏览器中都支持（Chrome 43+/Firefox 16+/Safari 9+），IE10+ 也支持。性能开销几乎为零，因为它不触发重排，只影响合成层的时间映射。
- 避免和
transition同时作用于同一属性：比如动画控制transform，又给该元素加了transition: transform 0.3s，可能导致方向切换时出现意外缓动 - 服务端渲染（SSR）或初始隐藏元素（
display: none）下，首次显示时设reverse可能不触发——需确保元素已挂载且可见后再应用动画类 - 用 CSS-in-JS（如 Emotion）时，注意插值语法：不能写
animationDirection: 'reverse'漏掉引号，否则会被忽略
实际反向播放的关键在于理解它只是时间轴翻转，不是状态重置。最常出问题的地方，是以为 reverse 能“撤回”动画副作用，或者在暂停状态下误判起始帧位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
