如何用JS修改运行中CSS动画样式？能否变更自定义变量？

当然可以修改正在运行的CSS动画的自定义变量或样式，你遇到的问题是CSS动画对自定义变量的解析时机导致的——默认情况下，动画启动时会缓存全局继承的变量值，后续变量更新不会自动同步到正在运行的动画中。

解决方法 #

核心思路是让动画实时读取目标元素上的自定义变量，而非依赖全局继承的缓存值：

1. 调整CSS变量作用域
   把--fly_color变量从全局（:root）移到动画目标元素（.fly）上，确保动画每帧都会读取元素当前的变量值：

.fly {
  --fly_color: #ff0000; /* 初始颜色 */
  animation: flash 1s infinite;
}

@keyframes flash {
  0% { fill: var(--fly_color); }
  50% { fill: #ffffff; }
  100% { fill: var(--fly_color); }
}

2. 更新JavaScript变量修改逻辑
   在paintFlies()函数中，直接修改每个.fly元素的--fly_color变量，而非全局变量：

function paintFlies() {
  const flies = document.querySelectorAll('.fly');
  flies.forEach(fly => {
    // 生成随机颜色或指定目标颜色
    const randomColor = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
    fly.style.setProperty('--fly_color', randomColor);
  });
}

修改后，正在运行的flash动画会实时响应变量变化，无需重启动画就能更新颜色。

备选方案（依赖全局变量时） #

如果必须使用全局变量，修改后需要手动触发动画重绘（会打断动画连续性）：

function updateGlobalFlyColor(newColor) {
  document.documentElement.style.setProperty('--fly_color', newColor);
  const flies = document.querySelectorAll('.fly');
  flies.forEach(fly => {
    // 先移除动画
    fly.style.animation = 'none';
    // 触发重绘，强制浏览器更新DOM
    void fly.offsetHeight;
    // 重新添加动画
    fly.style.animation = '';
  });
}

这种方法会让动画从头开始，流畅度不如第一种方案，优先推荐调整变量作用域的解决思路。

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