animation-play-state 只能暂停动画而无法真正停止，移出后动画会继续播放；彻底终止需用移除class、设置style.animation='none'或web animations api的cancel()。
animation-play-state 不能让动画“立即停止”，它只能暂停——动画会卡在当前帧，不会重置、也不会跳到结束态。如果你想要鼠标移出时「彻底终止」动画（比如清空状态、回到初始样式），animation-play-state: paused 不是正确解法。
为什么:hover + animation-play-state无法实现“移出即停止”
标准写法 .el:hover { animation-play-state: paused; } 只在悬停时暂停；移出后，只要原始 CSS 中声明了 animation: xxx 且没被覆盖，浏览器就会自动恢复 running，动画继续播——这不是“停止”，是“暂停后继续”。更关键的是：即使你手动加 animation-play-state: paused 到移出后的状态，只要动画本身没结束，它依然处于活跃状态（getComputedStyle(el).animationPlayState 返回 "paused"），只是不渲染变化而已。
- 动画未结束时，
animation-fill-mode不生效，所以移出后恢复播放，不会强制回到from或to - 没有 API 能“取消”一个已启动的 CSS 动画，
animation-play-state没有stopped或canceled值 - 试图用
animation: none覆盖来“清空”动画，会导致元素瞬间跳回初始样式，但可能触发重排，且无法再用同一 class 恢复原动画（名称/时长等需完全匹配）
真正“停止”的替代方案：重置 animation 并清空状态
若目标是移出后动画归零、样式回退、不再运行，得绕过 animation-play-state，改用以下任一方式：
- 移出时移除动画 class：
el.classList.remove('animated')，前提是动画靠 class 触发（如.animated { animation: fade 1s; }） - 移出时设
el.style.animation = 'none'，注意这会清除所有动画声明，包括animation-name、duration等，后续若要重启，必须完整重设style.animation - 用
el.getAnimations().forEach(anim => anim.cancel())（Web Animations API），但兼容性有限（Chrome 84+/Firefox 75+），且仅对 JS 启动的动画或通过element.animate()创建的才有效；纯 CSS@keyframes动画调用cancel()无效
animation-play-state 的真实适用边界
它只适合需要“暂停-恢复连续性”的场景，比如轮播图悬停暂停、加载动画点击暂停、多步骤交互动画中间暂存。一旦你期望“移出即终结”，就说明设计意图已超出该属性能力范围——这时候应该检查动画是否真有必要用 CSS 实现，或改用 JS 控制生命周期（例如用 requestAnimationFrame + 状态标记模拟，可随时 cancel）。
最容易被忽略的一点：很多开发者以为给元素加了 animation-play-state: paused 就等于“关掉了动画”，其实 DOM 上的 animation 依然存在，getAnimations() 仍能查到它，内存和计时器也未释放。真要省资源，得主动 cancel() 或卸载 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
