Circular wave

by Aliqs Qid

HTML

<div id="container">
  <div class="dot"></div>
  <div class="dot delay1"></div>
  <div class="dot delay2"></div>
</div>

CSS

body{background-color:grey}

#container {
  margin-top: 20px;
  margin-left: 30px;
  position: relative;
  background: #45453f;
}

.dot {
  border: 0px solid transparent;
  background: transparent;
  border-radius: 100%;
  height: 200px;
  width: 200px;
  animation: pulse 3s ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode:forward;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index: 1;
  opacity: 0;
  box-shadow:0 0 20px rgb(255,255,255), 0 0 10px rgb(255,255,255) inset;
}

@keyframes pulse {
 0% {
   -webkit-transform: scale(0);
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 50% {
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

.delay1{animation-delay:1s}
.delay2{animation-delay:2s}