CSS关键帧动画仅首次触发，进度条二次点击无动画效果求助

问题根源 #

你当前的写法是直接给.progress-value绑定了load关键帧动画，但CSS动画默认仅在元素首次渲染时执行一次。后续通过JS直接修改width样式，不会触发动画重新执行——因为浏览器认为该动画已经完成，没有触发重跑的触发点。

方案一：用CSS过渡（Transition）替代关键帧动画（推荐） #

如果你的动画只是简单的宽度从当前值过渡到目标值，用transition会更简洁，且无需处理动画重置逻辑，每次修改宽度都会自动触发过渡：

修改后的CSS：

.progress-value {
  background: #b4b6ff;
  height: 20px;
  width: 0;
  transition: width 2s linear; /* 设置宽度过渡动画，时长和曲线可自定义 */
}

按钮JS代码无需额外修改，直接设置宽度即可：

// 第一个按钮
document.getElementById('progres-bar-1').style.width = '50%';

// 第二个按钮
document.getElementById('progres-bar-1').style.width = '20%';

// 第三个按钮
document.getElementById('progres-bar-1').style.width = '80%';

方案二：重置动画状态触发重跑 #

如果你坚持使用关键帧动画，需要每次点击时重置元素的动画状态，让浏览器重新执行动画：

首先调整CSS，将动画抽离为独立类：

.progress-value {
  background: #b4b6ff;
  height: 20px;
  width: 0;
}

.progress-animate {
  animation: load 2s normal forwards;
}

@keyframes load {
  0% { width: 0; }
}

然后修改按钮JS代码，每次点击时先重置元素状态，再重新触发动画：

// 封装复用函数，避免重复代码
function updateProgress(targetWidth) {
  const bar = document.getElementById('progres-bar-1');
  // 移除动画类，重置宽度
  bar.classList.remove('progress-animate');
  bar.style.width = '0%';
  // 强制浏览器触发重绘，否则重置操作可能不生效
  void bar.offsetWidth;
  // 重新添加动画类，设置目标宽度
  bar.classList.add('progress-animate');
  bar.style.width = targetWidth;
}

// 第一个按钮调用
updateProgress('50%');
// 第二个按钮调用
updateProgress('20%');
// 第三个按钮调用
updateProgress('80%');

这里的void bar.offsetWidth是关键——它会强制浏览器立即计算元素的布局，让之前的重置操作被识别，从而重新触发动画。

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