CSSだけで作るLoadingアニメーション#3

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

最近少しだけはまっているCSS-Loaderですが、アニメーション処理はコンテンツ作成者にとってはひとつの面白みがありますね。
 

今回は、とあるサイトで見かけたloading処理を似せて作って見ました。
 

イメージは、4つのボールが集約して中央に文字が浮かび上がるループアニメーションです。

サンプルデモ

W

ソースコード

解説

今回は、以前記事で書いた「Drop」のSVGレンダリングを利用しています。
 

CSSだけでLoadingアニメ素材を作る「Drop編」
 

このヌルヌル効果を利用して、4つの玉を階層構造にして、親エレメントに回転を加えています。
 

末端の玉エレメントは、拡縮効果と、中央に移動する効果を同時に行なっています。
 

最後に、中央に表示する文字の透明度をアニメーションでコントロールします。
 

いかがでしたか?読み込みを待っている間、面白みが増すようなアニメーションをたくさん作ってみたいですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です