波紋のようなアニメーション
概要
背景が波紋のように広がるアニメーションです。
実装は、波紋を入れたい背景の擬似要素before, afterを使っています。
擬似要素に--ripple-colorとtransparent（透明）を交互にグラデーションさせることで波を表現しています。
波の中心はbackground-positionで調整が可能です。
アニメーションは透明→表示→透明とすることで、アニメーションの継ぎ目をなめらかにしています。
擬似要素afterのアニメーションの開始をずらすことで、継続的な波を表現しています。
ポイントは--ripple-colorに背景色の明度が明るい色を指定することで、自然な波を表現している点です。
また、テキストなどを入れる場合は、spanタグなどで囲みz-indexで波（擬似要素）よりも前面に持ってくる必要があります。
コードサンプル
HTML
<div class="ripple">
<span class="ripple-text">TEXT</span>
</div>CSS
.ripple {
--anim-time: 8s;
--ripple-color: #0e4694;
position: relative;
display: grid;
place-items: center;
width: 70%;
height: 70%;
color: #f4f5f9;
background: #08254f;
overflow: hidden;
}
.ripple::before,
.ripple::after {
content: "";
position: absolute;
left: 20%;
top: 5%;
width: 200%;
aspect-ratio: 1 /1;
background: radial-gradient(
circle,
var(--ripple-color) 5%,
transparent 10%,
var(--ripple-color) 15%,
transparent 20%,
var(--ripple-color) 30%,
transparent 40%,
var(--ripple-color) 60%,
transparent 70%
);
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
opacity: 0;
animation: ripple-effect var(--anim-time) linear infinite;
}
.ripple::after {
animation-delay: calc(var(--anim-time) / 2);
}
.ripple-text {
position: relative;
z-index: 1;
}
@keyframes ripple-effect {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
50% {
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}