2024/07/07 (更新日:2024/07/11)

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

Categories > CSSのアニメーション編

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

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

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

この記事の内容！

「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-duration」で遷移時間を「3秒間」に指定したとします。

そして「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」に書いた１つ目の「0s」という値は、「transition-property」の１つ目の値の「width」に対応します。

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

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