基于进度条属性动态调整SCSS脉冲动画时长的方法

这个问题的核心原因是你当前的动画使用了百分比单位定义background-position的变化——百分比是相对于进度条自身宽度计算的。进度条越长，-50%到150%对应的实际像素距离就越大，而动画时长固定为2秒，自然视觉上速度就变快了。

下面是两种可行的解决方案：

方案1：纯CSS固定移动距离（推荐） #

把background-position的百分比换成固定像素值+calc()，让动画移动的总像素距离保持一致，这样无论进度条长度如何，速度都能稳定：

.progress {
  &__bar {
    /* 可自定义脉冲覆盖的宽度，比如200px */
    --pulse-overlay-width: 200px;
    animation: pulse 2s ease-out infinite;
  }
}

@keyframes pulse {
  0% { 
    background-position: calc(var(--pulse-overlay-width) * -1) center, right center, left center; 
  }
  100% { 
    background-position: calc(100% + var(--pulse-overlay-width)) center, right center, left center; 
  }
}

原理 #

动画从进度条左侧外--pulse-overlay-width的位置，移动到进度条右侧外--pulse-overlay-width的位置，总移动距离是2 * --pulse-overlay-width（固定像素值），搭配固定的2秒时长，速度就完全一致了。你可以调整--pulse-overlay-width来控制脉冲覆盖的宽度。

方案2：JS动态计算动画时长 #

如果需要保留百分比的相对逻辑，可以通过JS根据进度条的实际宽度动态调整animation-duration，让移动速度（像素/秒）保持恒定：

// 假设你希望每秒移动200像素（可自定义）
const pixelsPerSecond = 200;
const bar = document.querySelector('.progress__bar');
const percent = 75; // 示例进度百分比
const barWidth = (percent / 100) * bar.parentElement.offsetWidth;

// 原动画-50%到150%对应进度条宽度的2倍距离
const totalDistance = barWidth * 2;
// 计算适配的动画时长：总距离 / 每秒移动像素
const animationDuration = totalDistance / pixelsPerSecond;

// 应用样式
bar.style.width = `${percent}%`;
bar.style.animationDuration = `${animationDuration}s`;

原理 #

通过计算进度条的实际像素宽度，推导动画需要移动的总像素距离，再除以期望的每秒移动像素数，得到匹配的动画时长，确保不同长度的进度条动画速度一致。

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