这个问题我之前也碰到过！确实是动画状态残留/叠加导致的：当你快速暂停并恢复时，浏览器还没来得及把进度条的状态完全重置到0，新动画就启动了，相当于在一个“半残留”的计算状态下开始执行，最终自然无法走到100%。而等待15秒以上再恢复时，之前的动画已经彻底结束，进度条状态被完全清零，所以动画能正常跑完。

下面给你两个靠谱的解决方案，按需选择：

方案一：纯CSS动画+强制状态重置 #

如果你的进度条是用CSS类控制动画的，关键是在暂停时强制触发浏览器重排，确保进度条的0状态被彻底应用，再移除动画；恢复时重复这个确认步骤再启动新动画：

示例代码 #

// 暂停逻辑
function pauseProgress() {
  const progressBar = document.getElementById('progress-bar');
  // 1. 强制设置进度为0
  progressBar.style.width = '0%';
  // 2. 触发浏览器重排（用void读取offsetWidth，让浏览器立即应用样式）
  void progressBar.offsetWidth;
  // 3. 移除动画类
  progressBar.classList.remove('progress-animate');
}

// 恢复逻辑
function resumeProgress() {
  const progressBar = document.getElementById('progress-bar');
  // 再次确认进度为0（保险操作）
  progressBar.style.width = '0%';
  void progressBar.offsetWidth;
  // 添加动画类启动新动画
  progressBar.classList.add('progress-animate');
}

对应的CSS动画：

.progress-animate {
  animation: fillProgress 15s linear forwards;
}

@keyframes fillProgress {
  from { width: 0%; }
  to { width: 100%; }
}

方案二：JavaScript精确控制动画（更灵活） #

如果纯CSS的方式还是有玄学问题，改用JS定时器控制每帧进度，状态完全在你的掌控中，就不会有残留问题：

示例代码 #

let progressTimer = null;
let currentProgress = 0;

// 启动/恢复进度条动画
function startProgress() {
  // 先清除之前的定时器，避免叠加
  if (progressTimer) clearInterval(progressTimer);
  // 重置进度为0
  currentProgress = 0;
  const progressBar = document.getElementById('progress-bar');
  
  // 按16ms一帧（接近屏幕刷新率）更新进度
  progressTimer = setInterval(() => {
    // 计算每帧需要增加的进度：100% / 15秒 = 每帧增加 (100/15000)*16 ≈ 0.1067%
    currentProgress += (100 / 15000) * 16;
    // 防止进度超过100%
    if (currentProgress >= 100) {
      currentProgress = 100;
      clearInterval(progressTimer);
    }
    // 更新进度条样式
    progressBar.style.width = `${currentProgress}%`;
  }, 16);
}

// 暂停进度条
function pauseProgress() {
  // 清除定时器
  if (progressTimer) clearInterval(progressTimer);
  const progressBar = document.getElementById('progress-bar');
  // 强制重置进度为0
  currentProgress = 0;
  progressBar.style.width = '0%';
}

额外注意点 #

• 如果你用的是transform而非width实现进度条，逻辑是一样的，把width换成对应的transform: scaleX(0)之类的属性即可。
• 确保CSS里的animation-fill-mode不会干扰重置操作——如果设置了forwards，暂停时必须用内联样式覆盖动画的最终状态，因为内联样式优先级更高。

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