WEBVTT

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

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

3
00:00:03.863 --> 00:00:07.564
今回のテーマは、アニメーション・ディレイです。

4
00:00:07.564 --> 00:00:13.519
このプロパティが決めるのは、アニメーションが始まるまでの「待ち時間」です。

5
00:00:13.519 --> 00:00:19.152
ページが表示された瞬間にすぐ動き出すのか、一秒待ってから動き出すのか。

6
00:00:19.152 --> 00:00:22.210
そのスタートのタイミングを調整します。

7
00:00:22.210 --> 00:00:27.682
値に書くのは時間で、単位は秒を表すエスや、ミリ秒を表すエムエスです。

8
00:00:27.682 --> 00:00:36.373
再生にかかる時間や、繰り返しの回数を決めるプロパティとは別の、開始前の時間を担当する指定だと捉えてください。

9
00:00:36.373 --> 00:00:43.938
言い換えると、動きの内容や速さではなく、合図が出てから動き出すまでの間隔だけを操るツマミです。

10
00:00:43.938 --> 00:00:49.410
このあと、値の読み方や負の値、遅延の間の見た目まで順に見ていきます。

11
00:00:49.410 --> 00:00:50.795
値の読み方です。

12
00:00:50.795 --> 00:00:54.084
一エスと書けば、開始まで一秒待ちます。

13
00:00:54.084 --> 00:01:00.315
〇・五エス、あるいは五百エムエスと書けば、半秒だけ待ってから始まります。

14
00:01:00.315 --> 00:01:05.508
エスとエムエスはどちらも時間の単位で、千エムエスが一秒です。

15
00:01:05.508 --> 00:01:12.605
初期値はゼロエスで、待ち時間なし、つまり表示されたらすぐに始まる、という意味です。

16
00:01:12.605 --> 00:01:17.105
ディレイを書かなければ、このゼロエスが効いています。

17
00:01:17.105 --> 00:01:19.528
そして面白いのが負の値です。

18
00:01:19.528 --> 00:01:29.049
マイナス〇・五エスと書くと、待ち時間は生まれず、アニメーションがすでに〇・五秒進んだ状態から再生が始まります。

19
00:01:29.049 --> 00:01:34.761
プラスの値は「待つ」、マイナスの値は「途中から」と覚えてください。

20
00:01:34.761 --> 00:01:42.550
実務では、複数の要素に少しずつ違う遅延を付けて、順番に現れる演出を作る場面でよく使います。

21
00:01:42.550 --> 00:01:44.266
書き方を確認します。

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

23
00:01:51.304 --> 00:01:56.796
画面の例では、クラス名デモの要素に、一秒の遅延を指定しています。

24
00:01:56.796 --> 00:02:02.117
アニメーションの一括指定の中に含めて書くこともできますが、一括指定には、

25
00:02:02.117 --> 00:02:07.438
省略した関連プロパティを初期値に戻す働きがあります。

26
00:02:07.438 --> 00:02:17.222
書き方の順序を間違えると遅延が消えてしまうため、まずは実例のように、個別プロパティの行として書き足す形が安全です。

27
00:02:17.222 --> 00:02:22.543
詳しくは、効かないときの確認のセクションで改めて取り上げます。

28
00:02:22.543 --> 00:02:26.349
前提として、ディレイも単独では何も起こしません。

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

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

31
00:02:37.925 --> 00:02:42.840
二つの動きが用意されています。

32
00:02:42.840 --> 00:02:47.281
ここで大事なのが、アニメーションの一括指定の読み方です。

33
00:02:47.281 --> 00:02:50.769
一括指定では時間を表す値が二つまで並びます。

34
00:02:50.769 --> 00:02:55.051
一つ目が再生にかかる時間、二つ目が開始までの遅延です。

35
00:02:55.051 --> 00:03:01.235
時間を一つしか書かなければ、それは再生時間として扱われるので注意してください。

36
00:03:01.235 --> 00:03:02.032
実例です。

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

38
00:03:07.851 --> 00:03:13.670
最後の行でディレイを一エスに書き換えています。

39
00:03:13.670 --> 00:03:21.482
同じセレクターの宣言が複数ある場合、通常は後の指定が優先されるため、実際に効くのは一エスの方です。

40
00:03:21.482 --> 00:03:23.714
時間の流れで見てみましょう。

41
00:03:23.714 --> 00:03:27.221
ページを開くと、まず一秒間、開始を待ちます。

42
00:03:27.221 --> 00:03:30.569
そのあと一秒かけて、右へ一レム移動します。

43
00:03:30.569 --> 00:03:37.743
土台の指定はそのままに、今回変えるのは最後の一行だけ、というのが、この記事の比較方法です。

44
00:03:37.743 --> 00:03:41.602
最後の行の値をゼロエスに置き換えて、比べてみます。

45
00:03:41.602 --> 00:03:47.468
ゼロエスでは、ページを再読み込みした直後に、アニメーションがすぐ始まります。

46
00:03:47.468 --> 00:03:54.723
一エスのときと見比べると、動きそのものはまったく同じで、違うのは始まるまでの待ち時間だけです。

47
00:03:54.723 --> 00:03:58.891
では、遅れている間、要素はどう見えているのでしょうか。

48
00:03:58.891 --> 00:04:02.441
実はこの答えは、ディレイだけでは決まりません。

