使用JS修改CSS animation-name属性后动画不生效如何解决

• 浏览器渲染机制会合并同一帧内的相同样式变更操作：当你重复触发动画函数时，先清空animationName再赋值为Loading的操作会被浏览器合并，识别不到属性发生了有效变更，因此不会触发动画重放。
• 直接操作style属性修改动画名时，没有强制触发重绘重置动画状态，也会导致浏览器判定动画已经执行完毕，无需重新运行。

方案1：强制触发重绘后再赋值动画（最小改动适配原代码） #

在设置动画名前读取元素的布局属性触发重绘，让浏览器识别到样式变更，代码如下：

function Loading() {
  const img = document.querySelector("img");
  // 先清空原有动画名
  img.style.animationName = "";
  // 读取offsetWidth强制触发重绘，让浏览器记录清空操作
  void img.offsetWidth;
  // 重新赋值动画名触发动画
  img.style.animationName = "Loading";

  setTimeout(() => {
    img.style.animationName = "";
  }, 2000);
}

注：void关键字仅为了避免编辑器报未使用变量的警告，不影响功能执行

方案2：类名切换实现（更易维护，避免样式冲突） #

优先推荐用类名控制动画，而非直接操作style属性：
首先在CSS中新增动画类：

img.loading-anim {
  animation-name: Loading;
}

修改JS逻辑：

function Loading() {
  const img = document.querySelector("img");
  img.classList.remove("loading-anim");
  void img.offsetWidth;
  img.classList.add("loading-anim");

  setTimeout(() => {
    img.classList.remove("loading-anim");
  }, 2000);
}

方案3：监听动画结束事件替代setTimeout（更精准） #

不用手动对齐CSS和JS的动画时长，避免时间配置不一致导致的bug：

function Loading() {
  const img = document.querySelector("img");
  // 移除原有监听避免重复绑定
  img.removeEventListener("animationend", clearAnim);
  img.classList.remove("loading-anim");
  void img.offsetWidth;
  img.classList.add("loading-anim");

  function clearAnim() {
    img.classList.remove("loading-anim");
  }
  // 单次监听动画结束事件自动清除类名
  img.addEventListener("animationend", clearAnim, { once: true });
}

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