マウスhover時のCSS3 transitionとanimationの違い
マウスが乗っかった事をトリガーに変更を加える擬似クラスが :hover という擬似クラスです。
それに少し挙動を加えたいと思った時に transition を使って、「もわーん」と一定の時間をかけて色を変えたり動かしたりすることが出来ます。IE が CSS3 にやっと対応してくれたおかげで最近色んな所で見るようになりました。IE9 以前なら JavaScript（大体 jQuery）を使ってやっていましたが、今は CSS だけで簡単に実装できます。
ただ「マウス hover の時は CSS transition を使います」と断言しちゃっているような事を書いているところも多いので「CSS animation でもいちょう出来るよ」というお話。
下の2つの箱にマウスを乗っけたり離したりしてみて違いを見てみます。
transition animationCSS
/*左の箱 transition*/
#boxleft {
width: 45%;
height: 200px;
background-color: #eee;
transition: background-color 2s; /*transitionは通常時にセット*/
-webkit-transition: background-color 2s;
}
#boxleft:hover {
background-color: #333;
}
/*右の箱 animation*/
#boxright {
width: 45%;
height: 200px;
background-color: #eee;
}
#boxright:hover {
animation: colorChange 2s; /*animationはhover時にセット*/
-webkit-animation: colorChange 2s;
}
@keyframes colorChange {
0%{background-color: #eee}
100%{background-color: #333}
}
@-webkit-keyframes colorChange {
0%{background-color: #eee}
100%{background-color: #333}
}
違いがわかるでしょうか。
左の箱 transition はマウスが乗ると段々と黒くなり、マウスが離れると段々と灰色に戻ります。右の箱 animation はマウスが乗ると段々と黒くなり。マウスが離れるとパッと灰色に戻ります。
これはそれぞれの性質が異なるためで、transition は「往復運動」を必ずします。それに対し animation は「片道運動」となります。animation は一方通行のイメージです。
また、animation の方はマウスを乗っけたままにしておいても灰色にパッと戻ってしまいますが、これに関しては animation-fill-mode: forwards を設定することで回避可能です。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode
ただこれを見ると animation はいきなりパッと変化してしまうので、transition の方が自然な変化に見えます。
また、CSS の書き方も transition と animation は異なります。animation の方は hover 時にCSSとしてセットすることで、animation のトリガーにしています。
こういう理由で自然に見える transition を良く hover 時に使うのが主流になったものと考えられます。animation 自体が何のトリガーもなく動き始めることを定義とするのでそれもあるかもしれません。
ただ戻ってもらいたくない理由なんかがあるときは、animation を使えば解決するってことですね！
あとトリガーは hover に限らず何であっても（クラス変更とか）でも当然ですがこんな変化になります。hover 時に変化させることが多いと思うので、それを中心に書いてみました。