在前端页面开发中，CSS动画是实现动态交互效果的重要手段，很多时候我们需要根据用户的操作动态控制动画的播放状态，比如暂停正在运行的动画，之后再让动画从暂停的位置继续播放，这时候就需要用到CSS的animation-play-state属性。
animation-play-state属性基础说明
animation-play-state是CSS动画模块中用于控制动画播放状态的属性，它只有两个常用取值：
- running：默认值，表示动画正在播放
- paused：表示动画处于暂停状态
当我们将元素的animation-play-state设置为paused时，当前正在运行的动画会立刻暂停，所有动画相关的计算都会停止，元素的样式会停留在暂停那一刻的状态。当把属性改回running时，动画会从暂停的位置继续播放，而不是从头开始。
实现动画暂停后继续播放的步骤
1. 定义基础CSS动画
首先我们需要先定义一个普通的CSS动画，这里以一个简单的方块水平移动动画为例：
/* 定义动画关键帧 */
@keyframes moveAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
/* 动画元素基础样式 */
.animation-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
/* 应用动画，默认播放状态为running */
animation: moveAnimation 3s linear infinite;
animation-play-state: running;
}
2. 通过JS修改animation-play-state属性
我们可以通过JavaScript动态修改元素的animation-play-state属性，来实现暂停和继续播放的切换，完整的交互代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画暂停继续示例</title>
<style>
@keyframes moveAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
.animation-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
animation: moveAnimation 3s linear infinite;
animation-play-state: running;
margin-bottom: 20px;
}
.control-btn {
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="animation-box" id="box"></div>
<button class="control-btn" id="toggleBtn">暂停动画</button>
<script>
const box = document.getElementById('box');
const toggleBtn = document.getElementById('toggleBtn');
let isPaused = false;
toggleBtn.addEventListener('click', function() {
if (!isPaused) {
// 暂停动画
box.style.animationPlayState = 'paused';
toggleBtn.textContent = '继续播放';
} else {
// 继续播放动画
box.style.animationPlayState = 'running';
toggleBtn.textContent = '暂停动画';
}
isPaused = !isPaused;
});
</script>
</body>
</html>
注意事项
在使用animation-play-state控制动画时，有几个需要注意的点：
- 如果动画本身设置了
animation-fill-mode: forwards，暂停后元素会停留在最后一帧，继续播放时会从最后一帧开始往后执行 - 当元素被隐藏（比如设置
display: none）再显示时，动画会重置，即使之前设置了paused状态也会从头开始播放 - 如果要兼容旧版本浏览器，需要添加对应的前缀，比如
-webkit-animation-play-state
需要注意的是，animation-play-state只能控制动画的暂停和继续，无法控制动画跳转到指定时间点，如果需要更复杂的动画控制，可以结合animation-delay或者改用Web Animations API实现。
总结
通过修改CSS的animation-play-state属性，我们可以很方便地实现CSS动画的暂停和继续播放功能，核心就是切换该属性的值为paused和running。这种方式不需要重新定义动画，也不会丢失动画当前的进度，是控制CSS动画播放状态的首选方案。在实际开发中，结合JavaScript动态修改该属性，就能满足大部分动画交互的控制需求。
CSS动画animation-play-state动画暂停动画继续前端动画修改时间：2026-07-09 03:03:24