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

2016年11月8日
これであなたも手軽に!CSS3のアニメーションが使えるツール7選
目次
  1. CSS3のアニメーションが使えるツール7選
  2. CSSライブラリ編
  3. CSSジェネレーター編
  4. あとがき

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

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

CSSライブラリ編

CSS3AnimationCheatSheet

CSS3 Animation Cheat Sheet

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

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

Animate.css

Animate.css

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

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

MagicCSS3Animation

Magic CSS3 Animation

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

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

CSSジェネレーター編

Ceaser

Ceaser

https://matthewlein.com/ceaser/

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

CSS3KeyframesAnimation

CSS3 Keyframes Animation

http://cssanimate.com/

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

Stylie

Stylie

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

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

EasingFunctionsCheatSheet

Easing Functions Cheat Sheet

http://easings.net/ja

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

あとがき

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

中西洋平
中西洋平
Web屋さん兼IT記事ライター。ピンとくるウェブサービスやガジェットを探すのが趣味です。どうぞよろしく。

関連記事