html - 圆形波纹效果动画 :Having problem of not getting third circle by using 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>