animation-play-state用于控制CSS动画的暂停与播放，其值为running或paused，默认为running；通过:hover或JavaScript可实现悬停暂停、点击切换等交互效果；作用于多动画时统一控制，保持当前帧状态，适用于轮播图等场景，提升用户体验。
在CSS中，animation-play-state 属性用于控制动画的运行与暂停。通过设置不同的值，可以动态地暂停或恢复元素的动画效果，适用于交互场景如悬停、点击等。
animation-play-state 支持两个主要值：
默认值为 running。即使动画处于循环状态，paused 也会让其停止在当前帧。
最常见的方式是结合:hover 或 JavaScript 来切换状态。
立即学习“前端免费学习笔记（深入）”；
例如，使用鼠标悬停暂停动画：
.animated-element {
animation: slide 3s infinite alternate;
}
<p>.animated-element:hover {
animation-play-state: paused;
}</p>当用户将鼠标移入元素时，动画暂停；移出后自动恢复播放。
通过JavaScript控制更灵活：
const element = document.querySelector('.animated-element');
<p>// 暂停动画
element.style.animationPlayState = 'paused';</p><p>// 恢复动画
element.style.animationPlayState = 'running';</p>可用于按钮点击触发暂停/播放功能，适合轮播图或提示动画的控制。
如果元素有多个动画，animation-play-state 会同时作用于所有动画：
.multi-animation {
animation: fade 2s infinite, move 4s infinite linear;
animation-play-state: paused; /* 两个动画都会暂停 */
}
不需要单独控制每个动画的播放状态，统一管理更方便。
基本上就这些。使用 animation-play-state 能轻松实现动画的暂停与恢复，无需重置或重新启动动画，保留当前视觉状态，适合提升用户体验。
以上就是在css中animation-play-state暂停与恢复的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
832
收藏
