アニメーションは、もはやホームページを作る上で必須の要素と言えます。

単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。
一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。

今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。
10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。
ぜひ使いやすいライブラリを見つけてみてください。

ホームページにアニメーションを実装するライブラリ＆プラグイン12選

1. Animate.css

1_animatecss.jpeg
https://daneden.github.io/animate.css/

Animate.cssはもっともポピュラーなCSSアニメーションライブラリです。
軽量かつシンプルで、HTML要素に用意されているアニメーション用のclass属性を付加するだけで実装することができます。
特定のアニメーションにはjQueryが必要な場合があるのでご注意ください。

2. Bounce.js

2_bouncecss.jpeg
出典：Bounce.js※このWebサイトは現在公開されていません

Bounce.jsはCSS3のアニメーションをベースに可愛らしい動きを操作するために作られたJavaScriptのライブラリです。
その名の通り「はねる」ような独特な動きをします。

3. AOS

3_aos.jpeg
https://michalsnik.github.io/aos/

AOSはAnimate On Scrollの略で、スクロールイベントでアニメーションを呼び出すことができるCSSとJavaScriptのライブラリです。
スクロールダウンしてアニメーションを開始したあとでも、スクロールを戻すとプレイバックすることができます。
サンプルにもあるように、HTML要素に「data-aos」属性を付加してアニメーションを指定することができます。

4. CSShake

4_csshake.jpeg
http://elrumordelaluz.github.io/csshake/

CSShakeはホームページ上のあらゆる要素をぶるぶるふるわすことができるCSSベースのアニメーションライブラリです。
Mac上で間違えてパスワードを打ってしまった場合に首を横に振るようにぶるぶると震えるアニメーションから、携帯電話のバイブレーションのように震え続ける激しいアニメーションまで、さまざまな形で震えるアニメーションを実装することができます。
SassのMix-inを使えば高度な設定を行うこともできます。

5. Magic Animations

5_magicanimations.jpeg
http://www.minimamente.com/example/magic_animations/

Magic Animationsは、Power Pointで見たことがあるような出現・消失のアニメーションを実装することができるライブラリです。
jQueryを必要としますが、CSSファイルを読み込むだけで準備完了です。
60種類以上の豊富なアニメーションが用意されています。

6. DynCSS

6_dyncss.jpeg
出典：DynCSS※このWebサイトは現在公開されていません

DynCSSはスクロールエフェクトを実装することができるCSSプラグインです。
単なるアニメーションとは違うのでこれまで紹介したライブラリとは一線を画します。
オブジェクトを、事前に用意したパスに沿ってスクロールするごとに動かすことができます。
パスはCSS上で規定のルールに従って記述していきます。

7. Hover CSS

7_hovercss.jpeg
http://ianlunn.github.io/Hover/

HoverCSSはその名の通りホバー(マウスオーバー)で動くアニメーションを実装するためのCSSアニメーションライブラリです。
ボタンや他のUI要素に簡単にアニメーションを実装することができます。
マウスを乗せるだけでかなりインパクトのあるアニメーションが表示できるので、CTAボタンなどに実装すればコンバージョン率アップが期待できそうです。

8. Velocity.js

8_velocityjs.jpeg
http://velocityjs.org

Velocity.jsはフェードやスライド、スクロールなどのさまざまな効果をjQueryで実装することができるアニメーションプラグインです。
jQueryを利用しているので、アニメーションを実装するのに関数や計算なども取り入れることができます。
Velocity.jsはTumblrやWhatsApp、MailChimpなどもホームページで取り入れている実績あるプラグインです。

9. Transit.js

9_transitjs.jpeg
http://ricostacruz.com/jquery.transit/

Transit.jsはCSS3とjQueryを使ったアニメーションプラグインです。
動きがかなり滑らかかつ軽快で、細かい設定まで行えば複雑なアニメーションを実装することができます。

10. GreenSock GSAP

10_gsap.jpeg
https://greensock.com/gsap

GSAPはGreenSock社が開発したHTML5とJavaScriptをベースにしたアニメーションライブラリです。
GSAPを入れると他のアニメーションプラグインが「安物のおもちゃが動いているように見える」と謳っているほどに、動きはパワフルで軽快です。

11. AniJS

11_anijs.jpeg
http://anijs.github.io

AniJSは70種類以上の豊富なアニメーションが用意されているCSSとJavaScriptのアニメーションライブラリです。
「if: click, do: $toggleClass pink-lgh-bg, to: .demo1」のように、HTMLタグのなかでアニメーションの条件を簡易的にプログラミングすることができます。

12. Snap.svg

12_snapsvg.jpeg
http://snapsvg.io/

Snap.svgは、ブラウザ表示に対応したベクターグラフィックであるSVGをアニメーションとして利用することができるJavaScriptベースのアニメーションライブラリです。
これまで紹介したものがオブジェクトそのものを動かすのに対して、SVGアニメーションはパーツの細かなところも繊細に動かすことができるので、美しいアニメーションを実装することができます。
CSSライブラリと比べると多少のプログラミングの知識が必要ですが、覚えておいて損はなさそうです。