CSS动画反向循环播放技巧

想让CSS动画无缝循环并自动正反向交替播放？别折腾JavaScript监听事件或手写两套keyframes——`animation-direction: alternate`才是唯一可靠、原生同步、无跳变无延迟的解决方案：它让动画首次正向播放后自动反向回放，循环往复，且浏览器会智能镜像缓动曲线、交换关键帧起终点角色；只需配合`animation-iteration-count: infinite`（或≥2），避开`alternate-reverse`的初始闪烁陷阱，并优先使用`transform`和`opacity`等可合成属性确保性能，就能轻松实现丝滑、稳定、跨浏览器兼容的双向循环动画。

animation-direction: alternate 是唯一可靠解法

直接说结论：用 animation-direction: alternate，而不是靠 JavaScript 控制或手动写两段 keyframes。它让动画正向播完自动反向播回，且每次循环都保持这个模式，无需额外逻辑。

常见错误是试图用 animation-direction: reverse 配合 animation-fill-mode: forwards，结果只反转第一轮、后续全乱；或者误以为 animation-iteration-count: 2 + 手动切方向能模拟，但无法做到无缝衔接和状态重置。

• alternate 必须配合 animation-iteration-count 大于 1（比如 infinite 或 2），否则看不出“反向回来”的效果
• 反向播放时，@keyframes 中的 0% 和 100% 会互换角色：原 0% 变成终点，原 100% 变成起点
• 注意 timing function：如果用了 ease-in，反向时它会变成 ease-out（浏览器自动镜像缓动曲线）

为什么不用 JavaScript 监听 animationend 再反转？

理论上可行，但实际掉坑率极高。核心问题是：动画结束瞬间 DOM 状态已定，你改 animation-direction 或重设 animation-name 会触发重排，造成视觉跳变或卡顿。

更麻烦的是时间精度——animationend 事件触发有微小延迟（尤其低端设备），而 CSS 原生 alternate 是渲染引擎级同步，无延迟、无竞态。

• 不要在 animationend 里调用 el.style.animationDirection = 'reverse'
• 避免用 setTimeout 补偿延迟，这会让节奏不可控
• 若必须用 JS（比如要动态切换方向逻辑），优先用 el.getAnimations() 检查当前播放状态，而非依赖事件

alternate 和 alternate-reverse 的区别在哪？

别被名字绕晕：alternate 是“第一次正向、第二次反向、第三次正向……”，而 alternate-reverse 是“第一次反向、第二次正向、第三次反向……”。绝大多数需求只需要前者。

典型误用场景：想让元素从隐藏态淡入再淡出，却设了 alternate-reverse，结果第一帧就从 opacity: 1 开始闪一下——因为反向播放时，keyframes 的 0% 被当成了初始值。

• 默认起始状态由元素自身样式决定，不是 keyframes 的 0%
• 如果 keyframes 里写了 0% { opacity: 0; }，那 alternate 第一次播就是 0→1，第二次播就是 1→0
• alternate-reverse 第一次播是 1→0（把 100% 当起点），容易导致意料外的初始闪烁

兼容性与性能要注意什么？

animation-direction: alternate 在所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）都稳定支持，连 iOS Safari 9.3 都没问题。真正要盯的是硬件加速和重绘开销。

反向播放本身不增加计算量，但如果你在 keyframes 里写了大量 transform 或 filter，且没触发 GPU 加速，来回播放可能引发掉帧。

• 确保动画属性是可合成的：优先用 transform 和 opacity，避免 left、top、width
• 加 will-change: transform 提前提示浏览器（但别滥用，仅对频繁动画的元素）
• 测试真机：iOS 上某些 filter 动画在 alternate 模式下有轻微撕裂，可降级为单向 + JS 控制

关键点就这些：方向控制交给 CSS 原生属性，别抢渲染引擎的活；反向不是“倒带”，而是镜像播放，起始态永远由当前循环的“方向”决定；真要动态干预，先看能不能用 animation-play-state 暂停/恢复，比硬切方向安全得多。

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