transition-durationプロパティ
transition-durationプロパティは、
transitionのスムーズな遷移の実行時間を設定します。
構文
セレクタ {
transition-duration: sまたはmsでの時間;
}
値
| 値 | 説明 |
|---|---|
s |
秒単位で時間を指定します（例: 3s）。
小数値も指定可能です。
例えば、0.5sは0.5秒です。
|
ms |
ミリ秒単位で時間を指定します（例: 3ms）。
1秒は1000ミリ秒です。
|
デフォルト値: 0s。
例
ブロックにマウスを乗せると、幅が2秒かけてスムーズに変化します。
<div id="elem"></div>
#elem {
transition-duration: 2s;
transition-property: width;
border: 1px solid black;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
関連項目
-
トランジションの対象となるプロパティ名を指定する
transition-propertyプロパティ
-
トランジション開始前の遅延時間を指定する
transition-delayプロパティ
-
トランジションのタイミング関数を指定する
transition-timing-functionプロパティ
-
トランジションの一括指定プロパティである
transitionプロパティ
-
アニメーションを作成できる
animationプロパティ
