これであなたも手軽に！CSS3のアニメーションが使えるツール7選

最近対応ブラウザが増加中のCSS3のアニメーションを簡単に実装できる、オンラインツールについてまとめました。ブラウザからCSSを生成してくれるツールや、CSSのライブラリなど、CSS3アニメーションが一発で導入できます。

CSS3のアニメーションが使えるツール7選

CSSライブラリ編

CSS3AnimationCheatSheet

http://www.justinaguilar.com/animations/

CSS3アニメーションを簡単に実装できるツールです。使い方も簡単です。CSSファイルをダウンロードして、アニメーションをつけたい要素に指定されたクラスを付け加えるだけ。CSS3のキーフレームを使っていて、ほとんどのモダンブラウザに対応しています（IE10にも対応）。「SlideUp」や「FadeIn」、「Bounce」などのアニメーションが使えます。

Animate.css

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

CSS3アニメーションが使えるCSSライブラリです。CSSを読み込んで、クラスを指定するだけで使えます。アニメーションの種類も多く、「bounce」や「flip」、「rotate」など数十パターンの動きが使えます。なお、「Animate.css」のソースコードはGitHubでも公開されています。

MagicCSS3Animation

http://www.minimamente.com/example/magic_animations/

遊び心のあるアニメーションを実装できるCSSライブラリです。アニメーションの名称も、「Magic」や「Bomb」など特徴的。上手に使えば、ページにアクセントをつけることができるでしょう。使い方も簡単で、CSSを読み込んでクラスを付け加えるだけ。ソースコードはGitHubで公開されています。

CSSジェネレーター編

Ceaser

https://matthewlein.com/ceaser/

オンラインで使える、CSSジェネレーターです。指定したアニメーションのCSSがページに表示されるので、コピペして利用することができます。基本となっているエフェクトは、「Left」「Width」「Height」「Opacity」の4種類。「linear」や「ease」などのベーシックなものから、ドラッグ＆ドロップでモーションをカスタマイズすることも可能です。

CSS3KeyframesAnimation

http://cssanimate.com/

ブラウザ上から、キーフレームを使ったアニメーションが作れるCSSジェネレーターです。ドラッグ＆ドロップで動きを指定できたり、作成するアニメーションも直感的に設定していくことができます。作成したアニメーションはその場でプレビューができます。CSSも、タイムラグなしにページに表示されます。

Stylie

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

オンラインで使うことのできるCSSジェネレーターです。画面上に大きくプレビューが表示されていて、設定したアニメーションがわかりやすく見られます。ドラッグ＆ドロップで直感的に操作できます。

EasingFunctionsCheatSheet

http://easings.net/ja

30種類のイージング（easing）が、ベジェ曲線で確認できるオンラインツールです。グラフをクリックして表示される詳細ページには、CSSやSCSS、JavaScriptなどの形式でコードが表示されます。実用性もあるのですが、イージングについて知るための教材としてもおすすめです。

あとがき

CSS3のアニメーションに使えるツールやライブラリについてご紹介しました。使いすぎは禁物ですが、うまく使うことで目を惹くページをつくることができるでしょう。