animation-play-state属性可控制CSS动画的暂停与恢复，其值为running或paused。通过:hover等伪类或JavaScript操作，能实现鼠标悬停暂停、点击切换等交互效果；支持多动画独立控制，需注意属性值顺序与动画定义一致。
CSS动画的暂停与恢复可以通过animation-play-state属性轻松实现，无需JavaScript干预。这个属性允许你在动画运行过程中控制其播放或暂停状态，非常适合用于交互场景，比如鼠标悬停时暂停动画。
animation-play-state 属性简介
animation-play-state 是 CSS 动画中的一个控制属性，用于定义动画是否正在运行或已暂停。它有两个常用值：
- running：动画正常播放（默认值）
- paused：动画暂停，当前帧保持显示
当设置为 paused 时，动画会停留在当前时间点，不会重置或跳转。
基本使用方法
假设你有一个无限循环旋转的元素：
立即学习“前端免费学习笔记（深入）”；
.box {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
你可以通过添加 animation-play-state 来控制它的播放状态：
.box:hover {
animation-play-state: paused;
}
这样，当用户将鼠标悬停在元素上时，动画就会暂停；移开后自动继续播放。
结合 JavaScript 动态控制
除了用伪类，也可以通过 JavaScript 切换类名来实现更复杂的控制逻辑：
// 暂停动画
document.querySelector('.box').style.animationPlayState = 'paused';
// 恢复动画
document.querySelector('.box').style.animationPlayState = 'running';
这在按钮点击触发暂停/播放功能时非常实用。
多动画的独立控制
如果一个元素应用了多个动画，animation-play-state 可以分别控制每一个：
.box {
animation:
move 3s infinite,
blink 1s infinite;
}
.box:hover {
animation-play-state: paused, running; / 第一个动画暂停，第二个继续 /
}
注意值的顺序要与 animation 中定义的动画顺序一致。
基本上就这些。合理使用 animation-play-state 能让动画更具交互性，同时保持代码简洁。关键是理解它只是“暂停”而非“停止”，恢复后会从断点继续。
