CSS3 transition-duration プロパティ

ブラウザサポート

表内の数字は、そのプロパティをサポートする最初のブラウザバージョン番号を示します。

-webkit-、-ms- または -moz- の直前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョン番号です。

プロパティの定義と使用説明

transition-duration は、CSS3 でトランジション効果の継続時間を指定するために使用されるプロパティです。トランジション効果が開始から終了までにかかる時間を定義し、トランジション効果をより滑らかで自然にすることができます。

このプロパティの値は秒（s）またはミリ秒（ms）で指定でき、トランジション効果の継続時間を表します。小数値を使用して、より正確な継続時間を定義できます。

たとえば、トランジション効果を1秒間続けたい場合は、次のように記述します：

.element {
  transition-duration: 1s;
}

トランジション効果を500ミリ秒間続けたい場合は、次のように記述します：

.element {
  transition-duration: 500ms;
}

1つの要素に複数のトランジション効果を同時に適用し、各トランジション効果に異なる継続時間を指定することもできます。これはカンマ区切りの値で実現できます：

.element {
  transition-property: width, height, opacity;
  transition-duration: 0.5s, 1s, 0.3s;
}

これにより、幅の変化のトランジション効果は0.5秒、高さの変化のトランジション効果は1秒、不透明度の変化のトランジション効果は0.3秒続きます。

transition-duration プロパティを調整することで、トランジション効果の速度と滑らかさを制御でき、より魅力的なユーザーインターフェースのインタラクション効果を作成できます。

構文