WEBVTT

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

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

3
00:00:03.459 --> 00:00:06.629
今回のテーマは、アニメーション・ネームです。

4
00:00:06.629 --> 00:00:13.258
このプロパティが決めるのは、「どのキーフレームを再生するか」、つまり動きの種類そのものです。

5
00:00:13.258 --> 00:00:18.302
前回のアニメーション・デュレーションが「何秒かけて動くか」という時間の指定だったのに対して、

6
00:00:18.302 --> 00:00:23.346
今回は「何の動きを動かすか」を名前で指名します。

7
00:00:23.346 --> 00:00:29.543
キーフレームとは、始まりから終わりまでの変化をまとめた、動きの設計図のようなものです。

8
00:00:29.543 --> 00:00:35.740
その設計図に付けた名前をここで呼び出すことで、要素に狙った動きを付けることができます。

9
00:00:35.740 --> 00:00:38.849
まず、キーフレームとの関係を整理しましょう。

10
00:00:38.849 --> 00:00:43.514
動きの実体は、アット・キーフレームズという書き方で別に定義します。

11
00:00:43.514 --> 00:00:48.178
たとえば、右へ移動する動きにはスライドイン、だんだん見えるようになる動きにはフェードインといった具合に、

12
00:00:48.178 --> 00:00:52.842
定義の先頭に名前を付けます。

13
00:00:52.842 --> 00:00:59.485
アニメーション・ネームの役割は、その名前を指定して、定義済みの動きを要素へ結びつけることです。

14
00:00:59.485 --> 00:01:03.796
名前の指定だけがあって定義がなければ何も起こりませんし、定義だけがあって名前で呼び出されなければ、

15
00:01:03.796 --> 00:01:08.106
その動きは使われません。

16
00:01:08.106 --> 00:01:13.760
二つがそろって初めてアニメーションが再生される、という関係を覚えておきましょう。

17
00:01:13.760 --> 00:01:15.314
書き方を確認します。

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

19
00:01:22.153 --> 00:01:29.769
画面の例では、デモというクラスを持つ要素に、スライドインという名前のキーフレームを指定しています。

20
00:01:29.769 --> 00:01:35.209
値は、数字や色ではなく、自分がキーフレームに付けた名前、そのものです。

21
00:01:35.209 --> 00:01:42.203
クラス名と同じように名前は自由に決められますが、意味の伝わる名前を付けるのがおすすめです。

22
00:01:42.203 --> 00:01:47.177
たとえば、開く動きならオープン、点滅ならブリンクのように、後から読んだときに動きを想像できる名前だと、

23
00:01:47.177 --> 00:01:52.150
修正するときに迷いません。

24
00:01:52.150 --> 00:01:58.212
コロンやセミコロンを落とすと、宣言そのものが効かなくなる点もこれまで通りです。

25
00:01:58.212 --> 00:02:00.191
指定できる値を確認します。

26
00:02:00.191 --> 00:02:03.235
基本は、キーフレームで定義した名前です。

27
00:02:03.235 --> 00:02:09.018
もう一つ書けるのがノーンで、「アニメーションを付けない」という意味の値です。

28
00:02:09.018 --> 00:02:11.301
実はこれが初期値でもあります。

29
00:02:11.301 --> 00:02:16.171
つまり初期状態では、どの要素にもアニメーションは付いていません。

30
00:02:16.171 --> 00:02:20.128
ノーンは、付けた動きを打ち消したい場面で役立ちます。

31
00:02:20.128 --> 00:02:24.162
たとえば共通の指定で動きを付けたあと、特定の要素だけ個別にノーンと書けば、

32
00:02:24.162 --> 00:02:28.195
その要素だけを静止させられます。

33
00:02:28.195 --> 00:02:32.913
もう一つ大事な約束として、名前の大文字と小文字は区別されます。

34
00:02:32.913 --> 00:02:38.392
綴りが定義側と指定側で少しでも違うと、別の名前だと見なされて動きません。

35
00:02:38.392 --> 00:02:41.872
ここが、このプロパティでいちばん間違えやすい点です。

36
00:02:41.872 --> 00:02:45.887
名前を指定しただけでは、画面の動きが見えないことがあります。

37
00:02:45.887 --> 00:02:50.304
理由は、再生時間を決めるデュレーションの初期値がゼロ秒だからです。

38
00:02:50.304 --> 00:02:54.185
ゼロ秒の再生は一瞬で終わってしまい、目では確認できません。

39
00:02:54.185 --> 00:02:58.870
アニメーションを再生するには、最低でも名前と再生時間の二つが必要です。

40
00:02:58.870 --> 00:03:05.026
そのうえで、必要に応じて、始まるまでの待ち時間、繰り返しの回数、進み方などを足していきます。

41
00:03:05.026 --> 00:03:08.506
名前はあくまで「どの動きか」の指定であって、動きの条件はほかのプロパティが分担している、

42
00:03:08.506 --> 00:03:11.986
と考えましょう。

43
00:03:11.986 --> 00:03:15.332
土台となる考え方なので、しっかり押さえてください。

44
00:03:15.332 --> 00:03:19.833
一つの要素に、複数のアニメーションを同時に付けることもできます。

45
00:03:19.833 --> 00:03:22.928
その場合は、名前をカンマで区切って並べます。

46
00:03:22.928 --> 00:03:29.399
画面の例では、右へ移動するスライドインと、透明度が変わるフェードインを同時に指定しています。

47
00:03:29.399 --> 00:03:36.151
このとき、ほかのアニメーション関連の値もカンマで並べると、名前の順番に対応して組み合わされます。

48
00:03:36.151 --> 00:03:40.934
例では、移動には二秒、透明度の変化には一秒を指定したことになります。

