无法仅使用 CSS 创建波浪脉冲动画

Question

I need to create this animation 1:https://i.stack.imgur.com/FVvJQ.gif

原始动画在上面的链接，代码必须是这样的。 你能帮我解决这个问题吗？

我无法制作正确的动画，这是我的完整代码。

这是我当前的代码。 (.................................................. ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ....)

body {
  background-color: #01143B;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  25% {
    opacity: .4;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.8;
  }
}

div {
  background-color: #d4d4d4;
  border-radius: 50%;
  position: absolute;
  margin: auto auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  height: 200px;
}

div:nth-child(1) {
  animation: pulse 3s infinite;
}

div:nth-child(2) {
  animation: pulse 4s infinite .5s;
}

div:nth-child(3) {
  animation: pulse 5s infinite .7s;
}

img {
  position: absolute;
  margin-left: 70px;
  margin-top: 65px;
  text-align: center;
  font-size: 14px;
  line-height: 80px;
  width: 70px;
  height: 70px;
}

.circle {
  background-color: white;
}

<div></div>
<div></div>
<div></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>

Answer 1

我已经为每个单独的 DIV 添加了一个类，以便在内置到设计中时工作。

每个圈子都要有单独的动画计时

希望对你有所帮助

body {
    background-color: #01143B;
}

img {
    position: absolute;
    margin-left: 43px;
    margin-top: 43px;
    text-align: center;
    font-size: 14px;
    line-height: 80px;
    width: 70px;
    height: 70px;
}        

div {
    background-color: #d4d4d4;
    border-radius: 50%;
    position: absolute;
    margin: auto auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.1;
}

@keyframes pulse_1 {
    10% { transform: scale(1); }
    20% { transform: scale(0.95); }
    30% { transform: scale(1);  }
}

.circle {
    background-color: white;
    animation: pulse_1 3s infinite 1s;
    width: 150px;
    height: 150px;
    opacity: 1;
}

@keyframes pulse_ca {
    15% { transform: scale(1); }
    25% { transform: scale(0.95);  }
    35% { transform: scale(1);  }
}

div.ca {
    width: 180px;
    height: 180px;
    animation: pulse_ca 3s infinite 1s;
}

@keyframes pulse_cb {
    20% { transform: scale(1); }
    30% { transform: scale(0.95);  }
    40% { transform: scale(1);  }
}

div.cb {
    width: 210px;
    height: 210px;
    animation: pulse_cb 3s infinite 1s;
}

@keyframes pulse_cc {
    25% { transform: scale(1); }
    35% { transform: scale(0.95);  }
    45% { transform: scale(1);  }
}

div.cc {
    width: 240px;
    height: 240px;
    animation: pulse_cc 3s infinite 1s;
}

<div class="cc"></div>
<div class="cb"></div>
<div class="ca"></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>