CSS动画反向播放方法详解

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《CSS动画反向播放技巧解析》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

animation-direction 控制动画播放方向：normal（正向）、reverse（单次反向）、alternate（奇偶次交替）、alternate-reverse（首反次正）；它不修改关键帧，仅改变播放顺序逻辑。

animation-direction 控制动画正向还是反向

直接用 animation-direction 就能决定动画是正向（normal）、反向（reverse），还是来回交替（alternate）。它不改变关键帧定义，只改变播放时的顺序逻辑。

常见误区是以为改 @keyframes 里的百分比就能反转——其实没必要，也不推荐。真正该动的是这个属性。

• normal：从 0% 到 100% 播放（默认）
• reverse：从 100% 到 0% 播放，整个动画倒着走一次
• alternate：第 1 次正向，第 2 次反向，第 3 次又正向……循环切换
• alternate-reverse：第 1 次反向，第 2 次正向，以此类推

配合 animation-iteration-count 实现“播完就倒放”效果

如果想让一个动画先正向播完、再原路倒放回起点（类似弹跳后回弹），单靠 animation-direction: alternate 不够——它每次都是完整周期，不会在末尾“接续”倒放。

更可靠的做法是用两个连续动画，或借助 animation-fill-mode + JavaScript 控制。但最轻量的纯 CSS 方案是叠加两次动画：

div {
  animation: slide 1s ease-in forwards,
             slide-reverse 1s ease-out 1s forwards;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

@keyframes slide-reverse {
  from { transform: translateX(100px); }
  to   { transform: translateX(0); }
}

注意第二段动画加了 1s 延迟，确保在第一段结束后立刻开始；两段都用 forwards 防止跳回初始态。

reverse 和 alternate 的行为差异容易混淆

很多人以为 reverse 是“播放完自动倒带”，其实它只是把单次播放方向翻转——和 normal 播放内容完全一样，只是顺序颠倒。而 alternate 是周期性翻转，每轮都变方向。

• 设 animation-direction: reverse; animation-iteration-count: 2; → 两次都从 100% 走到 0%
• 设 animation-direction: alternate; animation-iteration-count: 2; → 第 1 次 0%→100%，第 2 次 100%→0%

所以“播一次正向、再播一次反向”应该选 alternate，而不是 reverse。

用 JavaScript 动态切换 direction 时要注意重绘

直接改元素的 style.animationDirection 是有效的，但浏览器不会自动重播动画——它只影响下一次触发。如果想立刻反向播放，得先清空再重设：

el.style.animation = 'none';
el.offsetHeight; // 强制重排，清掉上一次动画状态
el.style.animation = 'slide 0.5s ease-in reverse';

否则即使样式改了，动画也可能卡在当前帧不动。这个细节在交互控制中经常被忽略。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。