Cannot create wave impulse animation with CSS only

Question

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

Original animation is above link, the code must be like that. Could you please help me with that.

I cannot make correct animation, here is my full code.

Here is my current code. (.........................................................................................................................................................................................................................................................................................................................)

 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

I have added a class to each individual DIV to work when built into a design.

It is necessary to have a separate animation timing for each circle

I hope I've been helpful

 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>