“transition-duration”プロパティ:遷移効果の所要時間

概要

“transition-duration”プロパティは要素に適用されているプロパティの値が変化した時に遷移にかかる所要時間を指定するプロパティです。

サンプルコード

値

複数のプロパティの遷移効果を指定する

“transition-property”プロパティで複数のプロパティの遷移効果が指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれの遷移の所要時間を指定することができます。値の順番は“transition-property”プロパティで指定した値の順番に対応します。

仕様書

定義されている仕様書

transition-duration

<time>

遷移効果の所要時間を指定する

.sample-box:hover {

transform: scale(1.5);
background-color: #e95295;
transition-duration: 1s;

}

hover!

.sample-box:hover {

transform: scale(1.5);
background-color: #e95295;
transition-duration: 5s;

}

hover!

.sample-box:hover {

transform: scale(1.5);
background-color: #e95295;
transition-duration: 10s;

}

hover!

瞬時に遷移する

.sample-box:hover {

transform: scale(1.5);
background-color: #e95295;
transition-duration: 0s;

}

hover!

複数のプロパティの遷移効果を指定する

.sample-box:hover {

transform: scale(1.5);
background-color: #e95295;
transition-property: transform, background-color;
transition-duration: 3s, 5s;

}

hover!