在网页开发中，我们经常用animation属性配合infinite让元素做无限循环动画，比如旋转的加载图标、来回移动的轮播背景等。但有时会遇到这样的需求：动画循环到某一刻时需要临时停下来，比如鼠标移上去时暂停，鼠标移开后再从暂停的位置继续播放。如果直接去掉动画再重新加上，动画会从头开始，破坏了连贯性。这时候就需要用到animation-play-state这个专门控制动画播放状态的属性。
animation-play-state的基本语法与取值
animation-play-state的定义非常简单，它只接受两个值：running表示动画正常运行，paused表示动画暂停。它的语法形式如下：
.box {
animation: rotate 4s linear infinite;
animation-play-state: running; /* 默认值，动画正常播放 */
}
/* 暂停动画 */
.box.paused {
animation-play-state: paused;
}这个属性最关键的特点是：当动画处于paused状态时，元素会冻结在当前帧，而不是回到初始状态。等到属性值重新变回running，动画会从冻结的那一帧继续往下播放，整个时间轴没有被打断。这一点是它区别于取消动画（比如把animation设为none）的核心价值。
需要注意的一点是，animation-play-state可以作为animation简写属性的一部分，但实际开发中更推荐单独书写，避免与其他动画参数混在一起难以维护。简写形式中它的位置是最后一个值，例如animation: rotate 4s linear infinite paused;，但为了代码可读性，建议分开写。
用hover伪类实现鼠标交互暂停
最常见的应用场景就是轮播图或滚动公告：默认状态下持续滚动，鼠标悬停时暂停，方便用户看清内容。实现方式非常简单，只需要一条CSS规则：
.scroll-content {
animation: moveLeft 10s linear infinite;
}
/* 鼠标悬停时暂停动画 */
.scroll-content:hover {
animation-play-state: paused;
}
@keyframes moveLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}除了:hover，还可以配合:checked、:focus等伪类来实现更复杂的纯CSS交互。比如用一个隐藏的复选框控制动画的暂停与恢复：
<input type="checkbox" id="toggle" class="hidden-input">
<label for="toggle">暂停/播放</label>
<div class="spinner"></div>
.hidden-input { display: none; }
.spinner {
animation: spin 2s linear infinite;
}
.hidden-input:checked ~ .spinner {
animation-play-state: paused;
}
@keyframes spin {
to { transform: rotate(360deg); }
}这种写法完全不需要JavaScript，利用兄弟选择器~就能实现点击切换动画状态。不过要注意，HTML源码中的标签名在书写时需要正确转义显示，比如上面代码块中展示的<input>元素。
通过JavaScript动态控制暂停与恢复
当交互逻辑更复杂时，就需要借助JavaScript来动态修改animation-play-state。最直接的方式是通过style属性修改：
const box = document.querySelector('.box');
// 暂停动画
function pauseAnimation() {
box.style.animationPlayState = 'paused';
}
// 恢复播放
function resumeAnimation() {
box.style.animationPlayState = 'running';
}这种方式适合需要在任意时刻暂停的场景，比如用户切换浏览器标签页时暂停动画以节省性能，回到页面时再恢复。还可以结合visibilitychange事件使用：
document.addEventListener('visibilitychange', () => {
const boxes = document.querySelectorAll('.animated');
boxes.forEach(el => {
el.style.animationPlayState = document.hidden ? 'paused' : 'running';
});
});如果需要在特定帧精确暂停，比如让动画播放到50%时自动停住，可以借助animationiteration或setTimeout计算时间点。假设动画一个周期是4秒，要在第2秒（50%进度）暂停，可以这样写：
const box = document.querySelector('.box');
const halfCycle = 2000; // 半个周期：2000毫秒
box.style.animationPlayState = 'running';
setTimeout(() => {
box.style.animationPlayState = 'paused';
}, halfCycle);不过要注意，这种方式依赖时间计算，如果动画有animation-delay，需要把延迟时间也算进去，否则暂停的位置会偏离预期。
常见误区与注意事项
第一个常见误区是以为暂停会导致动画重播。实际上paused只是冻结时间轴，元素样式停留在当前帧，恢复时继续播放。真正会导致重播的是重新设置animation属性或者移除再添加动画类名，这一点在做状态切换时要格外小心。
第二个误区是和transition混淆。transition是过渡效果，只有两帧状态，没有循环概念，也没有play-state属性可用。如果你需要暂停的能力，必须使用animation配合关键帧。
第三个需要注意的点是性能。虽然animation-play-state: paused会让动画停止渲染，但动画任务本身还挂在元素上。如果页面上有大量暂停的动画元素，建议在长期不需要时彻底移除动画，而不是一直保持paused状态。另外，尽量让关键帧只驱动transform和opacity这类合成层属性，避免暂停恢复时出现掉帧。
最后，animation-play-state的兼容性非常好，主流浏览器包括IE10都支持，可以放心在生产环境中使用。掌握这个小属性后，无限循环动画的暂停需求就能用最少的代码优雅解决。
animation-play-stateCSS动画暂停animation属性修改时间：2026-09-02 20:20:55