波紋状に広がるアニメーションを実装する

波紋状に広がるアニメーションの実装を試してみます。

サンプルコード

ホバーすると波紋が広がるようにしてみます。

<a href="#" class="sample"></a>

波紋部分は疑似要素を使用します。
transitionでアニメーションの設定を行い、scaleで拡大しながらopacityでフェードアウトしていくようにします。

.sample {
  position: relative;
  width: 60px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: skyblue;
}
.sample::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid skyblue;
  border-radius: 50%;
}
.sample:hover::before {
  transition:
    scale 800ms linear,
    opacity 500ms linear 300ms;
  scale: 1.8;
  opacity: 0;
}

これで波紋のアニメーションが実装できました。
波紋状に広がるアニメーションのデモページ

先ほどは単一の波紋でしたが、繰り返し波紋が広がるようにしてみます。
transitionではなくkeyframesを使ってアニメーションの設定を行います。

.sample {
  position: relative;
  width: 60px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: skyblue;
}
.sample::before,
.sample::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid skyblue;
  border-radius: 50%;
}
.sample:hover::before {
  animation: ripple 1200ms linear infinite;
}
.sample:hover::after {
  animation: ripple 1200ms linear 600ms infinite;
}
@keyframes ripple {
  0% {
    scale: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    scale: 2;
    opacity: 0;
  }
}

これで繰り返しの波紋のアニメーションができました。
波紋状に広がるアニメーションのデモページ