如何通过jQuery重置CSS Animation状态，使其每次触发都能重新执行？

要解决点击按钮时重置闪烁动画的问题，核心是让浏览器重新触发CSS动画。因为CSS动画在元素持有对应类名时只会执行一次，直接替换状态类不会让动画重新启动，必须先移除动画类，再重新添加（中间需要让浏览器完成重绘）。

修改后的实现代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="animate">I am going to get animated!</span>
<div>
  <p style="margin-bottom:5px">These buttons are acting as response</p>
  <button id="true">True</button>
  <button id="false">False</button>
</div>

CSS

@-webkit-keyframes flash {
  0%, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.flashit {
  -webkit-animation: flash linear 1s 3;
  -moz-animation: flash linear 1s 3;
  animation: flash linear 1s 3;
}

.true {
  color: green;
}

.false {
  color: red;
}

注：原CSS的flash动画缺少中间过渡帧，这里补充了50%阶段的opacity:0，让闪烁效果可见

jQuery代码

$("#true").click(function() {
  resetAnimation('true');
  console.log("True clicked");
});

$("#false").click(function() {
  resetAnimation('false');
  console.log("False clicked");
});

function resetAnimation(targetClass) {
  const $el = $('#animate');
  // 移除所有状态类和动画类
  $el.removeClass('true false flashit');
  // 触发浏览器重绘，确保类移除操作生效
  void $el.get(0).offsetWidth;
  // 添加目标状态类和动画类，重新启动动画
  $el.addClass(`${targetClass} flashit`);
}

核心原理 #

• 移除类名：先把所有相关的状态类（true/false）和动画类（flashit）都移除，让元素回到初始状态
• 触发重绘：通过访问元素的offsetWidth属性，强制浏览器立即处理DOM变化，避免类的移除和添加被合并执行
• 重新添加类：添加目标状态类和动画类，此时浏览器会重新识别动画，让闪烁效果从头开始执行

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