<span></span>

$green: green;

span {
  display: block;
  width: 100px;
  height: 100px;
  margin: 160px auto;
  animation: ripple 0.6s linear infinite;
  border-radius: 50px;
}

/* ripple effect */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba($green, 0.1),
                0 0 0 20px rgba($green, 0.1),
                0 0 0 40px rgba($green, 0.1),
                0 0 0 60px rgba($green, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba($green, 0.1),
                0 0 0 40px rgba($green, 0.1),
                0 0 0 60px rgba($green, 0.1),
                0 0 0 80px rgba($green, 0);
  }
}