animation-play-state是唯一能动态暂停CSS动画而不重置帧的属性，取值为running或paused，需配合已声明的animation使用，支持:hover和JS控制，但不支持transition且移动端需用touch事件适配。
直接用 animation-play-state: paused 就能暂停，但“优雅终止”关键不在暂停，而在动画结束后是否保留最终状态、是否可逆、是否影响后续交互。
animation-play-state 是最轻量的暂停方式
它不重置计时器、不丢帧、恢复时从当前进度继续，适合 hover 暂停、点击切换等场景。
- 纯 CSS 控制：比如
.box:hover { animation-play-state: paused; }，移开鼠标自动恢复 - JS 动态设置：
elem.style.animationPlayState = 'paused'或'running'，注意属性名是驼峰式animationPlayState - 多个动画共存时，
animation-play-state会同时作用于所有animation值，无法单独控制某一个 - 暂停后元素仍参与渲染流程，不会释放动画资源；若需彻底“卸载”，得清空
animation属性（如设为none）
animation-fill-mode: forwards 才决定“停在哪”
很多人以为暂停就等于停在最后一帧，其实不是。animation-play-state 只管“动不动”，而“停在哪”由 animation-fill-mode 决定。
- 默认值是
none：动画一结束，样式立刻回退到动画前状态（哪怕你设了forwards，暂停也不会触发它） - 必须显式写
animation-fill-mode: forwards，且配合animation-iteration-count: 1，才能让单次动画自然结束时“卡住”在 100% 关键帧 -
forwards对infinite动画无效——无限循环没有“结束”，也就没有“最后状态”可保留 - 如果既要循环、又想中途“定格”，只能靠 JS 暂停 + 手动应用最终帧样式（例如读取
getComputedStyle并 settransform）
jQuery 的 .stop() 不适用于 CSS animation
.stop() 是 jQuery 为 .animate() 等 JS 驱动动画设计的，对原生 @keyframes 动画完全无效——它既不改变 animation-play-state，也不清除动画层。
立即学习“前端免费学习笔记（深入）”；
- 调用
$('div').stop()后，CSS 动画照常运行，视觉上毫无变化 - 误以为它有效，往往是因为同时触发了其他逻辑（比如 class 切换、内联样式覆盖），而非
.stop()本身起效 - 真要 JS 控制 CSS 动画，只认
element.style.animationPlayState或element.classList.toggle()切换预设 class
真正容易被忽略的是：动画“终止”从来不是单一动作。它可能是暂停、跳转到终态、清空动画、重置 transform、甚至手动补一帧。选哪种，取决于你到底想“停”还是“撤”——前者保留上下文，后者回归干净起点。
