CSS infinite ripple animation - html

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>