Active ping

  <div class="icon">

  </div>

.icon,

.icon::before,

.icon::after {

  left: 50%;

  top: 22%;

  margin-left: -20px;

  margin-top: -9px;

  background: #02AEFF;

  position: absolute;

  width: 40px;

  height: 40px;

  border-radius: 50%;

}

.icon::before {

  content: "";

  animation: bounce 1.5s infinite;

}

.icon::after {

  content: "";

  animation: bounce 1.5s -0.4s infinite;

}

@keyframes bounce {

  0% {

    transform: scale(0.8);

    -webkit-transform: scale(0.8);

    opacity: 1;

  }

  100% {

    transform: scale(2);

    -webkit-transform: scale(2);

    opacity: 0;

  }

}

@-webkit-keyframes bounce {

  0% {

    transform: scale(0.8);

    -webkit-transform: scale(0.8);

    opacity: 1;

  }

  100% {

    transform: scale(2);

    -webkit-transform: scale2);

    opacity: 0;

  }

}