I want to infinite

HTML

<body>
<div class="ripple" style="animation-delay: 0s"></div>
</body>

SCSS

body {font-size: 62.5%; background-color: #000;}

$ripple-color: #fff;
.ripple {
  margin: auto;
  margin-top: 10rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba($ripple-color, 0.2),
                0 0 0 1.5rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba($ripple-color, 0.2),
                0 0 0 4rem rgba($ripple-color, 0.2),
                0 0 0 8rem rgba($ripple-color, 0);
  }
}