[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ
Post on:2012年11月22日
CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-04.png)
CSS3アニメーションの基本から、かっこいい応用までコピペで簡単に実装できます。
詳細:CSS3アニメーションの基本的な実装例のまとめ
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-03.png)
エレメントを目立たせたり、回転させたり、バウンドさせたりするアニメーションが簡単に実装できるスタイルシートのライブラリ。
詳細:classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-01.png)
デモで動きを確認しながら、緩急をともなったイージングのさまざまなアニメーションをコピペで実装できます。
詳細:緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペット
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-02.png)
Morf.js - CSS3 Transitions with custom easing functions
エレメントをさまざまなアニメーションで動かすスタイルシートを生成します。
※Webkit Only
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-05.png)
リストで実装した複数の画像を24種類のかっこいいCSS3アニメーションで表示します。
詳細:フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-06.png)
トゥイーンやキーフレームを使ったアニメーションを動作確認しながら作成できます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-07.png)
cubic-bezier()の3次ベジェ曲線を使ったイージングのアニメーションを生成します。
※Webkit Only
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012112201-08.png)
イージングのアニメーションをペジェ曲線で微調整できるオンラインツール。
※Webkit Only
sponsors