SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのanimation-play-stateの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 6:42動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、アニメーション・プレイ・ステートです。
  4. 0:06このプロパティは、再生中のアニメーションを、そのまま動かし続けるか、その場で一時停止するかを決めます。
  5. 0:13値は、再生を表すランニングと、停止を表すポーズドの二つだけ、というシンプルなプロパティです。
  6. 0:20ポイントは、ポーズドが「最初に戻る」のではなく、「その瞬間の姿で止まる」という点です。
  7. 0:25止め方と再開のしかたから、効かないときの確認まで、順番に見ていきましょう。
  8. 0:30たとえば、自動で動き続けるバナーや、読み込み中を示す印など、動きを一時的に止めたい場面で使います。
  9. 0:37まず、二つの値の違いを確認します。
  10. 0:39ランニングは、通常どおりアニメーションを再生する指定で、これが初期値でもあります。
  11. 0:44ポーズドは、アニメーションの時計を止める指定です。
  12. 0:48再生の途中でポーズドに変わると、要素はその瞬間の位置や透明度のまま静止し、
  13. 0:52ランニングに戻すと、止まっていたところの続きから再び動き始めます。
  14. 0:57一方、最初からポーズドを指定しておくと、アニメーションは開始直後の姿、つまりキーフレームのフロムの状態で止まったままになり、
  15. 1:01まったく動きません。
  16. 1:06この違いが、後で出てくる「効かない」と感じる原因にもなります。
  17. 1:10なお、ポーズドで止めてもアニメーションが取り消されるわけではありません。
  18. 1:14指定が残っている限り、再開すれば続きから再生されます。
  19. 1:18書き方を見てみましょう。
  20. 1:19対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順に書きます。
  21. 1:25画面の例では、クラス名デモの要素に、ポーズドを指定しています。
  22. 1:29アニメーション・プレイ・ステートは、アニメーションの一括指定の中に含めて書くこともできます。
  23. 1:34その場合は、再生時間や回数の値と並べて、ポーズドやランニングを置きます。
  24. 1:39ただし、一括指定は省略した関連プロパティを初期値に戻してしまうので、後から状態だけを切り替えたいときは、
  25. 1:43このように個別プロパティで書き足すのが安全です。
  26. 1:48大切な前提があります。
  27. 1:49アニメーション・プレイ・ステートは、再生状態を切り替えるだけのプロパティなので、
  28. 1:53これ単独では何も起きません。
  29. 1:57土台として、キーフレームで定義した動きと、それを再生するアニメーションの指定が必要です。
  30. 2:03記事の例では、スライドインという、横へ一レム移動する動きと、フェードインという、
  31. 2:08不透明度が〇・四から一へ変わる動きの、二つを用意しています。
  32. 2:13まずこの土台が正しく動いていることを確認してから、再生状態の切り替えを試すのが正しい順序です。
  33. 2:19記事のサンプルでは、ステージという親の中に、デモという箱を一つ置いただけの、
  34. 2:23シンプルなエイチティーエムエルを使います。
  35. 2:27実例のコードです。
  36. 2:29デモという要素に、スライドインを一秒、イーズ、遅延〇・三秒、一回だけ、というアニメーションを指定しています。
  37. 2:37そのうえで、最後の行でプレイ・ステートをポーズドにしています。
  38. 2:41ブラウザーで開くと、要素は開始位置の姿のまま静止し、動き出しません。
  39. 2:46これは故障ではなく、ポーズドの仕様どおりの結果です。
  40. 2:50ポーズドは遅延のカウントも含めて時計を止めるので、〇・三秒待っても始まらない点も、
  41. 2:54あわせて覚えておきましょう。
  42. 2:59最後の行の値をランニングに置き換えると、同じコードでもアニメーションが再生されるようになります。
  43. 3:06値が一つ違うだけで、止まるか動くかが切り替わる。
  44. 3:10これが、このプロパティの役割です。
  45. 3:12実務では、ホバーしている間だけポーズドにして動きを止める、といった使い方もよくあります。
  46. 3:19自動で切り替わるバナーを、読んでいる間だけ止められるようにするのが代表例です。
  47. 3:25ただし、ボタンなどの操作で切り替える場合は、今が再生中なのか停止中なのかが利用者に伝わるよう、
  48. 3:30ラベルやアイコンの表示も一緒に用意しましょう。
  49. 3:35基本情報を整理します。
  50. 3:37初期値はランニングで、何も書かなければアニメーションは再生されます。
  51. 3:41継承はしません。
  52. 3:42親の要素にポーズドを指定しても、子要素のアニメーションまでは止まらないので、
  53. 3:46対象の要素それぞれに指定する必要があります。
  54. 3:50また、一つの要素で複数のアニメーションを同時に再生している場合は、カンマで区切って、
  55. 3:54動きごとに再生と停止を指定できます。
  56. 3:58画面の例では、一つ目の動きは再生し、二つ目は止める、という指定です。
  57. 4:02必要な場面は多くありませんが、仕組みとして知っておくと安心です。
  58. 4:07間違えやすい点をまとめます。
  59. 4:09一つ目は、ポーズドの指定がどこか別の場所に残っていて、動かないことを「効いていない」と誤解するケースです。
  60. 4:17開発者ツールで最終的な値を確認しましょう。
  61. 4:20二つ目は、遅延との関係です。
  62. 4:22ポーズドの間は遅延の待ち時間も進まないため、遅延付きのアニメーションを途中で再開すると、
  63. 4:27残りの待ち時間から数え直しになります。
  64. 4:32なお、ほかのプロパティと同じく、親の計算値を引き継ぐインヘリットや、初期値に戻すイニシャルといった、
  65. 4:37共通の値も指定できます。
  66. 4:41三つ目は、ホバーで止める指定が、タッチ操作の端末でも同じように効くと思い込むことです。
  67. 4:48タッチではホバーが安定しないため、ボタンによる切り替えも用意しておくと安心です。
  68. 4:54効かないときは、順番に確認します。
  69. 4:56第一に、プレイ・ステート以前の問題として、アニメーション自体が再生できる状態かを見ます。
  70. 5:01キーフレームの名前の一致と、再生時間がゼロ秒になっていないかが基本です。
  71. 5:05次に、スタイルシートが読み込まれているか、セレクターが対象に合っているかを確かめ、
  72. 5:11スタイルズで宣言に打ち消し線が付いていないか、コンピューテッドで最終値がどうなっているかを確認します。
  73. 5:16もう一つ、動きを減らす設定に配慮してアニメーション自体を止める指定が入っていると、
  74. 5:19ランニングにしても動きません。
  75. 5:23その場合は、その指定こそが原因です。
  76. 5:25最後に、三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、内容が問題なく読めるかどうかも確認しておきましょう。
  77. 5:32ブラウザー互換性です。
  78. 5:33アニメーション・プレイ・ステートは、クロームが四十三以降、エッジが十二以降、
  79. 5:38ファイアフォックスが十六以降、サファリが九以降で対応しています。
  80. 5:43ポーズドとランニングという値自体は、さらに古いバージョンから扱えます。
  81. 5:48モバイルでは、アンドロイド版クローム四十三以降、アイオーエス版サファリ九以降が目安です。
  82. 5:54かなり前から主要ブラウザーでそろって使えるプロパティなので、動かないときは互換性よりも、
  83. 5:59指定の書き間違いや、別の宣言による上書きのほうを疑うのが現実的でしょう。
  84. 6:05仕上げに、練習とまとめです。
  85. 6:06まず、ポーズドとランニングの違いを、自分の言葉で説明してみてください。
  86. 6:11次に、記事のサンプルで値だけを切り替えて、開始位置で止まることと、再生が始まることを、
  87. 6:15ブラウザーで比べます。
  88. 6:19ホバーで止める指定も、ぜひ一度書いてみましょう。
  89. 6:22関連するプロパティとして、アニメーションの一括指定、ディレイ、フィル・モードの記事も、
  90. 6:26この後の動画で順に扱います。
  91. 6:30慣れてきたら、複数のアニメーションの一部だけを止める、カンマ区切りの指定にも挑戦してみてください。
  92. 6:36アニメーション・プレイ・ステートは、動きの再生スイッチ。
  93. 6:40これが今回の要点です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

animation-play-stateの役割と主な指定値を解説。再生するか、その時点で停止するかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのanimation-play-stateの使い方：指定値・実例・効かない原因とブラウザー互換性 →