コピペでOK！自動でCSS3アニメーションを生成してくれるツール

• Tweet
• 

CSS3のアニメーションを生成してくれる便利なツールを紹介します。iPhoneはFlashをサポートしていないので、ボタンなどに動きをつけるにはCSS3を使います。いずれのツールも自動でコードを生成してくれるので、コピペですぐに使えて便利です。直感的に操作できるのでとても使いやすいです。

CSS3-Transitions-with-custom-easing-functions

エフェクトを選ぶだけでCSSを生成してくれるので、コピペで使えます。
エレメントを動かすアニメーションを使いたい時に便利です。
※WebKitのみ対応


http://www.joelambert.co.uk/morf/

Stylie

キーフレームをいじればすぐにデモに反映されるので調整がしやすいです。
デモはシンプルですが、調整次第で面白い動きになるので色々試してみるといいかもしれません。


http://jeremyckahn.github.io/stylie/

Ceaser

ベジェ曲線を操作してイージングの調整ができるツールです。
Opacityをクリックしたままだとエレメントが消えたままになりますが、もう一度クリックすると現れます。
シンプルなツールですがベジェ曲線をいじって調整できるのは面白いですね。


http://matthewlein.com/ceaser/

Easing Functions Cheat Sheet

30種類のイージングが収録されており、各イージングをクリックすると解説ページが表示されます。
ペジェ曲線で表現されているので、どのような動きをするのかが分かりやすいですね。
日本語で書かれていますし、解説もついているありがたいサイトです。


http://easings.net/ja#

Animate.css

シンプルこの上ないCSSアニメーション生成ツール「Animate.css」。
bouce、pulse、shake、fadeIn、fadeOut、rotateIn、flipなどなど、シンプルなアニメーションをさくっと作れます。
スタイルシートをダウンロードしておけば演出したいアニメーションがすぐ使えるので便利。


http://daneden.github.io/animate.css/