【css】アニメーションする円形レーダー

位置情報を地図上に表示する際に作成したものを記載します！

See the Pen OvmjWV by sjnya (@sjnya) on CodePen.

.point {
  width: 40px;
  height: 40px;
  background: rgba(25, 118, 210, 0.4);
  border-radius: 50%;
  animation: blink 1s ease-in-out infinite none;
}
@keyframes blink {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(187, 222, 251, 0.3);
  }
}