新！我的 44 頁電子書「44 分鐘學會 CSS」出爐囉！😃

立即取得 →

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