纯CSS动画切换类时无法正常反向播放问题求助

问题根源 #

元素初始动画执行完毕后，通过animation-fill-mode: forwards停在了动画的最终帧（绿色背景）。此时直接添加反向动画类，浏览器会判定该动画已经完成过，不会重新触发动画流程，直接跳到反向动画的最终帧（红色背景），导致看不到过渡效果。

解决方案 #

切换类时，先强制重置元素的动画状态，让浏览器重新识别动画触发：

修改后的代码 #

<div>
  <button>click</button>
  <span class="initial-animate"></span>
</div>

<style>
span {
  display: block;
  width: 100px;
  height: 100px;
}

@keyframes a {
  from { background: red; }
  to { background: lime; }
}

.initial-animate {
  animation: a 1s forwards;
  animation-delay: 3s;
}

.opened {
  animation: a 1s reverse forwards;
  animation-delay: 3s;
}
</style>

<script>
$("button").click(function(){
  const $span = $("span");
  // 先移除所有动画类，重置状态
  $span.removeClass("initial-animate opened");
  // 触发浏览器重绘，确保后续类变更能触发动画
  void $span[0].offsetWidth;
  // 根据之前状态切换目标类
  const isInitial = !$span.hasClass("initial-animate");
  $span.addClass(isInitial ? "initial-animate" : "opened");
});
</script>

关键步骤说明 #

• 重置动画类：移除所有和动画相关的类，让元素回到未执行动画的初始红色背景状态。
• 强制重绘：void $span[0].offsetWidth 会迫使浏览器重新计算元素布局，避免类变更被浏览器优化跳过动画触发。
• 重新添加类：根据元素之前的状态添加对应动画类，此时浏览器会完整执行动画流程，包括设置的3秒延迟效果。

另一种简化方案（动态修改动画属性） #

如果不想频繁切换类，也可以直接修改元素的动画属性实现双向切换：

<div>
  <button>click</button>
  <span></span>
</div>

<style>
span {
  display: block;
  width: 100px;
  height: 100px;
  animation: a 1s forwards;
  animation-delay: 3s;
}

@keyframes a {
  from { background: red; }
  to { background: lime; }
}
</style>

<script>
$("button").click(function(){
  const $span = $("span");
  const currentDir = $span.css("animation-direction");
  
  // 重置元素到初始状态
  $span.css({
    animation: "none",
    background: "red"
  });
  void $span[0].offsetWidth;
  
  // 切换动画方向并重新触发
  $span.css({
    animation: `a 1s ${currentDir === "normal" ? "reverse" : ""} forwards`,
    animationDelay: "3s"
  });
});
</script>

内容的提问来源于stack exchange，提问作者GGKMNTN