CSS: transition-delay トランジションを遅れて開始する

トランジション(遷移)を遅れて開始するには、transition-delayプロパティを使用します。 変化を開始するまでの時間を秒(s)、ミリ秒(ms)で指定します。「1s = 1000ms」です。

transition-delay プロパティの使用例


transition-delay: 1s;     /* 1秒   */
transition-delay: 500ms;  /* 0.5秒 */

トランジションを遅らせるサンプルコード

下の2つのボックス(div 要素)にマウスカーソルをのせると、 背景色が白からグレイに遷移します。

1つ目のボックスは「遅延なし」ですぐに遷移が開始されますが、 2つ目のボックスは1秒後に遷移が開始されます。

遅延なし
transition-delay: 1s;

<div class="sample1">遅延なし</div>
<div class="sample2">transition-delay: 1s;</div>

<style>
    div.sample1, div.sample2 {
        width: 300px;
        height: 100px;
        border: 1px solid black;
        background-color: white;
        transition-property: background-color;
        transition-duration: 2s;
        margin-bottom: 5px;
    }
    div.sample2 {
        transition-delay: 1s;
    }
    div.sample1:hover, div.sample2:hover {
        background-color: gray;
    }  
</style>

HTML・CSS入門