SOURCE

<style>
*{
    box-sizing:border-box;
    padding:0;
}
.container {
  width: 50px;
  height: 50px;
  border:1px solid purple;
  overflow:hidden;
  
}
.box{
    transform:translateX(0px);
    animation:move  1s steps(3,end) infinite;
}
@keyframes move{
    0%{
       transform:translateX(0px);
    }
    100%{
        transform:translateX(-150px);
    }
}
 
.item {
  position:absolute;
  width: 50px;
  height: 50px;

}


.item1{
    background-color:red;
    transform:translateX(0px);
}
.item2{
    background-color:green;
     transform:translateX(50px);
    
}
.item3{
    background-color:blue;
    transform:translateX(100px);
    
}
 


</style>

<div class="container">
    <div class="box">
         <div class="item item1" style="--i: 1"></div>
        <div class="item item2" style="--i: 2"></div>
        <div class="item item3" style="--i: 16"></div>
    </div>
</div>