この記事の要点

animation-play-state は CSS アニメーションを再生中 / 一時停止のどちらかに切り替えるプロパティ 値は running（既定 / 再生中）と paused（停止）の 2 つだけ hover で停止、クリックで再開といったJS なしの制御に使える 一時停止しても位置はその場で保持される（巻き戻らない） animation 短縮記法の最後の値として書ける

animation-play-state とは

animation-play-state は CSS の animation を、再生中（running）と一時停止（paused）のあいだで切り替えるプロパティです。一時停止するとその瞬間の状態がそのまま保たれ、再開すれば続きから動き出します。マウスホバーで停止させる演出や、ユーザー操作で再生制御する場合に使います。

取れる値

値	意味
running	再生中（既定値）
paused	一時停止（その時点の状態のまま静止）

基本の書き方

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.icon {
  animation: spin 2s linear infinite;
  animation-play-state: running;   /* 既定 */
}

.icon.is-paused {
  animation-play-state: paused;    /* 止める */
}

hover で停止する例

マーキーやスクロール装飾など、ホバー中だけ止めたい用途で便利です。

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee {
  animation: scroll 15s linear infinite;
}

/* ホバー中は止める */
.marquee:hover {
  animation-play-state: paused;
}

animation 短縮記法に含める

animation 短縮記法の最後の値として書けます（順序は: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state）。

/* 最初から停止状態で配置 */
.box {
  animation: spin 2s linear infinite normal none paused;
}

/* クラス付与で再生開始 */
.box.is-playing {
  animation-play-state: running;
}

JS から制御する

const el = document.querySelector('.icon');

// 一時停止
el.style.animationPlayState = 'paused';

// 再開
el.style.animationPlayState = 'running';

// トグル
el.style.animationPlayState =
  (el.style.animationPlayState === 'paused') ? 'running' : 'paused';

複数アニメーションの個別制御

animation はカンマ区切りで複数のアニメを同時にかけられます。animation-play-state もカンマ区切りで個別に指定できます。

.box {
  animation:
    spin   2s linear infinite,
    pulse  1s ease   infinite;
  /* 1 つ目は再生、2 つ目は停止 */
  animation-play-state: running, paused;
}

類似プロパティとの違い

プロパティ	違い
animation-play-state: paused	その時点の状態をそのまま保持して止める
animation-name: none	アニメ自体を消す。要素は元の見た目に戻る
animation-iteration-count: 0	そもそも再生されない
animation: none	すべて初期化 & 停止

よくある落とし穴

• animation-play-state は再生位置を保持する。再生位置を 0 に戻すには animation-name を一度外して付け直す（リフロー）
• 子要素の animation は親の play-state を継承しない。子側にも書く必要がある
• transition には効かない — これは animation 専用
• アクセシビリティ — prefers-reduced-motion のユーザー設定がある場合、初期から paused にする配慮を

関連

• アニメーション — 親カテゴリ
• animationプロパティ
• animation-nameプロパティ
• animation-duration プロパティ
• animation-timing-functionプロパティ
• animation-iteration-countプロパティ
• animation-directionプロパティ
• animation-fill-modeプロパティ