【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ
Post on:2014年2月20日
ボタンやロゴ、画像などのホバー時にCSSアニメーションを加えたり、Appleのプロダクトページのようにスクロールに合わせてアニメーションで要素を表示させたり、キーフレームを使ったアニメーションを作成したりなど、CSS3アニメーションを簡単に利用できるライブラリを紹介します。
CSS3アニメーション好きの人は、デモを見ているだけで楽しくなれます。

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

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

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

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

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

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

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

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

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