無料で使えるCSS、JavaScriptのアニメーションライブラリ10選

近年のWebデザイントレンドのひとつに「アニメーション」があります。CSSで簡易なアニメーションを作ったことのある人は多いかもしれませんが、JavaScriptを使って実装する場合は手間がかかりますよね。

近年、Webにアニメーションを簡単に使うことが出来るライブラリやジェネレーターが数多くあり、実装がより簡単になりました。一方で選択肢が多いぶん、選ぶのに時間がかかってしまうというケースも。

今回は、アニメーションの実装に役に立つ、無料のアニメーションライブラリを10個紹介します。

CSS、JSのアニメーションライブラリ10選

1. GSAP

GSAPはHTML仕様で作られたJavaScriptのライブラリで、SVGやCanvas、jQuery、EASEL.js、そのほかのライブラリとも合わせて使うことができます。

デモページ

2. Anime.js

Anime.jsはシンプルな図形や線を生かした幾何学的なアニメーションを多く備えるJavaScriptライブラリです。

ロゴやボタン、イメージのようなオブジェクトをアニメーションすることができます。クリックやホバー、スワイプのように基本的なトリガーにも対応しています。

デモページ

3. Wicked CSS

Wicked CSSはCSSで作られたライブラリで、回転やフリップ、スライドインのようなアニメーションが豊富です。

このような動きを作ると複雑になってしまいがちですが、クラスをHTMLに付与するだけで実装が可能です。

デモページ

4. Animate CSS

Animate CSSは数年前にリリースされたCSSライブラリ。アップデートを繰り返し、今では70個以上の実用的なアニメーションを備えたライブラリとして認知されています。

さらに、GitHubにサンプルコードやドキュメントが公開されています。

デモページ

5. Tuseday

TusedayはCSSでできたシンプルなライブラリで、要素が表示される瞬間と消える瞬間のアニメーションを与えることができます。
UXの質を下げることなくアニメーションを与え、ページの魅力を引き出します。

Tusedayはまだあまり知られていないライブラリですが、シンプルで使いやすいアニメーションが用意されています。

デモページ

6. CSShake

CSShakeは個性的なライブラリで、使い方を選びます。
他にはないユニークな動きが特徴的で、ゆっくりとした動きから激しい動きまで振動（シェイク）のアニメーションがCSSのライブラリとして用意されています。

デモページ

7. Mo.js

Mo.jsはフルスタックなJavaScriptライブラリです。

使い方はシンプルながらも、モーショングラフィックスを実現する高機能なライブラリです。
チュートリアルが用意されており、ナビやロゴ、オブジェクトのアニメーションを簡単に実装できます。GitHubにデモリンクがまとめられています。

デモページ

8. Animate Plus

Animate Plusは超軽量でシンプルなJavaScriptライブラリです。
圧縮すると2KBと軽量ですが、JavaScriptで使いたい基本的な機能を備えています。

npmからもダウンロードが可能です。そのほかのデモとあわせて、詳しくはGitHubから使い方を参照してください。

デモページ

9. Bounce.js

Bounce.jsは直感的に操作が可能なUIを持ったライブラリです。
Bounce.jsはほかのライブラリと違って、UIを通じて実装を行うことができます。

動きを確認しながら追加していくことができて、必要なコードだけを追加できるため無駄なコードを含みません。さらに詳しくはGitHubに、情報が公開されています。

デモページ

10. Magic

MagicはCSSで作られたライブラリです。
スライドや回転、フェイドアウトのようなアニメーションが用意されています。

Magicのアニメーションは動き方の珍しいものが多く、今回紹介したほかのCSSライブラリよりも軽いライブラリです。

デモページ

JavaScriptとCSSアニメーションの違い

今回はJavaScriptとCSSのアニメーションライブラリを紹介しましたが、JavaScriptとCSSアニメーションには違いやそれぞれに合った使い方があります。

オブジェクトにシンプルな動きを与える、画面を遷移する、ホバーでオブジェクトを表示するような動きにはCSSが適しています。

しかし、さらに複雑な動きを含むアニメーション、停止や一時停止のようにアニメーションの操作を行う場合はJavaScriptアニメーションが最適です。

JavaScriptでアニメーションを実装する場合は、APIやフレームワーク、ライブラリのように外部のサービスを利用して実装することが多いです。
今回紹介した以外にも、沢山のサービスがあります。実現させたい動きにあわせたサービスを探してみてください。

まとめ

いかがでしたか？
アニメーションは、インタラクティブな効果を提供するのに適した表現方法ですが実装が複雑になりやすいのが懸念点です。

しかし、簡単に使えるツールを利用すればアニメーションの実装も簡単になります。
今回紹介したライブラリを参考に、アニメーションを取り入れたリッチなUIを実装してみてください。

（翻訳：Yuri Tanaka）