VIDEO LESSON

CSSのanimation-delayの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:32動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーション・ディレイです。
0:07このプロパティが決めるのは、アニメーションが始まるまでの「待ち時間」です。
0:13ページが表示された瞬間にすぐ動き出すのか、一秒待ってから動き出すのか。
0:19そのスタートのタイミングを調整します。
0:22値に書くのは時間で、単位は秒を表すエスや、ミリ秒を表すエムエスです。
0:27再生にかかる時間や、繰り返しの回数を決めるプロパティとは別の、開始前の時間を担当する指定だと捉えてください。
0:36言い換えると、動きの内容や速さではなく、合図が出てから動き出すまでの間隔だけを操るツマミです。
0:43このあと、値の読み方や負の値、遅延の間の見た目まで順に見ていきます。
0:49値の読み方です。
0:50一エスと書けば、開始まで一秒待ちます。
0:54〇・五エス、あるいは五百エムエスと書けば、半秒だけ待ってから始まります。
1:00エスとエムエスはどちらも時間の単位で、千エムエスが一秒です。
1:05初期値はゼロエスで、待ち時間なし、つまり表示されたらすぐに始まる、という意味です。
1:12ディレイを書かなければ、このゼロエスが効いています。
1:17そして面白いのが負の値です。
1:19マイナス〇・五エスと書くと、待ち時間は生まれず、アニメーションがすでに〇・五秒進んだ状態から再生が始まります。
1:29プラスの値は「待つ」、マイナスの値は「途中から」と覚えてください。
1:34実務では、複数の要素に少しずつ違う遅延を付けて、順番に現れる演出を作る場面でよく使います。
1:42書き方を確認します。
1:44対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順です。
1:51画面の例では、クラス名デモの要素に、一秒の遅延を指定しています。
1:56アニメーションの一括指定の中に含めて書くこともできますが、一括指定には、
2:02省略した関連プロパティを初期値に戻す働きがあります。
2:07書き方の順序を間違えると遅延が消えてしまうため、まずは実例のように、個別プロパティの行として書き足す形が安全です。
2:17詳しくは、効かないときの確認のセクションで改めて取り上げます。
2:22前提として、ディレイも単独では何も起こしません。
2:26土台に、キーフレームで定義した動きと、それを再生するアニメーションの指定が必要です。
2:33記事の例では、横へ一レム移動するスライドインと、不透明度が〇・四から一へ変わるフェードインの、
2:37二つの動きが用意されています。
2:42ここで大事なのが、アニメーションの一括指定の読み方です。
2:47一括指定では時間を表す値が二つまで並びます。
2:50一つ目が再生にかかる時間、二つ目が開始までの遅延です。
2:55時間を一つしか書かなければ、それは再生時間として扱われるので注意してください。
3:01実例です。
3:02デモという要素に、スライドインを一秒、イーズ、遅延〇・三秒、一回だけ、というアニメーションを指定し、
3:07最後の行でディレイを一エスに書き換えています。
3:13同じセレクターの宣言が複数ある場合、通常は後の指定が優先されるため、実際に効くのは一エスの方です。
3:21時間の流れで見てみましょう。
3:23ページを開くと、まず一秒間、開始を待ちます。
3:27そのあと一秒かけて、右へ一レム移動します。
3:30土台の指定はそのままに、今回変えるのは最後の一行だけ、というのが、この記事の比較方法です。
3:37最後の行の値をゼロエスに置き換えて、比べてみます。
3:41ゼロエスでは、ページを再読み込みした直後に、アニメーションがすぐ始まります。
3:47一エスのときと見比べると、動きそのものはまったく同じで、違うのは始まるまでの待ち時間だけです。
3:54では、遅れている間、要素はどう見えているのでしょうか。
3:58実はこの答えは、ディレイだけでは決まりません。
4:02要素本来のスタイルで待つのか、最初のキーフレームの姿で待つのかは、フィル・モードとの組み合わせで変わります。
4:10次で見ていきましょう。
4:12遅延の間の見た目を整理します。
4:14初期状態では、待っている間、要素は本来のスタイルで表示されます。
4:20ここにフィル・モードのバックワーズ、またはボウスが組み合わさると、待っている間、
4:25最初のキーフレームの姿が先に当たります。
4:29たとえばフェードインなら、本来の濃さではなく、薄い姿のまま待機するわけです。
4:36もう一つ注意点があります。
4:38遅延が付くのは、アニメーションが始まるときだけです。
4:42繰り返し再生の設定でも、二週目以降の合間に遅延は入りません。
4:47周ごとの間隔を空けたい場合は、キーフレーム側で工夫が必要です。
4:52あわせて、遅延の間が内容の読めない空白時間にならないよう、出す情報の順序にも気を配りましょう。
5:00基本情報を整理します。
5:01初期値はゼロエスです。
5:03何も指定しなければ、待ち時間はなく、すぐに始まります。
5:06継承はしません。
5:07親要素に一エスの遅延を指定しても、子要素のアニメーションの開始時刻までは変わらないので、
5:12目的の要素それぞれに指定します。
5:16複数のアニメーションを同時に使う場合は、カンマ区切りで、動きごとに遅延を並べて指定することもできます。
5:23また、ほかのプロパティと共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども指定できますが、
5:28普段は時間の値だけで十分です。
5:33効かないと感じたら、順番に確かめます。
5:35第一に、書き方の順序です。
5:37一括指定のアニメーションより前にディレイを書くと、一括指定の初期化でゼロエスに巻き戻されます。
5:44遅延は、一括指定の後ろに書き足すのが安全です。
5:47第二に、土台の確認です。
5:49キーフレームの名前がアニメーションの指定と一致しているか、スタイルシートが読み込まれているか、
5:54セレクターが合っているかを見て、スタイルズで宣言に打ち消し線が付いていないか、
5:59コンピューテッドで最終的な値を確認します。
6:04第三に、端末やブラウザーで動きを減らす設定が有効な場合、サンプル側でアニメーション自体を止めていることがあります。
6:12ブラウザー互換性です。
6:14アニメーション・ディレイは、クロームが四十三以降、エッジが十二以降、ファイアフォックスが十六以降、
6:18サファリが九以降で対応しています。
6:22モバイルでは、アンドロイド版クローム四十三以降、アイオーエス版サファリ九以降が目安です。
6:28現在の主要ブラウザーでは接頭辞なしで問題なく使えるので、期待と違う動きをしたときは、
6:34互換性よりも、書き方の順序や、土台のキーフレーム、動きを減らす設定を先に疑いましょう。
6:39対応範囲の広い、安心して使えるプロパティです。
6:42なお、ファイアフォックスには補足条件の注記があるため、細部の挙動が気になる場合は出典の記録も確認してください。
6:49練習とまとめです。
6:51まず、一エスとゼロエスで、ページを再読み込みしたあとの動きがどう違うかを、
6:55自分の言葉で説明してみてください。
6:59次に、記事のサンプルで、最後の行の値だけを変えて、再読み込みしながら結果を比べます。
7:06〇・五エスや、マイナス〇・五エスのような負の値も、ぜひ試してみてください。
7:11一度にいくつも書き換えず、一つ変えて、一つ確かめるのが上達の近道です。
7:17関連するプロパティとして、遅延中の見た目を決めるフィル・モード、再生時間を決めるデュレーションの記事もあわせてどうぞ。
7:26今回の要点は、ディレイは、アニメーションが始まるまでの待ち時間を決める指定、
7:29です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

animation-delayの役割と主な指定値を解説。ページを再読み込みしたあと、開始を待つかすぐ動くかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのanimation-delayの使い方：指定値・実例・効かない原因とブラウザー互換性 →