CSS动画反向播放通过animation-direction控制：alternate实现循环往返（奇数次正向、偶数次反向），需配合infinite或多次循环；reverse实现单次全程倒放（100%→0%），常用于退出动画；二者互斥，不可共用。
CSS动画反向播放，主要通过 animation-direction 属性控制，其中 alternate 和 reverse 是两个关键值，但它们作用不同，不能混用。下面说清楚怎么用、什么时候用。
用 alternate 实现「来回循环」效果
alternate 不是让单次动画倒放，而是让每次循环时自动翻转播放方向：第1次正向（0% → 100%），第2次反向（100% → 0%），第3次再正向……如此往复。它必须配合 animation-iteration-count: infinite 或大于1的次数才看得出效果。
示例：
.box {animation: slide 2s ease-in-out infinite alternate;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
这样元素就会在起点和100px之间平滑往返移动。
立即学习“前端免费学习笔记（深入）”；
用 reverse 实现「全程倒放」一次
reverse 表示整个动画从结束状态开始，按逆序执行到起始状态——即完整地倒着播一遍（100% → 0%）。它只影响单次播放的方向，不改变循环行为。
常见用途：
- 做「退出动画」：比如某个弹窗关闭时，用和进入动画相同的 keyframes，但设
animation-direction: reverse，就能自然倒退收起； - 避免重复写 keyframes：不用为收起再定义一套从100%到0%的帧，复用原动画即可。
注意：reverse 本身不会自动循环，若要倒放多次，需额外设置 animation-iteration-count，且每次都是倒放。
想「暂停后倒播」？纯 CSS 做不到，需 JS 配合
CSS 动画没有内置的“倒带”或“从当前进度反向播放”能力。比如动画播到60%时，想让它倒退到0%，仅靠 animation-direction 无法实现——因为该属性只在动画开始时生效，运行中修改无效（除非重置动画）。
可行办法：
- 用 JavaScript 清除并重新触发动画，同时设
animation-direction: reverse； - 改用
transform+transition手动控制状态，更灵活； - 借助 Web Animations API（
element.animate()）动态控制播放方向和时间。
别混淆：alternate ≠ reverse
这是最容易搞错的一点：
-
alternate：多轮循环中交替方向，视觉上是“来回动”，但每轮仍是完整播放 keyframes（只是顺序调换）； -
reverse：单轮从末尾倒着播到开头，不循环时就只播一次倒序； - 两者互斥，不能同时写
alternate reverse，后者会覆盖前者。
