【CSS】「animation-delay」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「animation-delay」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「animation-delay」を使うと、「アニメーションが始まるまでの待ち時間」の指定ができます。

また、下の動画でもCSSの「animation-delay」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「animation-delay」プロパティは「@keyframes」と一緒に使われる。

「animation-delay」プロパティは単体で使うのではなく「@keyframes」を使ったアニメーションの定義と一緒に使われます。

なのでもし「@keyframes」の使い方がいまいち分からないという方は下記の記事で詳しくまとめているので、こちらも一緒に読んでみてください！

「animation-delay」を使うと何ができるのか？

.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    animation-name: width;
    animation-duration: 2s;
    animation-delay: 2s;
}
@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 1000px;
    }
}

「animation-delay」を使うと、「アニメーションが始まるまでの待ち時間」の指定ができます。

上の例だと、「２秒間」の待ち時間の指定をしている感じですね。更新してから「２秒後」にアニメーションが開始しているかと思います。

ふむふむ。

「animation-delay」の使い方！

「animation-delay」の使い方をまとめていきます！

アニメーションを設定する要素自体に「animation-delay」の指定をする！

.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    animation-name: width;
    animation-duration: 2s;
    animation-delay: 2s;
}
@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 1000px;
    }
}

「animation-delay」の指定は、アニメーションをつける要素に対して行えばOKです！

上の例だと、「@keyframes」を使って「width」というアニメーションを定義して、そのアニメーションを「.box」というクラスがついた要素に「animation-name」プロパティを使って設定しています。

そしてその「.box」というクラスがついた要素に「animation-delay」プロパティを使って、「アニメーションが始まるまでの待ち時間」の設定をしている、という感じになりますね。

「時間」を表す値を書いてあげればOK！

「animation-delay」には「時間」を表す値を書いてあげればOKです。

具体的には下記があります！

• 「s」という単位で指定
• 「ms」という単位で指定
• 「0s」初期値

これらがあります。

「s」という単位は「seconds」（秒）の略で、「秒」を表します。

「ms」という単位は「milliseconds」（ミリ秒）の略で、「ミリ秒」を表します。

「1s」＝「1000ms」　です。

また、少数での指定の際は、整数部分の「0」を省略できます。

「 0.6s」→「.6s」という感じ。

「マイナスの時間」の指定もできる！

.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    animation-name: width;
    animation-duration: 2s;
    animation-delay: -0.5s;
}
@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 1000px;
    }
}

「animation-delay」には「マイナスの時間」の指定もできます。

「マイナスの待ち時間」ということになるので、アニメーションが少し進んだ途中地点からのスタートになります。

上の例だと「-0.5s」と指定しているので、「0.5s」だけ進んだ途中地点からのアニメーションになりますね。

「初期値」は「0s」です！

「animation-delay」の「初期値」は「0s」になります。

なので、特に指定しなければ「待ち時間」はつけられない、という感じになりますね。

単位の省略はできない。

「animation-delay」の指定をする際に、「0」という指定はできませんので注意してください。

しっかり「0s」or「0ms」という形で、単位を書いてあげてください。

「カンマ区切り」で「複数の値」も書くことができる！

.box {
    animation-name: width, rotate;
    animation-delay: 1s, 2s;
}

このように「animation-delay」には「カンマ区切り」で「複数の値」を書くことができます。

その場合は、「animation-name」に書かれた順番に対応する形で「animation-delay」の値がそれぞれのアニメーションに対して別々に指定される感じになります。

この辺の挙動は下記の記事で詳しくまとめているので、もし気になる方は下記の記事を読んでみてください！

参考リンク！

仕様書。
https://drafts.csswg.org/css-animations/#animation-delay

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-delay

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「animation-delay」を使うと、「アニメーションが始まるまでの待ち時間」の指定ができる。

アニメーションを設定する要素自体に「animation-delay」の指定をする！

「時間」を表す値を書いてあげればOK！

「マイナスの時間」の指定もできる！

「初期値」は「0s」！

単位の省略はできない。

「カンマ区切り」で「複数の値」も書くことができる！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「animation-delay」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！