这个问题我太熟了！之前踩过好几次CSS动画属性修改就重置的坑，第三方库偶尔也会出现跳转问题。其实最稳妥且平滑的方案，是抛弃CSS动画，用原生requestAnimationFrame手动掌控旋转逻辑，完全自己维护每一步的旋转状态，调整速度时根本不会有重启或跳转的问题。

具体实现步骤 #

1. 基础HTML&CSS结构

先搭好方块和速度控制滑块的基础样式：

<div class="box"></div>
<input type="range" id="speedControl" min="1" max="100" value="50">

.box {
  width: 100px;
  height: 100px;
  background: #2196F3;
  margin: 50px auto;
}

2. 核心JS逻辑（手动控制旋转）

我们需要跟踪三个关键变量：当前旋转角度、当前速度系数、动画帧ID，然后通过requestAnimationFrame循环更新旋转状态：

const box = document.querySelector('.box');
const speedControl = document.getElementById('speedControl');

// 核心状态变量
let currentRotation = 0; // 记录当前已经旋转的角度
let speed = parseFloat(speedControl.value) / 10; // 初始速度（把滑块0-100转成0-10的增量系数）
let animationId; // 动画帧ID，用于控制动画启停

// 旋转更新函数
function updateRotation() {
  // 根据当前速度计算本次帧的旋转增量
  currentRotation += speed;
  // 把旋转角度应用到方块上
  box.style.transform = `rotate(${currentRotation}deg)`;
  // 持续调用下一帧
  animationId = requestAnimationFrame(updateRotation);
}

// 监听滑块变化，实时更新速度
speedControl.addEventListener('input', () => {
  speed = parseFloat(speedControl.value) / 10;
});

// 启动动画
updateRotation();

3. 为什么这个方案能解决问题？

• 完全脱离CSS动画的自动播放机制，每一步的旋转状态都是我们自己维护的，调整速度只是改变了每次帧更新的角度增量，不会重置当前旋转进度。
• 滑块拖动时速度实时生效，整个过程完全平滑，没有任何突兀的跳转。
• 不需要依赖任何第三方库，原生JS实现，兼容性覆盖所有现代浏览器。

进阶优化（可选） #

如果想要更丝滑的速度过渡体验，可以给速度变化加个缓动效果，让速度不是瞬间跳到目标值，而是逐步趋近：

// 新增目标速度变量
let targetSpeed = speed;

speedControl.addEventListener('input', () => {
  // 滑块拖动时只更新目标速度
  targetSpeed = parseFloat(speedControl.value) / 10;
});

function updateRotation() {
  // 缓动逻辑：每次向目标速度靠近10%
  speed += (targetSpeed - speed) * 0.1;
  currentRotation += speed;
  box.style.transform = `rotate(${currentRotation}deg)`;
  animationId = requestAnimationFrame(updateRotation);
}

这样拖动滑块时，速度会平滑过渡，不会有突然的加速/减速，体验更自然。

补充：如果一定要用CSS动画怎么办？ #

如果坚持想用CSS动画，也有个小技巧，但不如手动控制稳定：

• 不要直接修改animation-duration，而是先暂停动画（animation-play-state: paused），计算当前已播放的进度时间，然后重新设置动画的animation-delay为负的已播放时间，同时修改duration。但这个方法需要精确计算动画进度，不同浏览器的动画状态读取可能有差异，容易出现误差，不如手动控制靠谱。

内容的提问来源于stack exchange，提问作者Maria Piaredryj