CSSアニメーション04、
animation-delay。

〽️使い方。 〽️全体の時間はどーなる？ 〽️何でこんなことすんの？ 〽️マイナスの値。 〽️ショートハンド記載の注意。 〽️使いどころは「複数」。

• CSSアニメーション、作り方。
  

  2020.04.17
  webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

使い方。

以前の記事でも使いましたが、要素が４秒間かけて左から右へと移動するアニメーションで考えます。
まづはanimation-delayを指定していない状態。

※ playボタンで再生されます。

このとき記述していないanimation-delayは、初期値の「0s」が適用されています。
したがってアニメーションは即座に再生されます。

次。
ほかの指定はそのままで、animation-delayを指定してみます。
値は「s（秒）」または「ms（ミリ秒）」を使います。

指定値どおり、２秒遅れてCSSアニメーションが再生されています。

全体の時間はどーなる？

「アニメーションの開始を遅らせた」となると、その「CSSアニメーション全体の時間」はどーなるのでしょうか？
先ほどの「継続時間4s、遅れ2s」で考えてみましょう。

CSSアニメーションスタートと同時に、animation-durationで指定した「4秒間」のカウントが開始されます。

そのあと２秒遅れて、「実際のアニメーション」がスタートします。

４秒経過しました。
animation-durationのカウントは終了しましたが、ここで「実際のアニメーション」は中断されません。

「実際のアニメーション」はそのまま完走するまで続きます。最終的に、

animation-delay（2s）＋ animation-duration（4s）

すなはち、６秒後にCSSアニメーション全体が終了します。

 ▶︎ 繰り返すと
　どーなる？

では、このCSSアニメーションを繰り返し再生した場合、どうなるのか。

１回目。durationのカウントが開始され、そのあと２秒遅れで「実際のアニメーション」が開始されます。

４秒後、durationのカウントは終了。
遅れて開始された「実際のアニメーション」はまだ継続しています。

では「実際のアニメーション」が完走するのを待って、２回目のdurationのカウントが開始されるかというと、そうではありません。

durationはあくまで４秒の時点で１回目を完了し、そのあと直ちに２回目のカウントを開始します。

durationの２回目に関しても、animation-delayは適用され、同じく「カウント２秒」のところから「実際のアニメーション２回目」がスタートします。

その結果、１回目こそ遅れて見えるものの、あとはフツーにアニメーションが繰り返されている状態に。
単体のCSSアニメーションの繰り返しにおいて、animation-delayを使ったとしてもあまり意味をなさないかもですね。

何でこんなことすんの？

ここでちょっと疑問が。
「遅らせる」だけであれば、キーフレームで調節できるのでは？と思った方もいらっしゃるでしょう。
さきほどの横移動するCSSアニメーションのサンプルであれば、durationをそのぶん長くして、この⬇︎ように記述しても同じ結果が得られます。

・・ではanimation-delayを使うメリットとは？

「１つのキーフレームで、タイミングの異なるアニメーション」

が実装できるということです。

３つの要素を配置しました。左からid名を「cyan」「magenta」「yellow」としています。

背景色の不透明度が０から１に変わるCSSアニメーションを考えます。
それぞれにアニメーションプロパティを指定します。キーフレームは同じものを参照。

今は同じタイミングで不透明度が 0→1 に変わっています。
ここに値の異なるanimation-delayを指定します。

すると左から順に、タイミングをずらしてアニメーションさせることができました。
もしこの時間差攻撃をキーフレームだけで実装しようとすると、その数だけ異なるキーフレームを用意💧することに成増。

「タイミングをずらす」ということであれば、animation-delayを使ったほうが簡単でコード量も少なくて済む、というメリットがあるのです。