WEBVTT

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

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

3
00:00:03.379 --> 00:00:07.039
今回のテーマは、アニメーション・フィル・モードです。

4
00:00:07.039 --> 00:00:13.656
このプロパティが担当するのは、アニメーションが動いている最中ではなく、その「前」と「後」です。

5
00:00:13.656 --> 00:00:16.471
開始までの遅延の間、どんな姿で待つのか。

6
00:00:16.471 --> 00:00:20.976
再生が終わったあと、最後の姿のまま止まるのか、元の姿に戻るのか。

7
00:00:20.976 --> 00:00:23.510
それを決めるのがフィル・モードです。

8
00:00:23.510 --> 00:00:27.452
値は、ノン、フォワーズ、バックワーズ、ボウスの四つです。

9
00:00:27.452 --> 00:00:31.676
再生中の動きそのものは、キーフレームと再生時間で決まります。

10
00:00:31.676 --> 00:00:36.744
フィル・モードは、その外側の時間の見た目を整える指定だと考えてください。

11
00:00:36.744 --> 00:00:39.700
順番に、違いと効く条件を見ていきましょう。

12
00:00:39.700 --> 00:00:41.558
四つの値を整理します。

13
00:00:41.558 --> 00:00:48.312
ノンは、初期値でもある指定で、アニメーションの前後にはキーフレームを当てません。

14
00:00:48.312 --> 00:00:52.703
遅延中も終了後も、要素本来のスタイルで表示されます。

15
00:00:52.703 --> 00:01:00.471
フォワーズは「後ろ」担当で、再生が終わっても、最後のキーフレームの姿をそのまま保ち続けます。

16
00:01:00.471 --> 00:01:08.238
バックワーズは「前」担当で、開始までの遅延の間、最初のキーフレームの姿を先取りして当てます。

17
00:01:08.238 --> 00:01:16.175
そしてボウスは、バックワーズとフォワーズの両方、つまり前も後ろもキーフレームで埋める指定です。

18
00:01:16.175 --> 00:01:22.592
名前の通り、前後の空白をフィル、つまり埋めるのが、このプロパティの役目です。

19
00:01:22.592 --> 00:01:24.189
書き方を確認します。

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

21
00:01:30.738 --> 00:01:35.530
画面の例では、クラス名デモの要素に、ボウスを指定しています。

22
00:01:35.530 --> 00:01:41.440
フィル・モードは、アニメーションの一括指定の中に含めて書くこともできます。

23
00:01:41.440 --> 00:01:43.037
ただ、注意点が一つ。

24
00:01:43.037 --> 00:01:48.947
一括指定には、省略した関連プロパティを初期値に戻す働きがあるため、一括指定よりも前にフィル・モードを書いてしまうと、

25
00:01:48.947 --> 00:01:54.857
ノンに戻されて消えてしまいます。

26
00:01:54.857 --> 00:02:02.364
順序のトラブルを避けるには、実例のように、個別プロパティの行として後ろに書き足すのが安全です。

27
00:02:02.364 --> 00:02:06.326
前提として、フィル・モードも単独では何も起こしません。

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

29
00:02:12.488 --> 00:02:17.037
記事の例では、横へ一レム移動するスライドインと、不透明度が〇・四から一へ変わるフェードインの、

30
00:02:17.037 --> 00:02:21.585
二つの動きが用意されています。

31
00:02:21.585 --> 00:02:24.960
そして、もう一つ大事なのが遅延、ディレイです。

32
00:02:24.960 --> 00:02:32.149
遅延がゼロなら、アニメーションはすぐに始まるので、「前」の状態を考える場面がそもそも生まれません。

33
00:02:32.149 --> 00:02:38.752
バックワーズやボウスの効果が見えるのは、遅延のあるアニメーションのときだと覚えてください。

34
00:02:38.752 --> 00:02:39.657
実例です。

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

36
00:02:46.262 --> 00:02:52.866
最後の行でフィル・モードをボウスにしています。

37
00:02:52.866 --> 00:02:55.400
時間の流れで見てみましょう。

38
00:02:55.400 --> 00:02:59.381
ページを開いた直後の〇・三秒間は遅延中です。

39
00:02:59.381 --> 00:03:08.610
ボウスにはバックワーズの働きが含まれるので、この間、要素はフロムの姿、つまり移動前の位置で待機します。

40
00:03:08.610 --> 00:03:13.586
再生が始まって一秒動き、終わったあとは、フォワーズの働きで、トゥーの姿、

41
00:03:13.586 --> 00:03:18.562
右へ一レムずれた位置に留まり続けます。

42
00:03:18.562 --> 00:03:22.724
前と後、両方ともキーフレームで埋まるわけです。

43
00:03:22.724 --> 00:03:26.799
最後の行の値をノンに置き換えて、比べてみます。

44
00:03:26.799 --> 00:03:32.469
ノンでは、再生が終わった瞬間に、要素は本来のスタイルへ戻ります。

45
00:03:32.469 --> 00:03:39.202
今の例では、右へ一レムずれた位置から、元の位置へぱっと戻って見えるはずです。

46
00:03:39.202 --> 00:03:42.568
一方、「前」の違いには条件があります。

47
00:03:42.568 --> 00:03:52.136
遅延中に当てるのはフロムの姿ですが、フロムと要素本来の姿が同じなら、ノンでもボウスでも見た目は変わりません。

