CSS3のtransition

CSS3を使うとJavascriptやhoverなどでスタイルを変更する場合、通常すぐにスタイルが切り替わりますが、transitionを使うことでスムーズにスタイルを変化させることができます。

【transition-property】・・・変化を適用するプロパティ名

プロパティ名

変化させるプロパティ名（background-colorやcolorなど）を指定する
複数指定する場合はカンマ（,）区切りで指定する

all

すべてのプロパティを変化させる

【transition-duration】・・・変化にかかる時間

時間

変化にかかる時間を指定する

【transition-timing-function】・・・変化の仕方（タイミング）

linear

一定の速度で変化

ease

開始と終了がなめらか

ease-in

ゆっくり始まる

ease-out

ゆっくり終わる

ease

ゆっくり始まり、ゆっくり終わる

【transition-delay】・・・変化がはじまる時間

時間

変化にはじまる時間を指定する

それぞれの要素を個別に記述することもできますが1行で記述することも可能です。

transition: all 1s ease 0;

下記にサンプルのせてます。

CSS3のtransition - jsdo.it - share JavaScript, HTML5 and CSS