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

deign
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

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

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

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

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

1. GSAP

01-gsap-green-socks-animation

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

デモページ

2. Anime.js

02-anime-js-logo

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

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

デモページ

3. Wicked CSS

03-wicked-css3-library

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

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

デモページ

4. Animate CSS

04-animate-css

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

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

デモページ

5. Tuseday

05-tuesday-css-animation

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

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

デモページ

6. CSShake

06-csshake-shaking-animations

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

デモページ

7. Mo.js

07-mo-js-library

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

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

デモページ

8. Animate Plus

08-animate-plus-library

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

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

デモページ

9. Bounce.js

09-bounce-js-script

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

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

デモページ

10. Magic

10-magic-css-animation-library

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

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

デモページ

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

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

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

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

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

まとめ

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

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

(翻訳:Yuri Tanaka)

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件