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

2018年4月10日

CSS テクノロジー プログラミング 特集

最近少しだけはまっているCSS-Loaderですが、アニメーション処理はコンテンツ作成者にとってはひとつの面白みがありますね。 今回は、とあるサイトで見かけたloading処理を似せて作って見ました。 イメージは、4つのボールが集約して中央に文字が浮かび上がるループアニメーションです。

サンプルデモ

W

ソースコード

<!DOCTYPE html> <html> <head> <style> .loading { filter:url(#drop); position:relative; width:100px; height:100px; } .str { z-index:2; position:absolute; text-align:center; line-height:100px; width:100%; height:100%; font-size:40px; color:white; font-weight:bold; animation: anim-str 2s ease-in-out infinite; } .water { z-index:1; position:relative; width:100%; height:100%; animation: anim-water 4s ease-in-out infinite; } .water > div { position:absolute; width:30px; height:30px; border-radius:50%; background-color:#1DA9F1; } .water > div:nth-child(1) { top:0; left:0; animation: anim-water-1 2s ease-in-out infinite; } .water > div:nth-child(2) { top:0; right:0; animation: anim-water-2 2s ease-in-out infinite; } .water > div:nth-child(3) { bottom:0; left:0; animation: anim-water-3 2s ease-in-out infinite; } .water > div:nth-child(4) { bottom:0; right:0; animation: anim-water-4 2s ease-in-out infinite; } @keyframes anim-str { 0%{ opacity:0; } 30%{ opacity:0; } 50%{ opacity:1; } 70%{ opacity:1; } 80%{ opacity:0; } 100%{ opacity:0; } } @keyframes anim-water { 0%{ transform:rotate(0deg); } 25%{ transform:rotate(90deg); } 50%{ transform:rotate(180deg); } 75%{ transform:rotate(270deg); } 100%{ transform:rotate(360deg); } } @keyframes anim-water-1 { 0%{ top:0; left:0; transform:scale(1); } 50%{ top:35px; left:35px; transform:scale(2.5); } 100%{ top:0; left:0; transform:scale(1); } } @keyframes anim-water-2 { 0%{ top:0; right:0; transform:scale(1); } 50%{ top:35px; right:35px; transform:scale(2.5); } 100%{ top:0; right:0; transform:scale(1); } } @keyframes anim-water-3 { 0%{ bottom:0; left:0; transform:scale(1); } 50%{ bottom:35px; left:35px; transform:scale(2.5); } 100%{ bottom:0; left:0; transform:scale(1); } } @keyframes anim-water-4 { 0%{ bottom:0; right:0; transform:scale(1); } 50%{ bottom:35px; right:35px; transform:scale(2.5); } 100%{ bottom:0; right:0; transform:scale(1); } } </style> </head> <body> <h1>CSS Loading-Animation - Water</h1> <div class="loading"> <div class="str">W</div> <div class="water"> <div></div> <div></div> <div></div> <div></div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="drop"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix> <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite> </filter> </defs> </svg> </div> </body> </html>

解説

今回は、以前記事で書いた「Drop」のSVGレンダリングを利用しています。 CSSだけでLoadingアニメ素材を作る「Drop編」 このヌルヌル効果を利用して、4つの玉を階層構造にして、親エレメントに回転を加えています。 末端の玉エレメントは、拡縮効果と、中央に移動する効果を同時に行なっています。 最後に、中央に表示する文字の透明度をアニメーションでコントロールします。 いかがでしたか?読み込みを待っている間、面白みが増すようなアニメーションをたくさん作ってみたいですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。