animate.cssを読み込む

<link rel="stylesheet" href="animate.css" type="text/css">

今回はオンマウス時にアニメーション効果をつけようと思いますのでサンプルのソースコードは<a>を使ってください。
 

マークアップ

<a class="animated flash" href="#">flash</a>

class名でanimatedと使いたい効果の名前を指定するだけでOKです。でもせっかくなのでもう少し・・・。
 

オンマウス時に動くように設定

animate.cssの55行目近辺を見てもらうと下記のコードが見つかると思います。

.flash {
	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;
}

これを

.flash:hover {
	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;
}

に変えるだけ、非常に簡単ですね。flash以外の効果もオンマウスにしたい場合はこちらのページの効果一覧から好きな効果の名前抽出してanimate.cssの中身を書き換えてください。
 
サンプルページは全部a:hoverで設定しました。見ていただいた方はわかると思うんですが6割がたa:hoverではきついですね・・・。
対応ブラウザはもちろんIEは入ってません。IEをでもという方はModernizrをつかうという話なんですが色々調べてみてまともにIEで動いてくれるものがありませんでした。
たぶん僕が間違っているんだろうとは思うんですが、申し訳ありません。IEでの対処法が分かり次第記事を追加しようと思います。