动画暂停与恢复：用 animation-play-state 给页面节奏加分

在网页上，动画不是非开即关的“二选一”。很多时候，我们希望它像生活里的一杯咖啡，冷时暂停、热时播放，按场景切换状态。HTML 与 CSS 的 animation-play-state 就是为这种动态节奏而生的。

为什么需要它

想象你在做一个在线阅读应用：用户快速切换文章时，页脚的淡入淡出动画不该在每个页面切换都满播放，否则会像“赶时间的地铁里被连续报站”一样被打断。通过控制动画的播放状态，我们可以在关键时机暂停，无需清空或重置动画，提升性能并优化体验。

基本用法与核心概念

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-element {
  animation: fadeIn 1s ease-in;
  /* 通过属性控制播放状态 */
  animation-play-state: paused; /* 默认暂停，按需恢复 */
}

• 默认行为：元素创建时，动画会按设定的 animation 属性开始播放。
• 播放/暂停：animation-play-state 接收 running 与 paused 两个值，直接切换状态，无需重置动画参数或重新计算。

场景一：按用户交互切换

比如在表单提交成功后，你希望立即展示成功提示的动效，而在用户离开页面前又将其暂停，避免干扰。

@keyframes successToast {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.toast {
  animation: successToast 0.3s ease-out;
  animation-play-state: paused;
}

.submit-success {
  /* 触发时恢复动画，无需重复定义 */
  animation-play-state: running;
}

• 在交互触发时，将状态改为 running，动效立刻开始，无需重新创建动画实例。

场景二：响应式与性能优化

在移动端，当设备进入省电或页面暂停时，降低动画开销是明智的选择。通过条件切换播放状态，可避免在非活跃窗口反复渲染。

@media (pointer: fine) and (hover: yes) {
  .nav-item:hover {
    animation-play-state: running;
  }
}

/* 页面失去焦点或进入后台时暂停动画 */
:target[id="page-pause"] ~ .nav-item {
  animation-play-state: paused;
}

• 在合适的时机切换状态，可降低渲染压力，提升页面在低功耗状态下的流畅度。

进阶技巧：动画状态机

结合 :target, :focus, :active 或 JavaScript，你可以构建更复杂的动画状态机，例如在表单校验通过后播放“成功”动画，或在按钮被点击时播放“反馈”动画。

document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector('.feedback').style.animationPlayState = 'running';
  });
});

结语

用好 animation-play-state，能让你的页面动画更“懂”用户场景，更轻量、更友好。在关键节点选择暂停或恢复，既不会破坏体验，也能有效管理性能。把它当作页面节奏的指挥棒，用更少的代码做更聪明的动画切换。