<div class="conteiner">
  <div class="circles-content">
    <div class="circles is-01"></div>
    <div class="circles is-02"></div>
    <div class="circles is-03"></div>
  </div>
</div>
.conteiner{
  width: 100%;
  height: 100%;
  position: relative;
}
.circles-content{
  width: 50%;
  position: relative;
  margin: auto;
}
.circles{
  position: absolute;
  top:0;
  right:0;
  left:0;
  width: 100px;
  height: 100px;
  margin: auto;
  border: 5px solid #ccc;
  border-radius: 50%;
}
.circles.is-01{
  animation: circles01 5s ease-in 0s infinite normal;
}
.circles.is-02{
  animation: circles02 5s ease-in 0s infinite normal;
}
.circles.is-03{
  animation: circles03 5s ease-in 0s infinite normal;
}

@keyframes circles01{
  0%{
    opacity: 0;
    transform: scale(0)
  }
  90%{
    opacity: 1;
    transform: scale(1)
  }
  100%{
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes circles02{
  0%{
    opacity: 0;
    transform: scale(0)
  }
  20%{
    opacity: 0;
    transform: scale(0)
  }
  90%{
    opacity: 1;
    transform: scale(1)
  }
  100%{
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes circles03{
  0%{
    opacity: 0;
    transform: scale(0)
  }
  30%{
    opacity: 0;
    transform: scale(0)
  }
  90%{
    opacity: 1;
    transform: scale(1)
  }
  100%{
    opacity: 1;
    transform: scale(1);
    background: #ccc;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.