【CSS】「transition-delay」プロパティについて解説！【分かりやすい】

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

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

「transition-delay」を使うとアニメーションをつける際の細かい微調整ができます。

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

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

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

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;

    transition-duration: 5s;
    transition-delay: 1s;
}

.box:hover {
    width: 400px;
    height: 400px;
}

「transition-delay」プロパティを使うと「トランジション効果」が始まるまでの「待ち時間」の指定をすることができます。

「待ち時間」は「遷移時間」には含まれないので注意してください。

そして「transition-delay」に「1秒」と指定すると、まず待ち時間が発生し、その後に遷移が開始されるので、実際のアニメーションは、

「１秒（待ち時間）」→「３秒（遷移時間）」

となります。

「transition-delay」の使い方！

「transition-delay」の使い方を丁寧にまとめますね！

わーい！

「transition-delay」に指定できる値は？

「transition-delay」には、普通に「待ち時間」の指定をしてあげればOKです！

• 1.5s
• 2000ms
• .3s

などのように、時間を表す単位を使って指定してあげればOKです！

マイナスの値を指定すると？？

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;

    transition-duration: 2s;
    transition-delay: -1s;
}

.box:hover {
    width: 400px;
    height: 400px;
}

マイナスの値を使うと、途中までトランジションが進んだ状態からスタートします。

「遅らせる」の反対なので、「進む」という感じですね。

例えば、「transition-duration」の値が「2s」で遷移時間が「2秒」の場合に、「transition-delay」に「-1s」とすると、トランジションは「１秒経過した状態」からスタートするので、実際の遷移時間が「１秒」になります。

ふむふむ！テクニカルだね。

複数の「CSSのプロパティ」に対して別々に「transition-delay」の設定をする方法！

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;

    transition-property: width, height, background-color;
    transition-duration: 1s;
    transition-delay: 0s, 1s, 2s;
}

.box:hover {
    width: 400px;
    height: 400px;
    background-color: pink;
}

複数の「CSSのプロパティ」に対して別々に「transition-delay」の設定をするには、「transition-delay」に「,」カンマ区切りで複数の値を書いてあげればOKです！

「transition-property」に指定してある順番に対応したプロパティに対して、ピンポイントで「transition-delay」の指定ができます。

そして、「transition-delay」に書いた２つ目の値の「1s」は、「transition-property」の２つ目の値の「height」に対応します。

さらに、「transition-delay」に書いた３つ目の値の「2s」は、「transition-property」の２つ目の値の「background-color」に対応する、という感じで別々に指定することができるのです。

「transition-delay」は複数のCSSのプロパティに「トランジション効果」を「別々に」つける際に活躍します！

なるほどね！

「transition-property」の解説は下記の記事でしているので、もし気になる方はこちらをどうぞ！

参考リンク！

仕様書。
https://drafts.csswg.org/css-transitions/#transition-delay-property

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

おすすめの再生リスト！

まとめ！

「transition-delay」プロパティを使うと「トランジション効果」が始まるまでの「待ち時間」の指定をすることができる。

※「待ち時間」は「遷移時間」には含まれないので注意！

「transition-delay」には、普通に「待ち時間」の指定をしてあげればOK！

• 1.5s
• 2000ms
• .3s

マイナスの値を使うと、途中までトランジションが進んだ状態からスタートする。

複数の「CSSのプロパティ」に対して別々に「transition-delay」の設定をするには、「transition-delay」に「,」カンマ区切りで複数の値を書いてあげればOK！

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

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

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

ではまた！