<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

body {
  display:flex;
  justify-content:center;
  margin-top:5rem;  
}


.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #4b9cdb;
}


.container .dot:nth-last-child(1) {
  animation: jumpingAnimation 0.6s 0.1s ease-in infinite;
}
.container .dot:nth-last-child(2) {
  animation: jumpingAnimation 0.6s 0.2s ease-in infinite;
}
.container .dot:nth-last-child(3) {
  animation: jumpingAnimation 0.6s 0.3s ease-in infinite;
}

@keyframes jumpingAnimation {
  0 {
    transform: translate3d(0, 0,0);
  }
  50% {
    transform: translate3d(0, 15px,0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}