WEBVTT

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

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

3
00:00:03.431 --> 00:00:07.149
今回のテーマは、アニメーション・デュレーションです。

4
00:00:07.149 --> 00:00:13.011
このプロパティが決めるのは、アニメーションの一回分を「何秒かけて再生するか」です。

5
00:00:13.011 --> 00:00:20.017
これまでのアニメーション関連の指定を思い出すと、動きの種類はネーム、始まるまでの待ち時間はディレイ、

6
00:00:20.017 --> 00:00:27.023
進み方はタイミング・ファンクション、繰り返しの回数はイテレーション・カウントが担当していました。

7
00:00:27.023 --> 00:00:30.025
今回はそこに「一回分の長さ」が加わります。

8
00:00:30.025 --> 00:00:36.459
同じ動きでも、一秒で終わるのか、三秒かけてゆっくり見せるのかで、印象はまったく変わります。

9
00:00:36.459 --> 00:00:39.748
その速さを調整するツマミがデュレーションです。

10
00:00:39.748 --> 00:00:42.250
まず言葉の意味を押さえましょう。

11
00:00:42.250 --> 00:00:52.259
デュレーションが表すのは、アニメーションの一つのサイクル、つまりキーフレームを最初から最後まで一通り再生するのにかかる時間です。

12
00:00:52.259 --> 00:00:55.231
動画全体の長さそのものではありません。

13
00:00:55.231 --> 00:01:01.955
たとえば一回が一・五秒の動きを二回繰り返せば、再生にかかる時間はおよそ三秒になります。

14
00:01:01.955 --> 00:01:07.429
開始までの待ち時間であるディレイは、さらにその前に一度だけ加わります。

15
00:01:07.429 --> 00:01:15.092
逆に、デュレーションがゼロ秒のままだと、動きは一瞬で完了してしまい、目ではほとんど確認できません。

16
00:01:15.092 --> 00:01:17.125
何回繰り返しても同じです。

17
00:01:17.125 --> 00:01:24.632
全体の時間を考えるときは、「一回分の長さ掛ける回数」という掛け算で捉えると分かりやすくなります。

18
00:01:24.632 --> 00:01:26.168
書き方を確認します。

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

20
00:01:32.925 --> 00:01:39.990
画面の例では、デモというクラスを持つ要素に、一回分の再生時間として一・五秒を指定しています。

21
00:01:39.990 --> 00:01:43.829
ここで大事なのは、値には必ず単位を付けることです。

22
00:01:43.829 --> 00:01:48.898
秒ならエス、一ミリ秒単位で細かく指定したいならエムエスと書きます。

23
00:01:48.898 --> 00:01:54.273
単位のない数字だけでは時間として解釈されず、その宣言は無効になります。

24
00:01:54.273 --> 00:02:00.723
前回学んだ回数の指定とは違い、数字だけで済ませられない点がこのプロパティの特徴です。

25
00:02:00.723 --> 00:02:07.020
コロンやセミコロンを落とした場合も、その宣言だけが効かなくなるので注意しましょう。

26
00:02:07.020 --> 00:02:09.606
値の読み方を見ていきましょう。

27
00:02:09.606 --> 00:02:13.916
秒単位のエスでは、一・五秒のように小数も書けます。

28
00:02:13.916 --> 00:02:22.881
ミリ秒単位のエムエスは、一秒を千に分けた細かい単位で、千五百エムエスと一・五エスはまったく同じ長さです。

29
00:02:22.881 --> 00:02:28.657
使い分けの目安として、ボタンの反応のような細かい動きはミリ秒で、ゆっくり見せたい装飾の動きは秒で書くと、

30
00:02:28.657 --> 00:02:34.432
意図が読み取りやすくなります。

31
00:02:34.432 --> 00:02:38.742
このあとの実例では、一・五秒と〇・四秒を比べます。

32
00:02:38.742 --> 00:02:45.811
〇・四秒は一秒の半分にも満たない長さなので、動きはかなり素早く感じられるはずです。

