如何实现CSS进度条动画平滑过渡至新进度值？

你遇到的问题本质是animation-iteration-count属于不可过渡的CSS属性，浏览器修改它时会直接跳转到目标状态，不会触发平滑过渡。要保留"进度关联颜色变化"的CSS动画优势，同时实现动态平滑更新，可采用以下两种方案：

方案一：CSS变量+过渡控制（适合简单颜色逻辑） #

用CSS变量存储进度值，通过过渡（transition）让进度变化时，宽度和颜色同步平滑过渡：

<div class="progress-bar"></div>
<button onclick="updateProgress(0.75)">设置75%进度</button>
<button onclick="updateProgress(0.3)">设置30%进度</button>

<style>
.progress-bar {
  width: 300px;
  height: 20px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  --progress: 0.5; /* 初始50%进度 */
}

.progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--progress) * 100%);
  /* 用渐变实现进度关联颜色 */
  background: linear-gradient(90deg, #2ecc71 0%, #3498db 50%, #e74c3c 100%);
  background-size: 200% 100%;
  background-position: calc((1 - var(--progress)) * 100%) 0;
  /* 给宽度和背景位置添加过渡 */
  transition: width 0.5s ease, background-position 0.5s ease;
}
</style>

<script>
function updateProgress(newProgress) {
  document.querySelector('.progress-bar').style.setProperty('--progress', newProgress);
}
</script>

原理说明 #

• 用--progress变量存储0~1的进度值，动态修改时通过transition让宽度和背景位置平滑变化
• 线性渐变的background-position偏移量随进度计算，实现进度对应颜色的自然过渡

方案二：animation-delay控制（适合复杂关键帧动画） #

如果你的颜色变化逻辑更复杂（比如需要多段关键帧动画），可以用无限循环的动画，通过调整animation-delay（负数）控制当前进度，同时给delay添加过渡实现平滑更新：

<div class="progress-bar"></div>
<button onclick="updateProgress(0.75)">设置75%进度</button>
<button onclick="updateProgress(0.3)">设置30%进度</button>

<style>
.progress-bar {
  width: 300px;
  height: 20px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  /* 定义完整的进度+颜色动画 */
  animation: progress-animation 1s linear infinite;
  animation-play-state: paused; /* 暂停动画 */
  animation-delay: -0.5s; /* 初始停在50%进度位置 */
  transition: animation-delay 0.5s ease; /* 过渡delay实现平滑变化 */
}

@keyframes progress-animation {
  0% {
    width: 0;
    background: #2ecc71;
  }
  50% {
    width: 50%;
    background: #3498db;
  }
  100% {
    width: 100%;
    background: #e74c3c;
  }
}
</style>

<script>
function updateProgress(newProgress) {
  const bar = document.querySelector('.progress-bar').children[0];
  // 动画时长1s，进度对应delay为 -(进度值 * 时长)
  bar.style.animationDelay = `-${newProgress}s`;
}
</script>

原理说明 #

• 完整的@keyframes定义了从0到100%的进度和颜色变化
• animation-delay设为负数时，代表动画已提前运行对应时长，直接停在目标进度位置
• 给animation-delay添加transition，修改时就会平滑过渡到新的进度状态

内容的提问来源于stack exchange，提问作者Jeppe Schaumburg Jensen