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 计算错误。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 正确做法是：暂停时记下当前
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 动画连这些概念都没有，所以才简单。选错方案，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
