CSS: transition-duration トランジションの時間を指定

CSS でトランジション(遷移)効果を実現するには、transition-property プロパティを 指定すると同時に、transition-duration プロパティで遷移時間を指定します。

指定できる単位は秒(s)、ミリ秒(ms)です。「1s = 1000ms」となります。初期値は0です。

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


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

遷移時間を指定するサンプルコード

下の2つの div 要素の背景色を遷移させます。 マウスカーソルをのせると白からグレイ、カーソルを外すとグレイから白に遷移します。 上のボックスは遷移時間が1秒で、下のボックスは遷移時間が0.3秒です。

「transition-duration: 1s;」

「transition-duration: 300ms;」

<div class="sample1">「transition-duration: 1s;」</div><br>
<div class="sample2">「transition-duration: 300ms;」</div>

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

HTML・CSS入門