WEBVTT

1
00:00:00.000 --> 00:00:00.812
こんにちは。

2
00:00:00.812 --> 00:00:03.246
シーエスエス、リファレンス解説です。

3
00:00:03.246 --> 00:00:06.898
今回のテーマは、アニメーション・プレイ・ステートです。

4
00:00:06.898 --> 00:00:13.797
このプロパティは、再生中のアニメーションを、そのまま動かし続けるか、その場で一時停止するかを決めます。

5
00:00:13.797 --> 00:00:20.019
値は、再生を表すランニングと、停止を表すポーズドの二つだけ、というシンプルなプロパティです。

6
00:00:20.019 --> 00:00:25.835
ポイントは、ポーズドが「最初に戻る」のではなく、「その瞬間の姿で止まる」という点です。

7
00:00:25.835 --> 00:00:30.840
止め方と再開のしかたから、効かないときの確認まで、順番に見ていきましょう。

8
00:00:30.840 --> 00:00:37.468
たとえば、自動で動き続けるバナーや、読み込み中を示す印など、動きを一時的に止めたい場面で使います。

9
00:00:37.468 --> 00:00:39.648
まず、二つの値の違いを確認します。

10
00:00:39.648 --> 00:00:44.904
ランニングは、通常どおりアニメーションを再生する指定で、これが初期値でもあります。

11
00:00:44.904 --> 00:00:48.110
ポーズドは、アニメーションの時計を止める指定です。

12
00:00:48.110 --> 00:00:52.597
再生の途中でポーズドに変わると、要素はその瞬間の位置や透明度のまま静止し、

13
00:00:52.597 --> 00:00:57.085
ランニングに戻すと、止まっていたところの続きから再び動き始めます。

14
00:00:57.085 --> 00:01:01.700
一方、最初からポーズドを指定しておくと、アニメーションは開始直後の姿、つまりキーフレームのフロムの状態で止まったままになり、

15
00:01:01.700 --> 00:01:06.316
まったく動きません。

16
00:01:06.316 --> 00:01:10.291
この違いが、後で出てくる「効かない」と感じる原因にもなります。

17
00:01:10.291 --> 00:01:14.906
なお、ポーズドで止めてもアニメーションが取り消されるわけではありません。

18
00:01:14.906 --> 00:01:18.368
指定が残っている限り、再開すれば続きから再生されます。

19
00:01:18.368 --> 00:01:19.839
書き方を見てみましょう。

20
00:01:19.839 --> 00:01:25.232
対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順に書きます。

21
00:01:25.232 --> 00:01:29.031
画面の例では、クラス名デモの要素に、ポーズドを指定しています。

22
00:01:29.031 --> 00:01:34.669
アニメーション・プレイ・ステートは、アニメーションの一括指定の中に含めて書くこともできます。

23
00:01:34.669 --> 00:01:39.081
その場合は、再生時間や回数の値と並べて、ポーズドやランニングを置きます。

24
00:01:39.081 --> 00:01:43.739
ただし、一括指定は省略した関連プロパティを初期値に戻してしまうので、後から状態だけを切り替えたいときは、

25
00:01:43.739 --> 00:01:48.396
このように個別プロパティで書き足すのが安全です。

26
00:01:48.396 --> 00:01:49.917
大切な前提があります。

27
00:01:49.917 --> 00:01:53.651
アニメーション・プレイ・ステートは、再生状態を切り替えるだけのプロパティなので、

28
00:01:53.651 --> 00:01:57.385
これ単独では何も起きません。

29
00:01:57.385 --> 00:02:03.469
土台として、キーフレームで定義した動きと、それを再生するアニメーションの指定が必要です。

30
00:02:03.469 --> 00:02:08.309
記事の例では、スライドインという、横へ一レム移動する動きと、フェードインという、

31
00:02:08.309 --> 00:02:13.150
不透明度が〇・四から一へ変わる動きの、二つを用意しています。

