2022-08-31

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

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

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

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

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

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

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

<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>