l Webデザイン　CSS3アニメーションの実装！Webサイト/オンラインツールまとめ

今回はCSSで書けるアニメーションをまとめたサイトやオンラインツールを紹介します。Webサイトの制作において必要なアニメーションですが、すぐ使えるサンプルをまとめているので、表現したいアニメーションが見つかるかと思います。

l Webサイト/オンラインツール

CSS3 hover effects pack

ホバーアニメーションをまとめたCSSライブラリ。種類が豊富。

iHover

SpinKit | Simple CSS Spinners

CSS3を使って見ていて楽しいローディングアニメーションを実現しています。

SpinKit

AniCollection

四角のみですが、かなりのバリエーションがあるギャラリーです。

AniCollection - The easiest way to find, use and share CSS3 animations.

Animate.css

約60種類以上のアニメーションを簡単に適用出来ます。

Animate.css | A cross-browser library of CSS animations.

Animatable

CSS3アニメーションの一覧。

DEMO

Animatable: One property, two values, endless possibilities

DOWNLOAD

GitHub - LeaVerou/animatable: One property, two values, endless possiblities

Magic Animations CSS3

CSS3アニメーションをまとめたライブラリで、変わった動きを楽しめます。

Magic Animations CSS3

Morf.js

エレメントを様々なアニメーションで動かすスタイルシートを生成。

Morf.js - CSS3 Transitions with custom easing functions

Imagehover.css

あらゆるパターンでのアニメーションサンプルを用意。

Imagehover.css - A Pure CSS Image Hover Library

CSS 3D Clouds

雲をCSSとJavaScriptで表現したサンプル。

CSS 3D Clouds

Hover Effect Ideas

キャプション等を様々なアニメーションで表示。

DEMO

Hover Effect Ideas | Set 1

DOWNLOAD

タイトル未設定

Button Styles Inspiration

テキストベースのシンプルなボタンに対して
ありとあらゆるものすごい数のパターンが紹介されています。

Button Styles Inspiration

l 最後に

簡単に実装ができてしまうので、こういったオンラインツールはどんどん積極的に使っていきたいところです。