CSS动画反向播放怎么实现？使用alternate或reverse

CSS动画反向播放的核心在于精准掌握`animation-direction`属性的两个关键值——`alternate`用于实现平滑往返的循环动画（奇数次正向、偶数次反向），特别适合呼吸感、摇摆类交互；而`reverse`则专为单次倒放设计，能复用同一组关键帧快速实现退出动画，避免重复编码。二者作用机制截然不同、互斥不可共用，且纯CSS无法实现运行中暂停并倒播的动态控制，需JS或Web Animations API协同突破限制——理解它们的差异与适用场景，是写出高效、可维护动画效果的关键一步。

CSS动画反向播放，主要通过 animation-direction 属性控制，其中 alternate 和 reverse 是两个关键值，但它们作用不同，不能混用。下面说清楚怎么用、什么时候用。

用 alternate 实现「来回循环」效果

alternate 不是让单次动画倒放，而是让每次循环时自动翻转播放方向：第1次正向（0% → 100%），第2次反向（100% → 0%），第3次再正向……如此往复。它必须配合 animation-iteration-count: infinite 或大于1的次数才看得出效果。

示例：

这样元素就会在起点和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，后者会覆盖前者。

到这里，我们也就讲完了《CSS动画反向播放怎么实现？使用alternate或reverse》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！