33
00:02:45.811 --> 00:02:51.328
まずはこの二つの数字の差を、頭の中でイメージしておいてください。

34
00:02:51.328 --> 00:02:58.326
ひとつの要素に複数のアニメーションを付ける場合は、デュレーションもカンマ区切りで複数書けます。

35
00:02:58.326 --> 00:03:03.836
値の順番は、アニメーション・ネームに書いたキーフレームの順番と対応します。

36
00:03:03.836 --> 00:03:08.228
たとえば、スライドインとフェードインの二つを付けた要素なら、最初の時間はスライドイン用、

37
00:03:08.228 --> 00:03:12.621
次の時間はフェードイン用です。

38
00:03:12.621 --> 00:03:17.981
この例では、移動には一・五秒、透明度の変化には〇・四秒を指定しています。

39
00:03:17.981 --> 00:03:24.831
もし時間の数がアニメーションより少ない場合は、足りない分は先頭の値から繰り返して補われます。

40
00:03:24.831 --> 00:03:26.915
逆に余った値は使われません。

41
00:03:26.915 --> 00:03:33.020
複数の動きを重ねるときは、この「順番で対応する」という決まりを覚えておきましょう。

42
00:03:33.020 --> 00:03:37.442
一括指定のアニメーションとの関係も確認しておきましょう。

43
00:03:37.442 --> 00:03:41.549
一括指定の中には、時間を表す値が最大で二つ現れます。

44
00:03:41.549 --> 00:03:48.972
このとき、最初に出てきた時間がデュレーション、二番目に出てきた時間がディレイとして扱われます。

45
00:03:48.972 --> 00:03:54.027
画面の例では、一秒が再生時間、〇・三秒が開始までの待ち時間です。

46
00:03:54.027 --> 00:04:01.924
ここを逆に覚えてしまうと、「ゆっくり動かすつもりが、始まるのが遅くなった」という勘違いが起こります。

47
00:04:01.924 --> 00:04:07.768
また、一括指定は関係する個別プロパティをまとめて初期化する働きがあります。

48
00:04:07.768 --> 00:04:14.875
そのため、デュレーションだけを変更したい個別の指定は、一括指定より後ろに書くのが鉄則です。

49
00:04:14.875 --> 00:04:18.192
順番については、実例でもう一度確認します。

50
00:04:18.192 --> 00:04:20.102
実例で流れを確認しましょう。

51
00:04:20.102 --> 00:04:25.560
土台はこれまでと同じ、箱が右へ一レム移動するスライドインというキーフレームです。

52
00:04:25.560 --> 00:04:32.246
真ん中の指定では、この動きを一秒かけて、〇・三秒の遅延のあと、一回だけ再生するよう設定しています。

53
00:04:32.246 --> 00:04:36.067
そして最後の行で、再生時間を一・五秒に上書きしています。

54
00:04:36.067 --> 00:04:40.979
その結果、〇・三秒待ったあと、箱は一・五秒かけてゆっくり右へ移動します。

55
00:04:40.979 --> 00:04:46.300
一括指定の中の一秒よりも、直後の個別指定が優先されている点に注目してください。

56
00:04:46.300 --> 00:04:53.668
記事のサンプルはページの再読み込みで最初から試せますので、まずこのゆったりした動きを目で追ってみてください。

57
00:04:53.668 --> 00:04:58.444
ファイルを保存して、ブラウザーを再読み込みするところから始めましょう。

58
00:04:58.444 --> 00:05:02.047
では最後の値だけを〇・四秒に置き換えてみます。

59
00:05:02.047 --> 00:05:06.120
キーフレームの内容は同じで、移動する距離も同じです。

60
00:05:06.120 --> 00:05:09.566
違うのは、そこへ到達するまでの時間だけです。

61
00:05:09.566 --> 00:05:15.988
一・五秒のときと比べると、〇・四秒では箱が素早く移動し、あっという間に終わります。

