WEBVTT

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

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

3
00:00:03.472 --> 00:00:09.114
今回のテーマは、アニメーションを一括で指定するプロパティ、アニメーションです。

4
00:00:09.114 --> 00:00:15.914
アニメーションを使うと、要素の位置や透明度などを、時間に沿って自動で変化させることができます。

5
00:00:15.914 --> 00:00:21.846
その変化の内容は、キーフレームという仕組みで別に定義し、アニメーションでは、

6
00:00:21.846 --> 00:00:27.778
どの動きを、どれくらいの時間で、何回再生するかといった、再生のしかたをまとめて決めます。

7
00:00:27.778 --> 00:00:32.335
この動画では、一括指定の読み解き方から、値の内訳、間違えやすい落とし穴、

8
00:00:32.335 --> 00:00:36.892
効かないときの確認方法まで、順番に学んでいきましょう。

9
00:00:36.892 --> 00:00:39.361
まず、動きそのものの作り方です。

10
00:00:39.361 --> 00:00:43.837
アットキーフレームズというルールを書いて、名前を付けます。

11
00:00:43.837 --> 00:00:51.863
画面の例では、スライドインという名前で、横方向の位置がゼロから百二十ピクセルへ移る動きを定義しています。

12
00:00:51.863 --> 00:00:55.413
フロムが開始時点、トゥーが終了時点の状態です。

13
00:00:55.413 --> 00:01:00.352
もう一つのフェードインは、不透明度をゼロから一へ変える動きです。

14
00:01:00.352 --> 00:01:06.680
キーフレームの中では、パーセントを使って途中の状態を細かく指定することもできます。

15
00:01:06.680 --> 00:01:13.008
大切なのは、アニメーションはこのキーフレームを参照して初めて動く、という関係です。

16
00:01:13.008 --> 00:01:16.712
名前の対応が取れていないと、何も再生されません。

17
00:01:16.712 --> 00:01:21.508
では、アニメーションプロパティの基本形を見てみましょう。

18
00:01:21.508 --> 00:01:30.929
画面のコードは、スライドインというキーフレームを、一秒かけて、イーズアウトという速度の変化で再生する指定です。

19
00:01:30.929 --> 00:01:40.350
〇・三秒は開始までの遅延、二は再生回数、最後のボースは、開始前と終了後の見た目の扱いを決めるフィルモードです。

20
00:01:40.350 --> 00:01:48.401
このように、アニメーションは八つ前後の関連プロパティを一行にまとめた、一括指定プロパティです。

21
00:01:48.401 --> 00:01:54.225
値がたくさん並ぶので、最初は意味の塊ごとに区切って読むのがコツです。

22
00:01:54.225 --> 00:01:59.364
次のセクションから、並び方と内訳を一つずつ確認していきます。

23
00:01:59.364 --> 00:02:04.187
並び方で最も間違えやすいのが、二つの時間の扱いです。

24
00:02:04.187 --> 00:02:10.493
アニメーションでは、最初に書いた時間が再生時間、つまりデュレーションで、

25
00:02:10.493 --> 00:02:16.800
二番目に書いた時間が、開始までの遅延、ディレイとして読まれます。

26
00:02:16.800 --> 00:02:21.808
画面の例なら、〇・六秒が再生時間、〇・二秒が遅延です。

27
00:02:21.808 --> 00:02:32.752
それ以外の値の順番は比較的自由ですが、時間だけは位置で判断されるため、入れ替えて書くと動きがまるで変わってしまいます。

28
00:02:32.752 --> 00:02:39.058
迷ったときは、再生時間、遅延の順と声に出して確認するとよいでしょう。

29
00:02:39.058 --> 00:02:45.736
なお、遅延にはマイナスの値も書けますが、再生時間にマイナスは使えません。

30
00:02:45.736 --> 00:02:50.339
値の内訳を、個別プロパティの名前と対応づけて見ていきます。

31
00:02:50.339 --> 00:02:55.100
一つ目はアニメーションネームで、使うキーフレームの名前です。

32
00:02:55.100 --> 00:02:59.861
カンマで区切れば、複数の動きを同時に再生することもできます。

33
00:02:59.861 --> 00:03:05.258
二つ目はアニメーションデュレーションで、一回の再生にかかる時間です。

34
00:03:05.258 --> 00:03:11.924
単位は秒を表すエスか、ミリ秒を表すエムエスで、〇・六秒は六百エムエスと同じ長さです。

35
00:03:11.924 --> 00:03:14.146
ここで重要な注意があります。

36
00:03:14.146 --> 00:03:18.272
デュレーションの初期値はゼロ秒で、ゼロのままだとアニメーションは一瞬で終わり、

37
00:03:18.272 --> 00:03:22.399
見た目には何も起きません。

38
00:03:22.399 --> 00:03:26.684
動かないときの第一の容疑者は、この時間の指定漏れです。

39
00:03:26.684 --> 00:03:32.568
三つ目はアニメーション・タイミング・ファンクション、速度の変化のしかたです。

40
00:03:32.568 --> 00:03:37.755
イーズはゆっくり始まってゆっくり終わる、イーズアウトは速く始まってゆっくり止まる、

41
00:03:37.755 --> 00:03:42.942
リニアは一定の速さ、といったキーワードから選べます。

42
00:03:42.942 --> 00:03:47.897
四つ目はアニメーションディレイ、再生が始まるまでの待ち時間です。

43
00:03:47.897 --> 00:03:51.303
プラスの値では、その時間だけ開始が遅れます。

