『Animate.css』は、回転やフェードイン、フェードアウトなどのアニメーションを簡単に実装できるCSSライブラリです。
『Animate.css』

ライセンスはMIT
『Animate.css』の使い方
『Animate.css』を外部ファイルとして読み込みます。
1 |
<link rel="stylesheet" href="css/animate.css" /> |
アニメーションさせたい要素にクラスを付与します。
1 |
<p class="swing">ゆらゆらと揺れますよ!</p> |
と、たったこれだけで実装できます。
いろいろなエフェクト
様々なエフェクトがありますので、実際にどのような動きをするのか先ほどのリンク先で確かめることができます。
下の方にスクロールしていくと、このようなものがあるのでそれぞれお好きなものを選んでクリック。

カスタマイズダウンロード
サイト上部にボタンがありますので、そこからダウンロードします。 全部はいらないよ!という方は、左側のボタンをクリックします。

必要なものだけを選択してBuild it
のボタンを押すだけです。

Animate.cssのLESS版もあります。
CSS3アニメーションを使う機会が増えてくると思うので、こういった簡単に実装できるライブラリが増えてくるのはほんとうにありがたいなと思います。