49
00:04:02.441 --> 00:04:10.777
要素本来のスタイルで待つのか、最初のキーフレームの姿で待つのかは、フィル・モードとの組み合わせで変わります。

50
00:04:10.777 --> 00:04:12.475
次で見ていきましょう。

51
00:04:12.475 --> 00:04:14.918
遅延の間の見た目を整理します。

52
00:04:14.918 --> 00:04:20.128
初期状態では、待っている間、要素は本来のスタイルで表示されます。

53
00:04:20.128 --> 00:04:25.013
ここにフィル・モードのバックワーズ、またはボウスが組み合わさると、待っている間、

54
00:04:25.013 --> 00:04:29.898
最初のキーフレームの姿が先に当たります。

55
00:04:29.898 --> 00:04:36.086
たとえばフェードインなら、本来の濃さではなく、薄い姿のまま待機するわけです。

56
00:04:36.086 --> 00:04:38.203
もう一つ注意点があります。

57
00:04:38.203 --> 00:04:42.437
遅延が付くのは、アニメーションが始まるときだけです。

58
00:04:42.437 --> 00:04:47.322
繰り返し再生の設定でも、二週目以降の合間に遅延は入りません。

59
00:04:47.322 --> 00:04:52.370
周ごとの間隔を空けたい場合は、キーフレーム側で工夫が必要です。

60
00:04:52.370 --> 00:05:00.023
あわせて、遅延の間が内容の読めない空白時間にならないよう、出す情報の順序にも気を配りましょう。

61
00:05:00.023 --> 00:05:01.547
基本情報を整理します。

62
00:05:01.547 --> 00:05:03.072
初期値はゼロエスです。

63
00:05:03.072 --> 00:05:06.813
何も指定しなければ、待ち時間はなく、すぐに始まります。

64
00:05:06.813 --> 00:05:07.922
継承はしません。

65
00:05:07.922 --> 00:05:12.079
親要素に一エスの遅延を指定しても、子要素のアニメーションの開始時刻までは変わらないので、

66
00:05:12.079 --> 00:05:16.236
目的の要素それぞれに指定します。

67
00:05:16.236 --> 00:05:23.303
複数のアニメーションを同時に使う場合は、カンマ区切りで、動きごとに遅延を並べて指定することもできます。

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

69
00:05:28.291 --> 00:05:33.280
普段は時間の値だけで十分です。

70
00:05:33.280 --> 00:05:35.972
効かないと感じたら、順番に確かめます。

71
00:05:35.972 --> 00:05:37.814
第一に、書き方の順序です。

72
00:05:37.814 --> 00:05:44.473
一括指定のアニメーションより前にディレイを書くと、一括指定の初期化でゼロエスに巻き戻されます。

73
00:05:44.473 --> 00:05:47.732
遅延は、一括指定の後ろに書き足すのが安全です。

74
00:05:47.732 --> 00:05:49.432
第二に、土台の確認です。

75
00:05:49.432 --> 00:05:54.485
キーフレームの名前がアニメーションの指定と一致しているか、スタイルシートが読み込まれているか、

76
00:05:54.485 --> 00:05:59.539
セレクターが合っているかを見て、スタイルズで宣言に打ち消し線が付いていないか、

77
00:05:59.539 --> 00:06:04.592
コンピューテッドで最終的な値を確認します。

78
00:06:04.592 --> 00:06:12.668
第三に、端末やブラウザーで動きを減らす設定が有効な場合、サンプル側でアニメーション自体を止めていることがあります。

79
00:06:12.668 --> 00:06:14.110
ブラウザー互換性です。

80
00:06:14.110 --> 00:06:18.436
アニメーション・ディレイは、クロームが四十三以降、エッジが十二以降、ファイアフォックスが十六以降、

81
00:06:18.436 --> 00:06:22.762
サファリが九以降で対応しています。

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

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

84
00:06:34.100 --> 00:06:39.671
互換性よりも、書き方の順序や、土台のキーフレーム、動きを減らす設定を先に疑いましょう。

85
00:06:39.671 --> 00:06:42.686
対応範囲の広い、安心して使えるプロパティです。

86
00:06:42.686 --> 00:06:49.896
なお、ファイアフォックスには補足条件の注記があるため、細部の挙動が気になる場合は出典の記録も確認してください。

87
00:06:49.896 --> 00:06:51.277
練習とまとめです。

88
00:06:51.277 --> 00:06:55.421
まず、一エスとゼロエスで、ページを再読み込みしたあとの動きがどう違うかを、

89
00:06:55.421 --> 00:06:59.564
自分の言葉で説明してみてください。

90
00:06:59.564 --> 00:07:06.009
次に、記事のサンプルで、最後の行の値だけを変えて、再読み込みしながら結果を比べます。

91
00:07:06.009 --> 00:07:11.687
〇・五エスや、マイナス〇・五エスのような負の値も、ぜひ試してみてください。

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

93
00:07:17.058 --> 00:07:26.112
関連するプロパティとして、遅延中の見た目を決めるフィル・モード、再生時間を決めるデュレーションの記事もあわせてどうぞ。

94
00:07:26.112 --> 00:07:29.258
今回の要点は、ディレイは、アニメーションが始まるまでの待ち時間を決める指定、

95
00:07:29.258 --> 00:07:32.404
です。