背景
某これウィジェット*1のローディングインジケータに、水面の波紋のアニメーションGIFを使ってたんですが、アニメーションGIFをインターネッツで漁ったりライセンス確認しなきゃならんうえにカスタマイズできないのがしんどくなったので、CSSで作れないかなと思った次第。
方針
- 丸いdivをつくる
- 大きさを keyframe animation する
- box-shadow inset とかで波っぽくする
- 外に行くにつれて薄くすれば消えていく感じになるかな
- それらを複数、ずらして重ねればよさそう
- 楕円にして水面表現する
- その他のチューニング
うるせえ動くもの見せろ
これです
あと読まなくていいです。
1. 丸いdivをつくる
div.circle { width: 80%; height: 80%; border: solid thin #303030; border-radius: 50%; }
2. 大きさを keyframe animation する
div.circle { /* 略 */ animation: wave 2s infinite; } @keyframes wave { from { width: 0%; height: 0%; } to { width: 100%; height: 100%; } }
Chromeのデフォルトのtiming-function
が都合よくうごいてる。
3. box-shadow inset とかで波っぽくする
@keyframes wave { from { /* 略 */ box-shadow: 0 0 100px inset #3f3f3f; } to { /* 略 */ } }
だいぶそれっぽいやんけ。
4. 外に行くにつれて薄くすれば消えていく感じになるかな
@keyframes wave { from { /* 略 */ } to { /* 略 */ opacity: 0; } }
かなりそれっぽいやんけ。
5. それらを複数、ずらして重ねればよさそう
<div class="box"> <div class="circle layer-0"></div> <div class="circle layer-1"></div> <div class="circle layer-2"></div> <div class="circle layer-3"></div> </div>
.box { /* 略 */ position: relative; } .circle { /* 略 */ position: absolute; } div.circle.layer-0 { animation-delay: 0s; } div.circle.layer-1 { animation-delay: 0.2s; } div.circle.layer-2 { animation-delay: 0.4s; } div.circle.layer-3 { animation-delay: 0.6s; }
できてるやん。
6. 楕円にして水面表現する
これ、サイズが相対なので、transform
使うまでもねえわ。
.box { height: 10vw; /* 略 */ }
もうほぼ水面やんけ。
水滴が4つ落ちるのではなく、1滴に対して4種類の波が発生するべき
今、4つの水滴が逐次的に落ちて、それぞれ同じ波が4つ生まれているけど、自然には、1つの水滴が落ちて、複数の種類の波が発生すべきなので、ずらし方を改善する。
いい感じやんけ。
色をちゃんとする
色のセンス無いんだわ〜
横波をつけてみる
まず沈み込んで、盛り上がって、もっかい沈み込んで、で平常状態に戻る、みたいな感じかな。
それっぽくなったけど、典型的な「がんばった結果もっさいデザイン」になった気がする。shadowいらないんじゃないかな。
雑感
opacity
は多く使うのはパフォーマンス的に難あるかもしれない- ミニマムな実装としてはこれで満たしてるから、あとはチューニング
- 他にも方法あったらおしえてください
- わりとちゃんと働いてがっつり給料もらえる職場があれば紹介してください
DRYな備忘録として