44
00:03:51.303 --> 00:03:59.045
マイナスの値を書くと、すでに途中まで再生が進んだ状態から始まる、という少し変わった使い方もできます。

45
00:03:59.045 --> 00:04:04.464
遅延の間、要素がどう見えるかは、次に説明するフィルモードと関係します。

46
00:04:04.464 --> 00:04:08.847
五つ目はアニメーション・イテレーション・カウント、再生回数です。

47
00:04:08.847 --> 00:04:14.052
数字を書けばその回数だけ繰り返し、インフィニットと書けば無限に繰り返します。

48
00:04:14.052 --> 00:04:18.572
六つ目はアニメーションディレクションで、繰り返しの向きを決めます。

49
00:04:18.572 --> 00:04:21.449
オルタネートは往復、リバースは逆再生です。

50
00:04:21.449 --> 00:04:27.887
七つ目はアニメーション・プレイ・ステートで、ランニングが再生中、ポーズドが一時停止を表します。

51
00:04:27.887 --> 00:04:31.585
ボタンを押したときだけ止める、といった制御に使います。

52
00:04:31.585 --> 00:04:37.612
八つすべてを一括指定に書く必要はなく、必要なものだけを書けば、残りは初期値が使われます。

53
00:04:37.612 --> 00:04:43.774
八つ目はアニメーション・フィル・モード、開始前と終了後の見た目を保つかどうかです。

54
00:04:43.774 --> 00:04:48.432
ノーンが初期値で、遅延中や終了後は、普段のスタイルに戻ります。

55
00:04:48.432 --> 00:04:53.993
バックワーズは、遅延の間、最初のキーフレームの状態を先取りして表示します。

56
00:04:53.993 --> 00:04:58.651
フォワーズは、終了後も最後のキーフレームの状態を保ち続けます。

57
00:04:58.651 --> 00:05:00.455
ボースは、その両方です。

58
00:05:00.455 --> 00:05:04.963
たとえば、透明な状態からふわりと現れる演出では、遅延中に要素が見えてしまわないよう、

59
00:05:04.963 --> 00:05:09.472
ボースやバックワーズが欠かせません。

60
00:05:09.472 --> 00:05:15.032
終了後の状態を保ちたいかどうかで、フォワーズ系かどうかを選ぶのが目安です。

61
00:05:15.032 --> 00:05:18.674
一括指定には、便利な反面、落とし穴があります。

62
00:05:18.674 --> 00:05:25.167
アニメーションを書くと、省略した関連プロパティまですべて初期値にリセットされます。

63
00:05:25.167 --> 00:05:29.997
画面の例では、先に再生時間を二秒と書いても、後から名前だけの一括指定を書くと、

64
00:05:29.997 --> 00:05:34.827
再生時間は初期値のゼロ秒に戻ってしまいます。

65
00:05:34.827 --> 00:05:36.410
対策は三つあります。

66
00:05:36.410 --> 00:05:41.636
一括指定を先に書き、細かい調整は個別プロパティをその後に書くこと。

67
00:05:41.636 --> 00:05:44.803
調整も含めて一括指定に全部書き切ること。

68
00:05:44.803 --> 00:05:48.921
そして、クラスを分けて詳細度の競合を避けることです。

69
00:05:48.921 --> 00:05:54.780
効いていない設定があるときは、この初期化が起きていないか疑ってみましょう。

70
00:05:54.780 --> 00:05:58.949
アニメーションが効かないときは、順番に確認しましょう。

71
00:05:58.949 --> 00:06:05.587
まず、キーフレームの名前の綴りが、アニメーションネームと完全に一致しているかを見ます。

72
00:06:05.587 --> 00:06:07.903
タイプミスが一番多い原因です。

73
00:06:07.903 --> 00:06:11.917
次に、再生時間がゼロ秒になっていないかを確認します。

74
00:06:11.917 --> 00:06:18.556
セレクターが対象要素に合っているか、スタイルシート自体が読み込まれているかも基本です。

75
00:06:18.556 --> 00:06:27.356
また、端末やブラウザーで動きを減らす設定が有効だと、サイト側の指定でアニメーションが止められている場合もあります。

76
00:06:27.356 --> 00:06:35.848
開発者ツールのスタイルズで宣言が打ち消されていないか、コンピューテッドで最終値を見るのが確実な切り分け方です。

77
00:06:35.848 --> 00:06:38.026
最後に、互換性とまとめです。

78
00:06:38.026 --> 00:06:43.161
アニメーションは、クローム、ファイアフォックス、サファリなど主要ブラウザーで長く対応しており、

79
00:06:43.161 --> 00:06:48.296
現在の安定版では接頭辞なしで使えます。

80
00:06:48.296 --> 00:06:51.719
アニメーション自体は子要素へ継承されません。

81
00:06:51.719 --> 00:06:57.943
練習としては、記事の二つの指定、スライドイン一秒イーズアウトと、フェードイン六百ミリ秒を実際に書き比べ、

82
00:06:57.943 --> 00:07:04.167
次に値を一つだけ変えて結果を言葉で説明してみてください。

83
00:07:04.167 --> 00:07:08.836
関連する個別プロパティの記事も、この後の動画で順に扱います。

84
00:07:08.836 --> 00:07:14.748
アニメーションは、キーフレームで動きを作り、一括指定で再生のしかたを決める。

85
00:07:14.748 --> 00:07:16.460
これが今回の要点です。