animation-play-state 是 css 中唯一能动态暂停/恢复动画而不重置时间轴的属性，它冻结动画引擎，使 hover 时停在当前帧并自然续播；需显式声明初始状态、确保 animation-name 有效，且移动端须用 js 替代 :hover。
animation-play-state 为什么能暂停动画
animation-play-state 是 CSS 中唯一能动态控制动画运行/暂停状态的属性，它不重置动画、不改变时间轴，只是让当前帧“定住”。和 animation-fill-mode 或 visibility: hidden 不同，它真正冻结了动画引擎的 ticking —— 这意味着：鼠标移入时动画停在当前帧，移出后从同一帧继续播放，过渡自然。
:hover 触发暂停的写法和常见错误
最直接的方式是给元素默认设 animation-play-state: running，再用 :hover 切换为 paused。但容易踩的坑有三个：
- 没显式声明初始状态：如果只在
:hover里写animation-play-state: paused，而元素本身没定义animation-play-state，则 hover 时可能无效果（浏览器按初始值running处理，切换无效） - 动画名拼错或漏写
animation-name：animation-play-state只作用于已启用的动画，若animation-name为空或语法错误，暂停完全不生效 - 用
display: none或opacity: 0干预：这会中断渲染流程，导致animation-play-state失效或恢复异常
正确写法示例：
.pulse {
animation: pulse 2s infinite;
animation-play-state: running; /* 必须显式声明 */
}
.pulse:hover {
animation-play-state: paused;
}
@keyframes pulse {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
多个动画同时控制要注意什么
当一个元素有多个 animation（比如 animation: slide 3s, rotate 1.5s），animation-play-state 默认对全部生效。但如果只想暂停其中某一个，CSS 不支持按名称单独控制 —— 此时必须拆成独立类，用 JS 配合 getComputedStyle + style.animationPlayState 手动干预，或者改用 @property + transition 模拟动画行为。
更现实的取舍是：把需要独立控制的动画分离到子元素中，各自绑定 :hover，避免耦合。
移动端兼容性和交互陷阱
移动端没有稳定的 :hover，iOS Safari 和 Android Chrome 在 touch 设备上对 :hover 的触发逻辑不一致（有的只在点击后临时生效，有的完全忽略）。所以纯 CSS 的 hover 暂停在手机端基本不可靠。
如果必须支持触控设备，得用 JS 监听 touchstart / click，然后切换一个 class 来控制 animation-play-state：
el.addEventListener('touchstart', () => {
el.classList.toggle('paused');
});
/* 对应 CSS */
.paused { animation-play-state: paused !important; }
注意：不要依赖 pointer-events: none 来“禁用”动画，它不影响动画执行，只影响事件捕获。
真正难处理的是动画正在播放时用户快速悬停又移出 —— 浏览器不会丢弃中间帧，但短时间内反复切换 running/paused 可能造成视觉卡顿。稳妥做法是加个防抖 class 切换，或改用 requestAnimationFrame 控制节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
