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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-30

浏览次数：次

返回列表

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

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

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

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;
}

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

ChatCut

AI视频剪辑工具

1086 查看详情 ChatCut

结合 J*aScript 动态控制

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

// 暂停动画
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属性使用的详细内容，更多请关注其它相关文章！

# 你在 # 网站建设图片背景素材 # 肥乡区推广营销中心 # 咸阳如何网站优化 # 许昌seo开发代理 # 百度网站优化设计软件 # 手机网站开发优化设计 # 江门seo页面优化 # seo如何创建 # 佛山新网站建设选择 # 广州培训通网站建设 # 你有 # css # 多个 # 第一个 # 你可以 # 就会 # 多动 # 中不 # 可以通过 # 鼠标 # css动画 # java # javascript