transitionの使い方

上のサンプルを使って解説していきます。
まずは変化前と変化後を指定します。

#test {
	background-color: #CCFFFF;
}

#test:hover {
	background-color: #00FFFF;
}

もちろんこの状態ではアニメーションにはなりません。このCSSにtransitionプロパティを加えます。

#test {
	background-color: #CCFFFF;
	transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out; /* opera */
	-moz-transition: background-color 0.5s ease-out; /* firefox */
	-webkit-transition: background-color 0.5s ease-out; /* chrome, safari */
	-ms-transition: background-color 0.5s ease-out; /* ie */
}

#test:hover {
	background-color: #00FFFF;
}

transitionプロパティで変化を設定しました。
値はそれぞれ、「変化させるプロパティ」、「変化にかける時間」、「イージング」、「変化が始まるまでの遅延させる時間」の4つになります。
将来的にはtransitionのみで動作させられるようになると思いますが、現時点では-o-や-moz-などのベンダープレフィックスをつけてやる必要があります。

「変化させるプロパティ」は、当然ですがマウスオーバー前とマウスオーバー後で値を変えておかないとアニメーションしません。プロパティを複数指定したいときはカンマ区切りで指定します。すべて指定したい場合はallとします。初期値はallです。

「変化にかける時間」は数値と単位で指定します。単位は秒（s）でもミリ秒（ms）でも可です。3秒なら3s、500ミリ秒なら500msになります。初期値は0（アニメーションなし）です。

「イージング」は

• ease（開始と終了が滑らか、初期値）
• linear（一定）
• ease-in（ゆっくり始まる）
• ease-out（ゆっくり終わる）
• ease-in-out（ゆっくり始まってゆっくり終わる）

といったキーワード指定の他、cubic-bezier(数値, 数値, 数値, 数値)による数値指定も可能です。 ベジェ曲線による数値指定についてはtransition-timing-function－CSS3リファレンスを参考にしてください。

「変化が始まるまでの遅延させる時間」は、「変化にかける時間」と同様に時間を指定します。初期値は0です。

個別指定も可

上記ではtransitionプロパティとしてまとめて指定しましたが、個別に指定することも可能です。
「変化させるプロパティ」はtransition-property、
「変化にかける時間」はtransition-duration、
「イージング」はtransition-timing-function、
「変化が始まるまでの遅延させる時間」はtransition-delay
によって指定します。