CSS3だけで作れる格好良いローディングアニメーション5つ!

CSS3だけで作れる格好良いローディングアニメーション5つ!

モモコ

モモコ

お疲れさまです、モモコです。
ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。
今回はCSS3だけで作れるローディングアニメーションを5つご紹介します!
閲覧の際にはモダンブラウザ(最新のGoogleChromeなど)をご利用下さい。

FADE LOADING

FADE LOADING

入力した文字がふわっと浮かび上がるローディングアニメーション。
質感と動きが合っていてがとてもエレガントです。

CSS3 loading animation experiment

CSS3 loading animation experiment

DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。
多彩な変化がついており、とてもクールなアニメーションになっています。

CSS only loading spinners

CSS only loading spinners

色々なデザインに使用し易く汎用性のあるローディングアニメーション。
チュートリアルではJavascriptで実装するためのコードも掲載されています。

CSS3 Loading Animation Loop

CSS3 Loading Animation Loop

円を基調としたスタイリッシュなローディングアニメーション。
此処までCSS3だけで出来てしまうなんて驚きです…!

Creative CSS Loading Animations

Creative CSS Loading Animations

5つの格好良いローディングアニメーションのチュートリアルを掲載している記事。
どのアニメーションも丁寧に作られており、使い勝手が良さそうです。

まとめ

完璧に対応しているブラウザはまだ少ないですが、CSS3のアニメーションの勉強も兼ねて
モダンブラウザ対象の場合には是非使用していきたいと思います。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL