CSSのプロパティの変化を時間を指定するtransition

transitionのプロパティは4つ

transition-delay:1s;
transition-duration:1s;
transition-property:all;
transition-timing-function:ease;

transition-delay

transitionの変化が始まる時間を指定します。
transition-delayに指定した時間経過後にプロパティ値が変化し始めます。

transition-duration

変化にかかる時間を秒単位で指定します(1s、0.5sなど)。

transition-property

transitionの効果を適用するプロパティを指定します。
適用するプロパティ名をカンマ区切りで記述することで複数指定できます。
「all」としていすれば、transitionが適用できるプロパティすべてが対象となります。

transition-timing-function

transitionで変化するタイミングなどを指定します。

指定できる値は以下の通り
ease
　開始と終了が滑らかに変化
linear
　一定の間隔で変化
ease-in
　ゆっくりと変化が始まる
ease-out
　ゆっくりと変化が終わる
ease-in-out
　ゆっくり始まり、ゆっくり終わる

また、上記以外にcubic-bezier関数で変化量を指定することもできます。