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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト