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

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





こんにちは、「ふ」です。
CSSアニメーション基本の4回目。前回「とりあえず必要なプロパティ」3つについて紹介しましたが、引き続きほかのプロパティについての解説を進めていきます。

今回は「遅れ系」のanimation-delayプロパティについて。
animation-delayは、本来指定された継続時間(animation-duration)に対して、「アニメーションの開始を遅らせる」プロパティです。

どのような仕組みになっているのか?詳しく見ていきましょう。



当記事のCSSアニメーションに関するコードは、一括指定などの短縮バージョンを使っています。
詳しい記述法については、過去記事⬆︎を参考にしてください。

使い方。


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

#sample1 { margin-left:0%; animation:sample1 4s; } @keyframes sample1 { bbto { margin-left:60%; }

CSS



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

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

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

#sample1 { animation:sample1 4s; 「「1animation-delay:2s;」」 }

CSS



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

全体の時間はどーなる?


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

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

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

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

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

animation-delay(2s)+ animation-duration(4s)

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

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

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

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

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

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

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

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

CSS



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

何でこんなことすんの?


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

#sample2 { 「「2/*durationを2秒長くする*/」」 animation:sample2 6s; } @keyframes sample2 { bb33.3% { margin-left:0%; } bbto { margin-left:60%; }


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

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

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

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

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

#cyan { animation:opacity-change 4s infinite; } #magenta { animation:opacity-change 4s infinite; } #yellow { animation:opacity-change 4s infinite; } @keyframes opacity-change { bbfrom { opacity:0; } bbto { opacity:1; } }

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

#cyan { animation:opacity-change 4s infinite; 「「1animation-delay:0s;」」 「「3/* ⬆︎初期値。 */」」 } #magenta { animation:opacity-change 4s infinite; 「「1animation-delay:0.5s;」」 } #yellow { animation:opacity-change 4s infinite; 「「1animation-delay:1.0s;」」 }

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

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

マイナスの値。


CSSアニメーションのanimation-delayは、マイナスの値を指定することができます。

#sample3 { animation:sample3 4s; } @keyframes sample3 { bbfrom { background-color:#00aeef; } bb50% { background-color:#fff; } bbto { background-color:#E4007F; } }

CSS



サンプルは要素の背景色が「最初はシアン → 50%で白 → 100%でマゼンタ」と変化させるCSSアニメーションです。
ここにマイナスのanimation-delayを掛けてみましょう。

#sample3 { animation:sample3 4s; 「「1animation-delay:-2s;」」 }

CSS



いきなり「背景色:白」からアニメーションが始まりました。

背景色の規定値(アニメーションを実行する前の状態)は初期値の「none」にしています。
animation-durationのカウント2秒の時点でマゼンタになり、その後は規定値の「none」になりました。

animation-delayを「-2s」に指定したことによって、「実際のアニメーション」はanimation-durationのカウント開始2秒前からすでに開始されている、と解釈されます。
マイナスのdelayを掛けて1回だけCSSアニメーションを実行すると、指定したdurationよりも早く終了することに成増。

ショートハンド記載の注意。


前回、CSSアニメーションのプロパティはショートハンドで一括指定できることをお伝えしました。
もちろんanimation-delayもショートハンドに組み込むことができます。

#sample4 { animation:sample4 4s; 「「1animation-delay:2s;」」 }

これは、

#sample4 { animation:sample4 4s 「「12s」」; }

このように書くことができます。

ショートハンドの記述。基本的にプロパティ値の並びは順不同ですが、このanimation-delayだけは注意が必要です。
理由はCSSアニメーションの継続時間であるanimationーdurationと同じ値形式(mまたはms)で指定されるためです。
例えば、

animation:sample4 4s 2s;

このように記述した場合。
ブラウザは、先に書かれた「s」または「ms」を、animation-durationだと判断してCSSアニメーションを描画します。

CSS



サンプルを再生してみると、

 animation-duration : 4s
 animation-delay : 2s

として扱われているのが分かります。

animation:sample4 2s 4s;

今度は値を逆の順番で書いてみました。
ブラウザは先に書かれた「2s」を、animation-durationだと判断します。

CSS



遅れ4秒から「実際のアニメーション」が開始され、2秒で完了しました。



書き順:duration → delay

この順番を守って記述しないと、CSSアニメーションが意図せぬ結果になってしまいます。
特に、animation-delayが「 -2s 」などと負の値の場合。
もしこれがanimation-durationだとブラウザに判断されると、「duration : 0」が採用され、実行しても何も起こりません💧

使いどころは複数。


今回はCSSアニメーションのanimation-delayプロパティについて紹介してきました。

ここまで見てきたように、delayは単体のアニメーションに対してはあまり使いどころはなく、複数のアニメーションに時間差攻撃を仕掛ける場合に効果を発揮します。
JavaScriptによるイベント処理の際には、単体でも効果があります。たとえば「ボタンを押して〇〇秒後に〇〇させる」、そういった時には使えそうですね。

最後までお読みくださり、ありがとうございました。次回もCSSアニメーションのプロパティについて、引き続き紹介していきたいと思います。ではまた〜 ♫



CSSアニメーション、発火のタイミングを制御する。

〽️ 好きなタイミングで発火/消火。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。