css-animation-delay

HTML

<div class="circle1">
</div>
<div class="circle2">
</div>
<div class="circle3">
</div>

CSS

.circle1 {
  width: 200px;
  height: 200px;
  background: #29b6f6;
  border-radius: 50%;
  position: absolute;
}

.circle2 {
  width: 150px;
  height: 150px;
  background: #ffeb3b;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 32px
}

.circle3 {
  width: 100px;
  height: 100px;
  background: #ef5350;
  border-radius: 50%;
  position: absolute;
  top: 55px;
  left: 55px;
}

@keyframes circles {
  0% {
    transform: scale(0)
  }
  100% {
    display: block;
    transform: scale(1)
  }
}

.circle1 {
  animation: circles 4s 2s ease
}

.circle2 {
  animation: circles 4s 6s ease
}

.circle3 {
  animation: circles 4s 8s ease
}