32
00:02:13.150 --> 00:02:19.649
まずこの土台が正しく動いていることを確認してから、再生状態の切り替えを試すのが正しい順序です。

33
00:02:19.649 --> 00:02:23.729
記事のサンプルでは、ステージという親の中に、デモという箱を一つ置いただけの、

34
00:02:23.729 --> 00:02:27.808
シンプルなエイチティーエムエルを使います。

35
00:02:27.808 --> 00:02:29.154
実例のコードです。

36
00:02:29.154 --> 00:02:37.228
デモという要素に、スライドインを一秒、イーズ、遅延〇・三秒、一回だけ、というアニメーションを指定しています。

37
00:02:37.228 --> 00:02:41.864
そのうえで、最後の行でプレイ・ステートをポーズドにしています。

38
00:02:41.864 --> 00:02:46.948
ブラウザーで開くと、要素は開始位置の姿のまま静止し、動き出しません。

39
00:02:46.948 --> 00:02:50.836
これは故障ではなく、ポーズドの仕様どおりの結果です。

40
00:02:50.836 --> 00:02:54.948
ポーズドは遅延のカウントも含めて時計を止めるので、〇・三秒待っても始まらない点も、

41
00:02:54.948 --> 00:02:59.060
あわせて覚えておきましょう。

42
00:02:59.060 --> 00:03:06.363
最後の行の値をランニングに置き換えると、同じコードでもアニメーションが再生されるようになります。

43
00:03:06.363 --> 00:03:10.015
値が一つ違うだけで、止まるか動くかが切り替わる。

44
00:03:10.015 --> 00:03:12.601
これが、このプロパティの役割です。

45
00:03:12.601 --> 00:03:19.296
実務では、ホバーしている間だけポーズドにして動きを止める、といった使い方もよくあります。

46
00:03:19.296 --> 00:03:25.230
自動で切り替わるバナーを、読んでいる間だけ止められるようにするのが代表例です。

47
00:03:25.230 --> 00:03:30.555
ただし、ボタンなどの操作で切り替える場合は、今が再生中なのか停止中なのかが利用者に伝わるよう、

48
00:03:30.555 --> 00:03:35.880
ラベルやアイコンの表示も一緒に用意しましょう。

49
00:03:35.880 --> 00:03:37.317
基本情報を整理します。

50
00:03:37.317 --> 00:03:41.760
初期値はランニングで、何も書かなければアニメーションは再生されます。

51
00:03:41.760 --> 00:03:42.805
継承はしません。

52
00:03:42.805 --> 00:03:46.725
親の要素にポーズドを指定しても、子要素のアニメーションまでは止まらないので、

53
00:03:46.725 --> 00:03:50.645
対象の要素それぞれに指定する必要があります。

54
00:03:50.645 --> 00:03:54.565
また、一つの要素で複数のアニメーションを同時に再生している場合は、カンマで区切って、

55
00:03:54.565 --> 00:03:58.484
動きごとに再生と停止を指定できます。

56
00:03:58.484 --> 00:04:02.927
画面の例では、一つ目の動きは再生し、二つ目は止める、という指定です。

57
00:04:02.927 --> 00:04:07.108
必要な場面は多くありませんが、仕組みとして知っておくと安心です。

58
00:04:07.108 --> 00:04:09.248
間違えやすい点をまとめます。

59
00:04:09.248 --> 00:04:17.348
一つ目は、ポーズドの指定がどこか別の場所に残っていて、動かないことを「効いていない」と誤解するケースです。

60
00:04:17.348 --> 00:04:20.558
開発者ツールで最終的な値を確認しましょう。

61
00:04:20.558 --> 00:04:22.698
二つ目は、遅延との関係です。

62
00:04:22.698 --> 00:04:27.512
ポーズドの間は遅延の待ち時間も進まないため、遅延付きのアニメーションを途中で再開すると、

