CSS动画如何暂停与恢复_animation-play-state属性使用-css教程-PHP中文网

CSS动画如何暂停与恢复_animation-play-state属性使用

P粉602998670

发布： 2025-10-30 23:24:01

原创

117人浏览过

animation-play-state属性可控制CSS动画的暂停与恢复，其值为running或paused。通过:hover等伪类或JavaScript操作，能实现鼠标悬停暂停、点击切换等交互效果；支持多动画独立控制，需注意属性值顺序与动画定义一致。

css动画如何暂停与恢复_animation-play-state属性使用

CSS动画的暂停与恢复可以通过animation-play-state属性轻松实现，无需JavaScript干预。这个属性允许你在动画运行过程中控制其播放或暂停状态，非常适合用于交互场景，比如鼠标悬停时暂停动画。

animation-play-state 属性简介

animation-play-state 是 CSS 动画中的一个控制属性，用于定义动画是否正在运行或已暂停。它有两个常用值：

running：动画正常播放（默认值）
paused：动画暂停，当前帧保持显示

当设置为 paused 时，动画会停留在当前时间点，不会重置或跳转。

基本使用方法

假设你有一个无限循环旋转的元素：

立即学习“前端免费学习笔记（深入）”；

.box {
  animation: rotate 2s linear infinite;
}
<p>@keyframes rotate {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}</p>

登录后复制

你可以通过添加 animation-play-state 来控制它的播放状态：

.box:hover {
  animation-play-state: paused;
}

登录后复制

这样，当用户将鼠标悬停在元素上时，动画就会暂停；移开后自动继续播放。

万兴爱画

万兴爱画AI绘画生成工具

查看详情

结合 JavaScript 动态控制

除了用伪类，也可以通过 JavaScript 切换类名来实现更复杂的控制逻辑：

// 暂停动画
document.querySelector('.box').style.animationPlayState = 'paused';
<p>// 恢复动画
document.querySelector('.box').style.animationPlayState = 'running';</p>

登录后复制

这在按钮点击触发暂停/播放功能时非常实用。

多动画的独立控制

如果一个元素应用了多个动画，animation-play-state 可以分别控制每一个：

.box {
  animation: 
    move 3s infinite,
    blink 1s infinite;
}
<p>.box:hover {
animation-play-state: paused, running; /<em> 第一个动画暂停，第二个继续 </em>/
}</p>

登录后复制

注意值的顺序要与 animation 中定义的动画顺序一致。

基本上就这些。合理使用 animation-play-state 能让动画更具交互性，同时保持代码简洁。关键是理解它只是“暂停”而非“停止”，恢复后会从断点继续。

以上就是CSS动画如何暂停与恢复_animation-play-state属性使用的详细内容，更多请关注php中文网其它相关文章！