滑块控制CSS关键帧动画速度失效：拖动时动画停止问题求助

API 探路者

2026-6-15

解决滑块控制CSS动画速度时停止的问题

问题根源是：修改CSS动画时长变量时，浏览器会重置动画并从头开始播放，视觉上表现为动画停止。以下是无需额外库的解决方案，核心是通过JS记录动画当前进度，修改速度后让动画从当前位置继续：

实现步骤

1. 基础HTML/CSS结构

定义CSS变量控制动画时长，背景位移动画保持无限循环：

<div class="blackhole"></div>
<input type="range" id="speed-slider" min="0.3" max="4" step="0.1" value="1">

:root {
  --anim-duration: 1s; /* 默认动画时长 */
}

.blackhole {
  width: 300px;
  height: 300px;
  background: url('你的黑洞背景图路径') repeat-x;
  animation: blackhole-slide var(--anim-duration) linear infinite;
}

@keyframes blackhole-slide {
  to {
    background-position-x: -3600px; /* 替换为你的背景图总宽度 */
  }
}

2. JS控制逻辑

监听滑块输入事件，记录动画当前进度，修改速度后通过负延迟让动画续播：

const slider = document.getElementById('speed-slider');
const blackholeEl = document.querySelector('.blackhole');
let prevDuration = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--anim-duration'));

slider.addEventListener('input', (e) => {
  // 获取当前动画已运行时间
  const currentAnimTime = parseFloat(getComputedStyle(blackholeEl).animationCurrentTime);
  // 计算已完成的进度比例
  const progress = currentAnimTime / prevDuration;
  // 滑块对应的新时长
  const newDuration = parseFloat(e.target.value);
  
  // 设置负延迟，让动画直接跳转到当前进度位置
  blackholeEl.style.animationDelay = `-${progress * newDuration}s`;
  // 更新CSS变量
  document.documentElement.style.setProperty('--anim-duration', `${newDuration}s`);
  
  // 更新记录的上一次时长
  prevDuration = newDuration;
});