49
00:03:40.934 --> 00:03:46.139
もし時間の値が名前の数より少ない場合は、先頭の値から繰り返して補われます。

50
00:03:46.139 --> 00:03:48.812
逆に値が余っても、余分は使われません。

51
00:03:48.812 --> 00:03:54.720
複数を扱うときは、「カンマの順番でペアになる」という並びの決まりを意識してください。

52
00:03:54.720 --> 00:03:56.852
実例で流れを確認しましょう。

53
00:03:56.852 --> 00:04:00.354
舞台となる箱の中に、デモという箱を用意します。

54
00:04:00.354 --> 00:04:02.486
動きの定義は二種類あります。

55
00:04:02.486 --> 00:04:07.054
スライドインは、横方向の位置をゼロから一レムまで動かします。

56
00:04:07.054 --> 00:04:13.754
フェードインは、不透明度を〇・四から一まで、つまり半透明から完全に見える状態へ変えます。

57
00:04:13.754 --> 00:04:19.160
下のほうでは、一括指定でスライドインを一秒かけて再生する土台を作り、最後の行で、

58
00:04:19.160 --> 00:04:24.565
今回の主役であるアニメーション・ネームを改めて指定しています。

59
00:04:24.565 --> 00:04:29.590
ページを再読み込みすると、箱が右へ少し移動する動きが確認できます。

60
00:04:29.590 --> 00:04:32.788
名前と定義が正しく結びついている証拠です。

61
00:04:32.788 --> 00:04:37.212
では、最後の行の名前だけをフェードインに置き換えてみます。

62
00:04:37.212 --> 00:04:43.010
変えるのは名前ひとつだけで、再生時間や待ち時間といった条件は共通のままです。

63
00:04:43.010 --> 00:04:46.672
今度は箱の位置は動かず、透明度だけが変化します。

64
00:04:46.672 --> 00:04:51.249
半透明の状態から、だんだん濃く表示される動きになるはずです。

65
00:04:51.249 --> 00:04:57.046
ファイルを保存して、ブラウザーを再読み込みし、二つの動きを見比べてください。

66
00:04:57.046 --> 00:05:05.132
この実験から分かるのは、名前を差し替えるだけで、同じ要素にまったく違う動きを付け替えられるということです。

67
00:05:05.132 --> 00:05:12.608
動きの「種類の切り替えスイッチ」がアニメーション・ネームなのだ、というイメージが持てれば十分です。

68
00:05:12.608 --> 00:05:16.938
一括指定のアニメーションとの関係も押さえておきましょう。

69
00:05:16.938 --> 00:05:21.113
一括指定の中には、キーフレームの名前も含まれています。

70
00:05:21.113 --> 00:05:28.071
一括指定には、関係する値をまとめて初期化する働きがあるため、名前を個別に変えたつもりでも、

71
00:05:28.071 --> 00:05:35.030
それより後ろに一括指定が書かれていると、名前は一括指定の中のものに上書きされてしまいます。

72
00:05:35.030 --> 00:05:41.060
名前だけを後から調整したいときは、個別の指定を一括指定より後ろに書きましょう。

73
00:05:41.060 --> 00:05:43.535
名前の付け方にも注意があります。

74
00:05:43.535 --> 00:05:47.710
ノーンのような、役割の決まった言葉は名前に使えません。

75
00:05:47.710 --> 00:05:55.596
また、単語はハイフンでつなぐ書き方が一般的で、大文字と小文字は後で区別される点も意識しておきましょう。

76
00:05:55.596 --> 00:05:58.111
効かないときは、順番に確認します。

77
00:05:58.111 --> 00:06:02.254
第一に、その名前のキーフレームが本当に定義されているか。

78
00:06:02.254 --> 00:06:05.805
定義がどこにもなければ、指定は空振りになります。

79
00:06:05.805 --> 00:06:07.432
第二に綴りの一致です。

80
00:06:07.432 --> 00:06:13.498
定義側と指定側で、ハイフンの有無や大文字小文字までそろっているか見直してください。

81
00:06:13.498 --> 00:06:17.493
第三に、デュレーションがゼロ秒のままになっていないか。

82
00:06:17.493 --> 00:06:21.043
名前が正しくても、時間ゼロでは動きは見えません。

83
00:06:21.043 --> 00:06:24.890
第四に、後ろの一括指定で名前が上書きされていないか。

84
00:06:24.890 --> 00:06:33.619
開発者ツールでは、スタイルズで宣言が無効扱いになっていないかを確認し、コンピューテッドで最終的に決まった名前を見ます。

85
00:06:33.619 --> 00:06:38.058
また、利用者の「動きを減らす」設定に合わせて装飾の動きを止める作りのページでは、

86
00:06:38.058 --> 00:06:42.496
静止するのが正しい動作の場合もあります。

87
00:06:42.496 --> 00:06:44.470
最後に基本情報をまとめます。

88
00:06:44.470 --> 00:06:48.701
初期値はノーン、つまりアニメーションなしで、継承はしません。

89
00:06:48.701 --> 00:06:52.932
ブラウザーの対応も広く、クロームは四三以降、エッジは一二以降、ファイアフォックスは一六以降、

90
00:06:52.932 --> 00:06:57.163
サファリは九以降で使えます。

91
00:06:57.163 --> 00:07:04.074
練習として、スライドインとフェードインの名前を切り替えて、動きの違いを言葉で説明してみてください。

92
00:07:04.074 --> 00:07:10.561
アニメーション・ネームは、動きの設計図を名前で呼び出す、すべてのアニメーションの出発点です。

93
00:07:10.561 --> 00:07:15.356
次回は、操作に反応して滑らかに変わる、トランジションを取り上げます。