新增！我的 44 页电子书“CSS 44 分钟掌握”已发布！ 😃

立即获取 →

#animation-play-state

定义动画是否正在播放。

默认 animation-play-state: running;

如果定义了 animation-duration 和 animation-name，动画将自动开始播放。

animation-play-state: paused;

动画在第一个关键帧处暂停。

这与根本没有 animation-duration 或 animation-name 不同。如果动画暂停，则应用的样式是第一个关键帧的样式，而不是默认样式。

在此示例中，正方形默认可见，但在 fadeAndMove 的第一个关键帧中，opacity 设置为 0。暂停时，动画将“卡住”在第一个关键帧上，因此将不可见。

@keyframes fadeAndMove {
  from {
    opacity: 0;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}