CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。 そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現してくれるライブラリです。

CSS3 Animate Itの使い方

公式サイトで用意されているアニメーションです。

クリックイベントと組み合わせたデモです。

例えば以下のようなHTMLタグでアニメーションを実行できます。

<div class='animatedParent'>
	<h2 class='animated bounceInDown'>It Works!</h2>
</div>

アニメーションの仕方はクラス名として定義されているので、指定するだけです。後はJavaScriptでアニメーションするタイミングを制御すれば良いでしょう。DOMが表示された時やクリック時などを指定することでアニメーションが簡単に実現できます。

CSS3 Animate ItはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

CSS3 Animate It - Animate Elements on Scroll Jack-McCourt/css3-animate-it: CSS3 Animate-it