CSS infinite ripple animation

Question

I want to do infinite ripple animation, but it will become unnatural..

I don't like this sudden change, I want to make animation continue forever. How can I do it?

In the code snippet, I could not display it well for some reason, so the current situation is in JSFiddle.

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

.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(255,255,255, 0.2),
                0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 5rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 4rem rgba(255,255,255, 0.2),
                0 0 0 8rem rgba(255,255,255, 0);
  }
}

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

By the way, I tried also this(▼) with HTML, but the circles overlapped and I could not do it well.. :(

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

Answer 1

If you'd like your animation to be more smooth you need to match the beginning values with the end values so you don't get that 'jumpy' effect.

Something like this:

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba($ripple-color, 0.2),
                0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2),
                0 0 0 8rem rgba($ripple-color, 0);
  }
}

Answer 2

Here is another easier idea to have a smooth effect. You can keep the shadow animation simple and consider pseudo element to have the same delayed animation. The trick is to correctly choose the delay/duration.

I made the duration to be 3s (3 elements) and there is 1s delay between each one.

body {
  background-color: #000;
}

.ripple {
  margin: auto;
  margin-top: 5rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: grid;
  animation: ripple 3s linear infinite;
}

.ripple::before,
.ripple::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  animation: inherit;
  animation-delay: 1s;
}

.ripple::after {
  animation-delay: 2s;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 8rem rgba(255, 255, 255, 0);
  }
}

<div class="ripple"></div>