编辑“︁CSS动画播放状态”︁（章节）

= CSS动画播放状态 =

CSS动画播放状态（'''animation-play-state'''）是CSS动画模块中的一个属性，用于控制动画的播放或暂停状态。它允许开发者通过JavaScript动态控制动画的运行状态，从而提供更灵活的交互体验。

== 介绍 ==

'''animation-play-state'''属性决定CSS动画是正在运行（'''running'''）还是暂停（'''paused'''）。默认情况下，动画一旦应用就会自动播放（'''running'''）。通过将此属性设置为'''paused'''，可以暂停动画，而不会重置动画的进度。这对于游戏、交互式UI或需要用户触发的动画非常有用。

语法如下：
<syntaxhighlight lang="css">
animation-play-state: running | paused;
</syntaxhighlight>

* '''running'''（默认值）：动画正常播放。
* '''paused'''：动画暂停在当前帧，恢复后会从暂停的位置继续播放。

== 基本用法 ==

以下示例展示如何通过CSS和JavaScript控制动画的播放状态：

=== CSS定义动画 ===
<syntaxhighlight lang="css">
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    animation: slide 2s infinite alternate;
    animation-play-state: running; /* 默认运行 */
}
</syntaxhighlight>

=== 通过JavaScript切换状态 ===
<syntaxhighlight lang="javascript">
const box = document.querySelector('.box');
box.addEventListener('click', () => {
    const currentState = getComputedStyle(box).animationPlayState;
    box.style.animationPlayState = currentState === 'running' ? 'paused' : 'running';
});
</syntaxhighlight>

'''输出效果'''：点击蓝色方块会切换动画的播放和暂停状态。

== 实际应用场景 ==

=== 1. 游戏控制 ===
在游戏中，角色的移动动画可以通过'''animation-play-state'''暂停，比如当游戏进入暂停菜单时：
<syntaxhighlight lang="css">
.character {
    animation: walk 1s steps(4) infinite;
}

.game-paused .character {
    animation-play-state: paused;
}
</syntaxhighlight>

=== 2. 用户交互反馈 ===
在按钮悬停时播放动画，离开时暂停：
<syntaxhighlight lang="css">
.button {
    animation: pulse 1.5s infinite;
    animation-play-state: paused;
}

.button:hover {
    animation-play-state: running;
}
</syntaxhighlight>

== 高级技巧 ==

=== 与JavaScript协同 ===
结合'''requestAnimationFrame'''，可以实现更精细的动画控制：
<syntaxhighlight lang="javascript">
let isPaused = false;
function toggleAnimation() {
    isPaused = !isPaused;
    document.querySelector('.animated-element').style.animationPlayState = 
        isPaused ? 'paused' : 'running';
}
</syntaxhighlight>

=== 性能注意事项 ===
* 暂停动画不会减少浏览器渲染负载，因为动画样式仍被应用。
* 大量使用'''paused'''状态可能导致内存占用增加。

== 兼容性 ==

'''animation-play-state'''在现代浏览器中支持良好：
* Chrome 43+
* Firefox 16+
* Safari 9+
* Edge 12+

== 总结 ==

{| class="wikitable"
|+ 属性总结
! 值 !! 描述
|-
| '''running''' || 动画正常播放
|-
| '''paused''' || 动画暂停在当前帧
|}

通过掌握'''animation-play-state'''，开发者可以更灵活地控制动画行为，增强用户体验。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]