Circle Ripple Effect Animation: Проблема с невозможностью получить третий круг с помощью CSS

Question

У меня есть задание по анимации пульсаций с тремя кругами, когда я не получаю третий круг. Я много пробовал, но идут только два круга, есть ли возможность использовать еще один ключевой кадр и получить третий круг, может кто-нибудь указатьмне в правильном направлении, спасибо заранее.

body {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
}

html {
  height: 100%;
}

.ripple {
 position: relative;
  height: 100px;
  width: 100px;
}
.ripple img {
  position: relative;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.ripple::before,
.ripple::after {
  animation: pulse 2s linear infinite;
  border: #55443D solid 3px;
  border-radius: 50%;
  box-sizing: border-box;
  content: ' ';
  height: 140%;
  left: -20%;
  opacity: .6;
  position: absolute;
  top: -20%;
  transform: scale(0.714);
  width: 140%;
  z-index: 1;
}

.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
  animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after {  animation-delay: .5s; }

@keyframes cycle-colors {
  0%  { border-color: #55443D; }
  25% { border-color: #55443D; }
  50% { border-color: #55443D; }
  75% { border-color: #55443D; }
  100% { border-color: #55443D; }
}

@keyframes pulse {
  to {
    opacity: 0;
    transform: scale(1);
  }
}

<div class="ripple">
  <img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>

Answer 1

body {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
}

html {
  height: 100%;
}

.ripple {
  position: relative;
  height: 100px;
  width: 100px;
}

.ripple img {
  position: relative;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.ripple span,
.ripple::before,
.ripple::after {
  animation: pulse 2s linear infinite;
  border: #55443D solid 3px;
  border-radius: 50%;
  box-sizing: border-box;
  content: ' ';
  height: 140%;
  left: -20%;
  opacity: .6;
  position: absolute;
  top: -20%;
  transform: scale(0.714);
  width: 140%;
  z-index: 1;
  pointer-events:none;
}

.ripple span {
  animation-delay: .5s;
}

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

.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
  animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}

.ripple:hover span {
  animation-delay: .25s;
}

.ripple:hover::after {
  animation-delay: .5s;
}

@keyframes cycle-colors {
  0% {
    border-color: #55443D;
  }
  25% {
    border-color: #55443D;
  }
  50% {
    border-color: #55443D;
  }
  75% {
    border-color: #55443D;
  }
  100% {
    border-color: #55443D;
  }
}

@keyframes pulse {
  to {
    opacity: 0;
    transform: scale(1);
  }
}

<div class="ripple">
  <img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>