48
00:03:52.136 --> 00:03:58.780
たとえばフェードインのように、フロムの不透明度が〇・四で本来の姿と違う動きでは、

49
00:03:58.780 --> 00:04:05.424
遅延中、薄い姿で待つか、本来の濃さで待つか、はっきりした差になります。

50
00:04:05.424 --> 00:04:07.532
誤解しやすい点を押さえます。

51
00:04:07.532 --> 00:04:14.611
フォワーズで終了後の姿が保たれるといっても、それはアニメーションが当てた状態が表示され続けるだけで、

52
00:04:14.611 --> 00:04:21.689
要素の元のシーエスエス宣言や、エイチティーエムエルの属性が書き換わるわけではありません。

53
00:04:21.689 --> 00:04:26.358
開発者ツールでスタイルズを見ても、宣言そのものは元のままです。

54
00:04:26.358 --> 00:04:29.672
また、保たれている状態は絶対ではありません。

55
00:04:29.672 --> 00:04:36.599
あとから別のアニメーションが始まったり、より強い指定が来たりすれば、そちらに置き換わります。

56
00:04:36.599 --> 00:04:41.419
終わったあともカスケードの中にいる、という感覚で捉えてください。

57
00:04:41.419 --> 00:04:48.196
重なりの変化など、周囲への影響が気になるときも、この前提で確認すると整理しやすくなります。

58
00:04:48.196 --> 00:04:49.774
基本情報を整理します。

59
00:04:49.774 --> 00:04:51.065
初期値はノンです。

60
00:04:51.065 --> 00:04:57.806
何も指定しなければ、アニメーションの前後にキーフレームは当たらず、終了後は本来の姿に戻ります。

61
00:04:57.806 --> 00:04:58.953
継承はしません。

62
00:04:58.953 --> 00:05:02.897
親要素にボウスを指定しても、子要素のアニメーションの前後までは変わらないので、

63
00:05:02.897 --> 00:05:06.841
目的の要素それぞれに指定します。

64
00:05:06.841 --> 00:05:13.152
複数のアニメーションを同時に使う場合は、カンマ区切りで動きごとに指定することもできます。

65
00:05:13.152 --> 00:05:18.172
また、ほかのプロパティと共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども指定できますが、

66
00:05:18.172 --> 00:05:23.192
普段は四つの値で十分です。

67
00:05:23.192 --> 00:05:25.939
効かないと感じたら、順番に確かめます。

68
00:05:25.939 --> 00:05:28.398
第一に、そもそも出番があるかです。

69
00:05:28.398 --> 00:05:35.194
遅延がなく、アニメーションが繰り返し再生され続ける設定では、前後の空白そのものが発生しません。

70
00:05:35.194 --> 00:05:37.074
第二に、書き方の順序です。

71
00:05:37.074 --> 00:05:43.292
一括指定のアニメーションより前にフィル・モードを書くと、初期値のノンに巻き戻されます。

72
00:05:43.292 --> 00:05:49.148
そして、スタイルシートが読み込まれているか、セレクターが合っているかを確認し、

73
00:05:49.148 --> 00:05:55.005
スタイルズで宣言に打ち消し線が付いていないか、コンピューテッドで最終的な値を見ます。

74
00:05:55.005 --> 00:05:59.704
動きを減らす設定向けに、アニメーション自体を止める指定が入っている場合は、

75
00:05:59.704 --> 00:06:04.404
フィル・モード以前に、動きそのものが無効になっています。

76
00:06:04.404 --> 00:06:05.897
ブラウザー互換性です。

77
00:06:05.897 --> 00:06:10.582
アニメーション・フィル・モードは、クロームが四十三以降、エッジが十二以降、

78
00:06:10.582 --> 00:06:15.266
ファイアフォックスが十六以降、サファリが九以降で対応しています。

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

80
00:06:21.240 --> 00:06:25.516
さらに、ボウスやノンといった値自体は、クローム三以降、ファイアフォックス五以降、

81
00:06:25.516 --> 00:06:29.793
サファリ五以降と、ずっと古い時代から扱えます。

82
00:06:29.793 --> 00:06:34.885
現在の主要ブラウザーでは接頭辞なしで問題なく使えるので、期待と違う動きをしたときは、

83
00:06:34.885 --> 00:06:39.976
互換性よりも、遅延や繰り返しの条件、指定の順序を先に疑いましょう。

84
00:06:39.976 --> 00:06:41.186
練習とまとめです。

85
00:06:41.186 --> 00:06:47.234
まず、ボウスとノンで、遅延中と終了後の姿がどう違うかを、自分の言葉で説明してみてください。

86
00:06:47.234 --> 00:06:54.224
次に、記事のサンプルで、最後の行の値だけを一つずつ変えて、ブラウザーを再読み込みしながら結果を比べます。

87
00:06:54.224 --> 00:06:58.929
一度にいくつも書き換えず、一つ変えて、一つ確かめるのが上達の近道です。

88
00:06:58.929 --> 00:07:06.322
関連するプロパティとして、遅延を決めるディレイ、再生と停止を切り替えるプレイ・ステートの記事もあわせてどうぞ。

89
00:07:06.322 --> 00:07:09.279
今回の要点は、フィル・モードは、アニメーションの前と後をキーフレームで埋める指定、

90
00:07:09.279 --> 00:07:12.236
です。