css3圆点渐变扩散

<div class="wrapper">
  <div class="circles"></div>
  <div class="circles2"></div>
  <div class="circles3"></div>
</div>

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.circles,
.circles2 {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.circles {
    left:15px;
    top:15px;
     width: 20px;
  height: 20px;
  background-color: #3AB5EC;
  animation: expand 1s ease-out;
}

.circles2 {
  background-color: rgba(58, 181, 236,0.41);
  animation: expand 1s 0.5s infinite linear;
}


@keyframes expand {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}