CSS3：transitionでアニメーション効果を出す

CSS3で「transition」が加わったおかげで、簡易的なアニメーションがCSSのみで出来るようになりました。

a .box {
  background: #ff6666;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
a:hover .box {
  background: #6666ff;
}

「a .box」に「transition」を仕込んでおき、.boxの親の<a>タグにマウスオンすることで背景色が変わります。
実行サンプルは下記です。

http://jsdo.it/goto_jp/iMkO

変化する前のスタイルに「transition」を埋め込み、「:hover」などのセレクタをフックして変化後のスタイルを記述するのがCSSアニメーションの基本です。

http://jsdo.it/goto_jp/5SaV

数値で設定できるスタイルなら何でもアニメーション化できます。