圆纹效果动画：使用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>