JavaScript降低CSS动画duration后动画未走完全路径的原因是什么

问题根因 #

你动态修改运行中CSS动画的animation-duration属性时，浏览器不会自动将动画重置到起始状态，会按照新的时长对应当前已播放的进度重新计算位置，最终就会出现红色方块跳步、不从最右侧110vw位置开始移动的问题。同时你代码里没有初始化ourVillanAnimeDuration全局变量，首次修改时长时会出现值为NaN的异常，也是故障诱因之一。

修复方案 #

你需要在每次调整时长之后强制重启红色方块的动画，修改点如下：

1. 先在JS代码开头补全变量初始化
2. 调整时长更新逻辑，修改完时长后手动触发动画重启

1. 补全变量初始化 #

let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;
let ourVillanAnimeDuration = 5; // 新增：对应CSS中初始的5s动画时长

2. 修改时长调整逻辑 #

把原有setInterval里的时长判断代码：

if (ourVillanFigXValue < 10) {
  ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.3 + "s";
}

替换为以下代码：

if (ourVillanFigXValue < 10) {
  // 计算新时长，最低限制为2s
  ourVillanAnimeDuration = Math.max(2, ourVillanAnimeDuration - 0.3);
  ourVillanFig.style.animationDuration = ourVillanAnimeDuration + "s";
  // 强制重启动画
  ourVillanFig.classList.remove("animateVillan");
  void ourVillanFig.offsetWidth; // 触发浏览器重绘，避免类名修改被合并不生效
  ourVillanFig.classList.add("animateVillan");
}

修改后每次红色方块走到最左侧时，都会按新的时长从110vw位置重新开始移动，不会再出现路径走不全的问题。

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