<div class="container">
  <span class="ripple r1"></span>
  <span class="ripple r2"></span>
  <span class="ripple r3"></span>
  <span class="ripple r4"></span>
  <span class="ripple r5"></span>
  <span class="ripple r6"></span>
</div>

body{
  margin: 0;
  padding: 0;
  background: #3498db;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotateX(70deg);
}
.ripple{
  position: fixed;
  top: 0;
  transform: translateX(-50%);

  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: ripple 4s linear infinite;
}
.r2{
  animation-delay: 0.8s;
}
.r3{
  animation-delay: 1.6s;
}
.r4{
  animation-delay: 2.4s;
}
.r5{
  animation-delay: 3.2s;
}
.r6{
  animation-delay: 4s;
}

@keyframes ripple {
  from{
    border: 4px solid #8e44ad;
    background: #9b59b670;
  }
  to{
    border: 0px solid #8e44ad;
    background: #9b59b670;
    width: 400px;
    height: 400px;
    top: 20px;
    opacity: 0;
  }
}

/*
* https://www.darkcode.info/2018/12/ripple-animation-using-only-html-css.html
*/