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;
}

user_10968134 · Answer

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;
}

Cannot create wave impulse animation with CSS only

1 Answers