【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ
Post on:2014年2月20日
ボタンやロゴ、画像などのホバー時にCSSアニメーションを加えたり、Appleのプロダクトページのようにスクロールに合わせてアニメーションで要素を表示させたり、キーフレームを使ったアニメーションを作成したりなど、CSS3アニメーションを簡単に利用できるライブラリを紹介します。
CSS3アニメーション好きの人は、デモを見ているだけで楽しくなれます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-01.png)
ページ上のさまざまな要素にclassを加えるだけでアニメーションを適用できます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-02.png)
Animate.cssと組み合わせて使うと、スクロールに応じてアニメーションをコントロールできます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-07.png)
Animate.cssと組み合わせて、キーフレームを使ったアニメーションを作成できます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-03.png)
モーダルウインドウ、ボタン、リスト、スクロール、ナビゲーション、キャプション、タブなど、さまざまなブログで公開されたクリエイティブなデモが一挙に楽しめます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-04.png)
classを加えるだけでさまざまなアニメーションが簡単に適用できます。また、jQueryと組み合わせてAppleのプロダクトページのようなコンテンツを作成することもできます。
スクロールと連動するデモページ
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-08.png)
ページ上の要素にさまざまなアニメーションを簡単に適用できます。ちょっと珍しいかっこいい動きが多いです。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-05.png)
緩急のついたイージングのアニメーションを設定できます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-09.png)
ボタン、ロゴ、画像などのホバー時のアニメーションにこだわったスタイルシート。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022001-06.png)
100個以上の要素をタイムラインベースでアニメーションさせることができます。
sponsors