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>