transition-durationでトランジション完了までの時間を指定【CSS】

transition-durationプロパティは、トランジション効果による変化が完了するまでの時間を指定するプロパティです。

transition-propertyプロパティでトランジション効果を適用するプロパティを指定することができ、transition-durationプロパティで指定した時間内で徐々に変化していきます。

関連記事
『transition-propertyでトランジションを適用するプロパティを指定【CSS】』

transition-durationの値の指定方法

transition-durationプロパティでは、変化の完了までにかかる時間を数値で指定します。

ちなみにカンマ（,）で区切って複数指定することもできます。

使用する単位は、『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』の記事にも書いている時間系の単位である、「s（秒）」、「ms（ミリ秒）」です。

次の例では、1つ目のボックスの背景色と文字色がマウスオーバーですぐ変わるのに対して、2つ目のボックスにはtransition-durationプロパティで「2s」と指定しているので、背景色と文字色は2秒かけて変化します。

指定している違いは以下の通りです。