CSSでhoverしたときに色の変化をアニメーションにする方法

CSSにはtransitionというものがあり
このtransitionを設定することで変化にアニメーションを加える事が出来ます

transitionの書き方

#test {
transition:A B C D;
}

ABCDのそれぞれに各値を設定していきます
transitionには4のプロパティがあります、それぞれの値は半角スペースを空けます

A = transition-prperty アニメーションを適用するプロパティ名を指定
B = transition-duration アニメーションの動作時間を指定
C = transition-timing-function アニメーションの動作の仕方
D = transition-delay アニメーションが開始されるまでの待ち時間

それぞれデフォルト値があり、そのままの場合は端折ることが出来ます

transition-prperty 初期値：none
transition-duration 初期値：0
transition-timing-function 初期値：ease
transition-delay 初期値：0

transitionを使ってhoverした時に色を変化させる方法

#test {
color:red;
-webkit-transition: color 3s ease 0;
-moz-transition: color 3s ease 0;
-o-transition: color 3s ease 0;
transition: color 3s ease 0;
}

#test:hover {
color:blue;
}

DEMO 表示

アニメーションの変化の度合いには
easeの他に、linear ease-in eas-out ease-in-out があり
数値で指定することも出来ます cubic-bezier( 0,0,0,0)