<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);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.