どうも！LSSです！！
以前、
【CSS】水面の波紋アニメーション - Little Strange Software
【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software
と、波紋アニメーションCSSを２種類、作ってみました。
どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。
その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐々に透過していく」という表現が考えられます。
ただ…そもそもこのアニメーション、「radial-gradientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色（透過度含む）もまた「radial-gradientの内容」に書く内容なのにどうやって変化させたものか？
という、新たな壁に直面する事になります。
今回は、「トリッキーな方法」で、「それっぽい」ものを実現してみました。
透過波紋
コード
<style>
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave{
height:210px;
background-image:
radial-gradient(farthest-side,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),
radial-gradient(farthest-side,#6666bb,#8888ff 100%);
background-position:50% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea 3s linear infinite;
}
</style>
<div class="trwave"> </div>
コード中、青太字で書いた１０カ所の#8888ffが「水面の色」に当たる色になります。
違う色に変更する場合、１０カ所とも同じカラーコードに合わせる事になります。
トリッキーな方法
今回、どんな方法を使ったか、を解説します。
まず、背景background-imageに２つのradial-gradientを使用しています。
まず下敷きとなるほうに、
そして、その上に重ねて、
このような円形グラデーションをのせています。
白く見える部分は透過色で、この部分だけ下にある「下敷きのグラデーション」が垣間見える事になります。
この状態で、こちらのradial-gradientはサイズ「100% 100%」ですが、
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
keyframesの定義により、「2000% 2000%」まで、ぐわっと拡大する事になります。
縦横それぞれ２０倍、って事ですね。
（補足すると、「background-position:50% 50%,0 0;」で「50% 50%」を指定しているため、「中央合わせが常に有効＝中央を中心として拡大される」という事になります）
２０倍になった時、多重の波紋の一番内側の小さい波も、下敷きグラデーションの「外にいって水面と同色となっている」部分にくるまで拡大されているので、「枠内全面が水面色ベタ塗りと同じ状態」という事になります。
あとがき
トリッキーというか、強引というかｗな方法で実現したため、背景はベタ塗り一択となります。
例えば、
【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software
でやったような、「下敷きグラデーション部分を写真画像に変える」と…変える事はできますが、「透過波紋」では無くなってしまう、という事になりますね^^;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
