HTML怎么做暂停恢复动画_HTML CSS动画暂停恢复控制(推荐)

animation-play-state 是唯一能真正暂停并从断点继续的原生方案，仅适用于纯 CSS @keyframes 动画；Canvas、Three.js 和 requestAnimationFrame 动画需手动管理时间戳与状态，否则暂停后会重头开始或跳变。

animation-play-state 是唯一能真正“暂停并从断点继续”的原生方案，但仅对纯 CSS @keyframes 动画有效。其他所有动画（Canvas、Three.js、requestAnimationFrame 手写循环）都必须自己管时间戳和状态，否则一暂停就重头开始或瞬间跳变。

用 animation-play-state 暂停 CSS 动画最简实践

它不改变当前帧样式，恢复后从暂停那一刻无缝续播，无需额外计算。关键就两行 JS：

• element.style.animationPlayState = 'paused' —— 暂停
• element.style.animationPlayState = 'running' —— 恢复
• 支持直接写在 class 里：.paused { animation-play-state: paused; }，用 classList.toggle('paused') 切换也行
• 注意：必须确保元素已应用了 animation（哪怕只是 animation: none），否则 animationPlayState 不生效

为什么 requestAnimationFrame 不能直接暂停

浏览器没有提供 pauseAnimationFrame 这种 API。cancelAnimationFrame 只能终止，再调 requestAnimationFrame 就是新循环，performance.now() 或 Date.now() 时间戳会重置，导致 delta 计算错误。

• 正确做法是：暂停时记下当前 lastTime 和已耗时 elapsed；恢复时用新帧时间减去暂停起始时间，补上“被跳过的时长”
• 常见错误：只停掉 requestAnimationFrame 调用，但没冻结 velocity、position 等状态变量 → 恢复瞬间因累积大 delta 导致瞬移或穿模
• Canvas/WebGL/Three.js 的动画都不吃 animation-play-state，别试

Three.js 暂停要双控：clock + renderer

只调 clock.stop() 不够，渲染循环还在跑，CPU 白烧、电池白掉。

立即学习“前端免费学习笔记（深入）”；

• 暂停必须同步做两件事：clock.stop() + renderer.setAnimationLoop(null)
• 恢复时顺序不能反：先 clock.start()，再 renderer.setAnimationLoop(animate)
• clock.elapsedTime 在 stop() 后值保留，可直接用于插值，这点很关键
• 别依赖 clock.getDelta() 自动累加——它在 stop() 后返回 0，但你可能需要“暂停期间的虚拟流逝时间”

真正难的不是暂停动作本身，而是判断「该不该暂停」和「暂停时哪些状态必须冻结」。比如一个带物理弹跳的 Canvas 小球，暂停时不仅要停帧循环，还得把 velocity、acceleration、lastTime 全部存下来；而 CSS 动画连这些概念都没有，所以才简单。选错方案，后面全是补丁。