63
00:04:27.512 --> 00:04:32.326
残りの待ち時間から数え直しになります。

64
00:04:32.326 --> 00:04:37.064
なお、ほかのプロパティと同じく、親の計算値を引き継ぐインヘリットや、初期値に戻すイニシャルといった、

65
00:04:37.064 --> 00:04:41.802
共通の値も指定できます。

66
00:04:41.802 --> 00:04:48.374
三つ目は、ホバーで止める指定が、タッチ操作の端末でも同じように効くと思い込むことです。

67
00:04:48.374 --> 00:04:54.488
タッチではホバーが安定しないため、ボタンによる切り替えも用意しておくと安心です。

68
00:04:54.488 --> 00:04:56.486
効かないときは、順番に確認します。

69
00:04:56.486 --> 00:05:01.659
第一に、プレイ・ステート以前の問題として、アニメーション自体が再生できる状態かを見ます。

70
00:05:01.659 --> 00:05:05.891
キーフレームの名前の一致と、再生時間がゼロ秒になっていないかが基本です。

71
00:05:05.891 --> 00:05:11.298
次に、スタイルシートが読み込まれているか、セレクターが対象に合っているかを確かめ、

72
00:05:11.298 --> 00:05:16.705
スタイルズで宣言に打ち消し線が付いていないか、コンピューテッドで最終値がどうなっているかを確認します。

73
00:05:16.705 --> 00:05:19.997
もう一つ、動きを減らす設定に配慮してアニメーション自体を止める指定が入っていると、

74
00:05:19.997 --> 00:05:23.288
ランニングにしても動きません。

75
00:05:23.288 --> 00:05:25.404
その場合は、その指定こそが原因です。

76
00:05:25.404 --> 00:05:32.340
最後に、三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、内容が問題なく読めるかどうかも確認しておきましょう。

77
00:05:32.340 --> 00:05:33.841
ブラウザー互換性です。

78
00:05:33.841 --> 00:05:38.615
アニメーション・プレイ・ステートは、クロームが四十三以降、エッジが十二以降、

79
00:05:38.615 --> 00:05:43.390
ファイアフォックスが十六以降、サファリが九以降で対応しています。

80
00:05:43.390 --> 00:05:48.164
ポーズドとランニングという値自体は、さらに古いバージョンから扱えます。

81
00:05:48.164 --> 00:05:54.167
モバイルでは、アンドロイド版クローム四十三以降、アイオーエス版サファリ九以降が目安です。

82
00:05:54.167 --> 00:05:59.623
かなり前から主要ブラウザーでそろって使えるプロパティなので、動かないときは互換性よりも、

83
00:05:59.623 --> 00:06:05.080
指定の書き間違いや、別の宣言による上書きのほうを疑うのが現実的でしょう。

84
00:06:05.080 --> 00:06:06.990
仕上げに、練習とまとめです。

85
00:06:06.990 --> 00:06:11.765
まず、ポーズドとランニングの違いを、自分の言葉で説明してみてください。

86
00:06:11.765 --> 00:06:15.448
次に、記事のサンプルで値だけを切り替えて、開始位置で止まることと、再生が始まることを、

87
00:06:15.448 --> 00:06:19.132
ブラウザーで比べます。

88
00:06:19.132 --> 00:06:22.406
ホバーで止める指定も、ぜひ一度書いてみましょう。

89
00:06:22.406 --> 00:06:26.294
関連するプロパティとして、アニメーションの一括指定、ディレイ、フィル・モードの記事も、

90
00:06:26.294 --> 00:06:30.182
この後の動画で順に扱います。

91
00:06:30.182 --> 00:06:36.867
慣れてきたら、複数のアニメーションの一部だけを止める、カンマ区切りの指定にも挑戦してみてください。

92
00:06:36.867 --> 00:06:40.687
アニメーション・プレイ・ステートは、動きの再生スイッチ。

93
00:06:40.687 --> 00:06:42.188
これが今回の要点です。