【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ

ボタンやロゴ、画像などのホバー時にCSSアニメーションを加えたり、Appleのプロダクトページのようにスクロールに合わせてアニメーションで要素を表示させたり、キーフレームを使ったアニメーションを作成したりなど、CSS3アニメーションを簡単に利用できるライブラリを紹介します。

CSS3アニメーション好きの人は、デモを見ているだけで楽しくなれます。

サイトのキャプチャ

Animate.css

ページ上のさまざまな要素にclassを加えるだけでアニメーションを適用できます。

サイトのキャプチャ

WOW.js

Animate.cssと組み合わせて使うと、スクロールに応じてアニメーションをコントロールできます。

サイトのキャプチャ

Animo.js

Animate.cssと組み合わせて、キーフレームを使ったアニメーションを作成できます。

サイトのキャプチャ

Effeckt.css

モーダルウインドウ、ボタン、リスト、スクロール、ナビゲーション、キャプション、タブなど、さまざまなブログで公開されたクリエイティブなデモが一挙に楽しめます。

サイトのキャプチャ

CSS Animation Cheat Sheet

classを加えるだけでさまざまなアニメーションが簡単に適用できます。また、jQueryと組み合わせてAppleのプロダクトページのようなコンテンツを作成することもできます。
スクロールと連動するデモページ

サイトのキャプチャ

Magic

ページ上の要素にさまざまなアニメーションを簡単に適用できます。ちょっと珍しいかっこいい動きが多いです。

サイトのキャプチャ

Morf.js

緩急のついたイージングのアニメーションを設定できます。

サイトのキャプチャ

Hover.css

ボタン、ロゴ、画像などのホバー時のアニメーションにこだわったスタイルシート。

サイトのキャプチャ

Anima

100個以上の要素をタイムラインベースでアニメーションさせることができます。

top of page

©2017 coliss