用JavaScript模拟CSS动画makeItfadeIn，实现range滑块同步动效

问题背景 #

现有一段CSS进度条动画（makeItfadeIn），包含1秒延迟、3秒时长、ease（先快后慢）的缓动效果，需要让页面中的<input type="range">滑块执行完全同步的动画：从value=0滑动到指定目标值，最终与进度条同步到位。

修正后的基础代码 #

先调整原有CSS，避免样式冲突影响range滑块的正常显示：

.outer {
  margin: 50px;
}

.progress {
  border: 1px solid black;
  border-radius: 3px;
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, hotpink 50%, transparent 0);
  background-size: 200% 100%;
  background-position: right;
  animation: makeItfadeIn 3s 1s forwards;
}

@keyframes makeItfadeIn {
  100% {
    background-position: left;
  }
}

/* 给range滑块单独设置基础样式 */
.slider {
  width: 100%;
  margin-top: 10px;
}

对应HTML结构：

<div class="outer">
  <div class="progress"></div>
  <input type="range" value="0" min="0" max="100" class="slider" />
</div>

JavaScript同步动画实现 #

核心逻辑：监听CSS动画的启动事件，触发滑块动画时使用与CSS完全一致的缓动、时长参数，保证同步性。

// 获取页面元素
const progressBar = document.querySelector('.progress');
const slider = document.querySelector('.slider');
const targetValue = 50; // 对应进度条的50%目标位置

// 模拟CSS默认的ease缓动函数（匹配cubic-bezier(0.25, 0.1, 0.25, 1)）
function easeEasing(t) {
  return t < 0.5 
    ? 4 * t * t * t 
    : 1 - Math.pow(-2 * t + 2, 3) / 2;
}

// 滑块动画执行函数
function animateSlider() {
  const startTime = performance.now();
  const duration = 3000; // 与CSS动画一致的3秒时长
  const startValue = 0;
  const valueDiff = targetValue - startValue;

  function updateSlider(currentTime) {
    const elapsed = currentTime - startTime;
    if (elapsed >= duration) {
      slider.value = targetValue;
      return;
    }
    // 计算当前缓动进度对应的滑块值
    const progress = easeEasing(elapsed / duration);
    const currentValue = startValue + valueDiff * progress;
    slider.value = currentValue;
    requestAnimationFrame(updateSlider);
  }

  slider.value = 0; // 重置初始值
  requestAnimationFrame(updateSlider);
}

// 监听CSS动画启动事件，同步触发滑块动画
progressBar.addEventListener('animationstart', animateSlider);

关键细节说明 #

• 缓动一致性：自定义的easeEasing函数完全复刻CSS默认ease的动画节奏，保证滑块与进度条的运动曲线完全同步。
• 触发时机对齐：通过animationstart事件监听CSS动画的实际启动点，自动匹配1秒延迟后的动画开始时间。
• 流畅度保障：使用requestAnimationFrame实现帧级更新，确保滑块动画的流畅度与CSS动画一致。

内容的提问来源于stack exchange，提问作者four-eyes