CSS бесконечная пульсирующая анимация

Если вы хотите, чтобы ваша анимация была более плавной, вам нужно сопоставить начальные значения с конечными значениями, чтобы вы не получили этот «дерганый» эффект.

Что-то вроде этого:

@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);
  }
}

Вот еще одна более простая идея, чтобы получить плавный эффект. Вы можете сохранить простую анимацию теней и считать, что псевдоэлемент имеет такую ​​же отложенную анимацию. Хитрость заключается в правильном выборе задержки/длительности.

Я сделал продолжительность 3s (3 элемента), и между каждым из них есть 1s задержка.

body {background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 5rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position:relative;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  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>