Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid sint provident rem distinctio quasi ipsa dicta aliquam modi, ipsam odio quod placeat dolores. Doloribus odit totam obcaecati eos adipisci. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id enim reprehenderit ipsa rerum in, distinctio nihil similique obcaecati quae quo quos mollitia saepe iusto repudiandae nesciunt sit expedita odit sint! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis, corrupti sed sunt assumenda fugiat officia libero repellat debitis eos quam minus, delectus commodi laudantium neque harum sit impedit nemo autem?

This is file  HTML  :

<div class="all">
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
</div>

This is file  CSS  :

body {
  background-color: #262626;
}

.all {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  height: 120px;
  margin: 0 20px;
  background-color: blue;
  position: relative;
}

  .container .circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      left: calc(50% - 5px);
      top: 0;
  }

      .container .circle:nth-child(1) {
          top: 0;
          animation: anim_a 2s infinite ease-in-out;
          background-color: #ff0000;
      }

      .container .circle:nth-child(2) {
          top: calc(100% - 5px);
          transform: scale(1.5);
          animation: anim_b 2s infinite ease-in-out;
          background-color: #e1e1e1;
      }

@keyframes anim_a {
  0% {
      top: 0;
      z-index: 50;
  }

  20% {
      transform: scale(1.5);
  }

  50% {
      top:100%;
  }

  50.1% {
      z-index: 0;
  }

  75% {
      transform: scale(0.8);
      z-index: 0;
  }

  100% {
      top: 0;
      z-index: 2;
  }
}

@keyframes anim_b {
  0% {
      top: calc(100% - 5px);
      z-index: 1;
  }

  25% {
      transform: scale(0.8);
  }

  50% {
      top: 0;
  }

  50.1% {
      z-index: 2;
  }

  80% {
      transform: scale(1.5);
      z-index: 2;
  }

  100% {
      top: calc(100% - 5px);
      z-index: 0;
  }
}

.container:nth-child(2) .circle {
  animation-delay: -0.1s;
}

.container:nth-child(3) .circle {
  animation-delay: -0.2s;
}

.container:nth-child(4) .circle {
  animation-delay: -0.3s;
}

.container:nth-child(5) .circle {
  animation-delay: -0.4s;
}

.container:nth-child(6) .circle {
  animation-delay: -0.5s;
}

.container:nth-child(7) .circle {
  animation-delay: -0.6s;
}

.container:nth-child(8) .circle {
  animation-delay: -0.7s;
}

.container:nth-child(9) .circle {
  animation-delay: -0.8s;
}

.container:nth-child(10) .circle {
  animation-delay: -0.9s;
}

.container:nth-child(11) .circle {
  animation-delay: -1s;
}

.container:nth-child(12) .circle {
  animation-delay: -1.1s;
}