62
00:05:15.988 --> 00:05:19.591
遅延の〇・三秒のあとに始まる点は変わりません。

63
00:05:19.591 --> 00:05:26.170
このように、動きの中身を変えずに速さだけを調整できるのが、デュレーションの役割です。

64
00:05:26.170 --> 00:05:32.280
ファイルを保存してブラウザーを再読み込みし、二つの速さを見比べてみてください。

65
00:05:32.280 --> 00:05:40.112
目的に対して速すぎないか、遅すぎないか、といった感覚をつかむことが、この指定を使いこなす第一歩です。

66
00:05:40.112 --> 00:05:42.042
時間の選び方の注意点です。

67
00:05:42.042 --> 00:05:47.981
まず、ゼロ秒や極端に短い値では、変化が起きていても目で追うことが難しくなります。

68
00:05:47.981 --> 00:05:52.139
「効いていないのではないか」と誤解する原因にもなります。

69
00:05:52.139 --> 00:05:55.999
逆に、装飾の動きを長くしすぎると、読み手はその間ずっと動きを視界に入れ続けることになり、

70
00:05:55.999 --> 00:05:59.859
負担になります。

71
00:05:59.859 --> 00:06:04.462
大切なのは、動きの目的に合った、必要十分な長さを選ぶことです。

72
00:06:04.462 --> 00:06:15.152
さらに、利用者の環境で「動きを減らす」設定が有効な場合に備えて、記事の例のようにメディアクエリで装飾的な動作を止める対応も用意しておきましょう。

73
00:06:15.152 --> 00:06:20.052
速さは、見た目の派手さではなく、伝わりやすさで決めるのが基本です。

74
00:06:20.052 --> 00:06:21.871
効かないときの確認です。

75
00:06:21.871 --> 00:06:29.145
まず前提として、キーフレームの名前が指定されていなければ、時間を決めても動く対象が存在しません。

76
00:06:29.145 --> 00:06:31.266
次に、値の単位を確認します。

77
00:06:31.266 --> 00:06:34.449
エスやエムエスを付け忘れた宣言は無効です。

78
00:06:34.449 --> 00:06:38.844
そして、初期値のゼロ秒のままになっていないかも見ましょう。

79
00:06:38.844 --> 00:06:43.845
ゼロ秒の再生は、見た目には「何も起きない」ことと区別がつきません。

80
00:06:43.845 --> 00:06:45.360
書く順番も重要です。

81
00:06:45.360 --> 00:06:52.028
デュレーションの個別指定より後ろに一括指定があると、時間は一括指定の値で上書きされます。

82
00:06:52.028 --> 00:06:56.196
開発者ツールでは、スタイルズで宣言に取り消し線が付いていないかを確認し、

83
00:06:56.196 --> 00:07:00.363
コンピューテッドで最終的な値を見ます。

84
00:07:00.363 --> 00:07:06.880
合わせて、スタイルシート自体が読み込まれているかも、ネットワークの欄で確かめましょう。

85
00:07:06.880 --> 00:07:08.988
最後に基本情報をまとめます。

86
00:07:08.988 --> 00:07:11.397
初期値はゼロ秒、継承はしません。

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

88
00:07:15.913 --> 00:07:20.430
サファリは九以降で使えます。

89
00:07:20.430 --> 00:07:29.914
練習として、一・五秒と〇・四秒の違いを、実際に切り替えて見比べ、どちらがどんな場面に向いているかを言葉で説明してみてください。

90
00:07:29.914 --> 00:07:35.635
デュレーションは単純な指定ですが、動きの心地よさを左右する大事なツマミです。

91
00:07:35.635 --> 00:07:41.959
次回は、どのキーフレームを再生するかを決める、アニメーション・ネームを取り上げます。

92
00:07:41.959 --> 00:07:47.228
これでアニメーションの時間まわりの指定は、ひととおり押さえられました。