コンテンツがふわんふわんて出たり、ぽっぽって出たりすると「おお〜」ってなりますよね？（擬音が多い）
少し前まで、そんなリッチな表現はJSを使わないと出来ませんでしたが、今はCSS3のアニメーションを使うのが主流になっています。
スクロールが特定の位置まできたときにアニメーションさせたい！というときには、
WOW.jsと
animate.cssのあわせ技がオススメです。
注意！
animate.cssとWOW.jsは開発元が違います。animate.cssのライセンスはMITなので、個人利用でも商用利用でも自由に使うことができますが、
WOW.jsは商用利用の場合、ライセンス費用がかかります。（開発元のオリジナルライセンス）
1プロジェクトのみに利用する場合は＄29、無制限に利用したい場合は＄99です。（※ブログ公開時の費用ですので、変動があるかもしれません）
ただし、WOW.jsも個人利用の場合は無償で利用できます。
詳しくは開発元のライセンスページをご確認ください。
また、オープンソースでの利用の場合は、GPLv3と互換性のあるプロジェクトならGPLv3の条件に基づいて利用することができます。（
こちらはGitHubに記載がありました） なので、WordPressの公式ディレクトリ掲載テーマの開発やプラグイン開発では心置きなく使えますね！
WOW.jsのライセンスはツッコミどころがある気がするけど私はツッコみません。
なお、
同じ名前でMITで配布されているものがありますが、こちらはフォークされたもので本家コードではなさそうなので注意してください。（ふぁっ！！！？？え、どっちが本家！！？？え？？って混乱したので怒りたい。せめて名前変えるとかして・・・）
ちなみにフォークされた方はnot GPLですが本家が元々MITだったので、「GPLなのに何ライセンス変えてるんだよ！」ということではないようです。
使う準備
まず、animate.cssとWOW.jsをダウンロードします。 どちらもnpmでインストールできるので、npmでパッケージ管理している人はコマンドでインストールするとよいのではないでしょうか。
ダウンロード場所
ダウンロードしたら、各ファイルへのパスをHTMLのhead内に記述します。 WOW.jsは使用するときにinitをする必要があるので、JS読み込み時に一緒に記述を入れてください。
(サーバーの問題（？）でlinkとscriptタグが整形タグ内でも入れれないのでgistに書いてます)
https://gist.github.com/chiilog/809520b8b48bf1d65d33458d65195170
これで使う準備は万全です！
使い方
使いたい要素に対して「wow」というクラスと、animate.cssで設定できるアニメーションのクラスをつけるだけ！
[html]<p class="wow fadeInUp">スクロールしたらアニメーションしてフェードインしてくる</p>[/html]
select要素（キャプチャで“bounce”となっているところ）で
見たい動きを選択すればアニメーションを確認できる
私がよく使っているのはfadeInUpとかbounceInです。
アニメーションの動きは
animate.cssで確認できますが、クラス名のコピペはしづらいので
GitHubからコピペすることをおすすめします！
WOW.jsのオプション
WOW.jsのオプションを使えば、「何秒かけてアニメーションを実行するか」や、「スクロールしてから○秒後にアニメーションさせる」といった設定ができます。
設定にはdata属性を使用します。
[html]<p class="wow fadeInUp" data-wow-duration="5s">スクロールしたら5秒かけてアニメーションしてフェードイン[/html]
設定できるdata属性はこちら！
- data-wow-duration – アニメーションの長さを調整する
- data-wow-delay – アニメーションの開始を遅らせる
- data-wow-offset – アニメーションを開始する距離
- data-wow-iteration – アニメーションを繰り返す回数
data-wow-durationとdata-wow-delayに関しては数値+s（例：5s）で設定して、data-wow-offsetとdata-wow-iterationは数値のみで設定します。
data-wow-offsetってなんぞや？なんですが、画面に表示されてから何pxスクロールすれば出てくるかを設定できました！（便利すぎて吐きそう）
多用しすぎに注意
簡単にリッチな表現ができるとうれしいですよね。
うれしくてついついたくさん使ってしまいたくなるものですが、多用しすぎると見づらくなってユーザビリティが悪くなることも考えられるので、
使うときはしっかり設計した上で使いましょう。
自分でやらないの？
CSS3書けないのかよ！って思われるかもしれませんが書けます。
でも書式とかいちいち覚えてないし、なんかこういうちょっとした表現のためにリソースを割くのか？と思って自分で書くのをやめました。（でも自分で書けよ〜〜って心の中の私が責めてきます）
サイトのコードを舐めるように見るのなんて同業者だけだし、読み込むだけでいい感じの表現ができるのなら使ったらいいと思うようにしています。
それで自分の作業量が減るのならバンバン利用するのが吉ですよ！（と自分に言い聞かせる）
