最終更新日

transition-durationプロパティ

transition-durationは、変化にかける時間を指定するプロパティです。

transition-propertyで指定したプロパティが、遷移に要する時間を「s」など単位付きの値で指定します。遷移対象のプロパティを複数指定した場合、transition-durationの値も、カンマで区切って複数指定できます。

transition-durationの初期値は「0」で、その場合、遷移は直ちに起こるため、アニメーション効果はありません。また、負の値を指定した場合は「0」と見なされます。

遷移関連プロパティの値をまとめて指定する場合は、transitionを使用します。

CSS3での変更点
・transition-durationは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
0 すべての要素、::before擬似要素セレクタ::after擬似要素セレクタ なし
説明
時間を示す値 「10s」や「15ms」のように、数値に単位を付けて指定します。単位は、秒を表す「s」、ミリ秒(1/1,000秒)を表す「ms」のいずれかを指定できます。
サンプルコード
transition-duration: 5s;
transition-duration: 300ms;
transition-duration: 5s, 10s;
transition-duration: 300ms, 120ms;
transition-duration: 5s, 10s, 15s;
transition-duration: 300ms, 120ms, 200ms;
参考文献:CSS Transitions外部リンク
HOME