CSS、JavaScriptフリーランスになって3ヶ月を過ぎ生活リズムも安定してきたmasa44です。フリーランスになってすぐは、バタバタしてたのと、規則正しい生活を心がけていたので体重が落ちてたんですが、ちょっとグータラ生活になってしまい、みるみる危険区域に突入してしまい、すごく焦ってダイエットを始めました。走れないけど走ります。まとめ出来ること簡単に言うと「Animate.css」で使える動きを、「wow.js」を使って制御するということです。Animate.cssAnimate.cssで出来る動きは結構たくさんあります。複雑な動きではなく、簡単な動きですがよく使うであろう動きとなっています。ExitszoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpSpecialshingejackInTheBoxrollInrollOutこんなにたくさんの種類の動きができます。it]ボタンを押せば確認できます。準備animate.cssの読み込み公式サイトもしくは、gitHubからデータをダウンロードし、読み込みます。〜</head>wow.jsの読み込み公式サイトもしくは、gitHubからデータをダウンロードし、読み込みます。href="Path/to/wow.min.js"></body>wow.jsを読み込んだ後に、下記を記載する。WOW().init();</script>これで、準備をOKEYとなります。させたいアニメーションの名前をクラスとして登録します。slideInRight"></section>これだけで左右からスライドインするアニメーションが設定されます。このままだと、表示してすぐにアニメーションが開始しする設定ですね。これだと無機質な感じのアニメーションとなりますね。単純なアニメーションです。単純なアニメーションをオプション設定により「アニメーションする時間」「表示してから動き出すまでの時間/距離」「繰り返す回数」が設定でき複雑なアニメーションができます。data-wow-offset="100"></section>オプションの設定は要素にそのまま書くだけですね。書くことができて直感でわかりやすいですね。デモ簡単なデモ作ってみました。infiniteのクラスを付けているので永久ループです。CodePen.まとめ設置さえしてしまえば、classとオプションをつけるだけでアニメーションが簡単に付けれるなんてすごいですよね。軽いので、簡単なアニメーションだったら、スマホでも十分対応できます。動画や、アニメーションが当たり前になってきたサイト事情ですが、これらを使えばどなたでも、簡単にアニメーションが設定できますね。