<div class="boxs">
  <div class="box one">
  </div>  
  <div class="box two">
  </div>  
</div>
body {
  padding: 20px;
}
.boxs {
  width: 300px;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  background-color: #e5e5e5;
}
.box {
  width: 30px;
  height: 30px;
}
.one {
  background-color: red;
  animation: slide;
  animation-duration: 2s;
  animation-delay: 0;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;

}
.two {
  background-color: blue;
  animation: slide;
  animation-duration: 2s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes slide {
  0%,100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(calc(300px - 2em));
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.