01.img-loop.css

.loop-area{
  width: 240px;
  margin: 0 auto;
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
  overflow: hidden;
}
.loop-box{
  width: 480px;
}
.loop-group{
  display: inline-block;
}
.loop-child{
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.loop-group.g1{
  animation: loop1 6s linear -3s infinite normal;
}
.loop-group.g2{
  animation: loop2 6s linear 0s infinite normal;
}
.loop-box:hover>.loop-group{
  animation-play-state: paused;
}
@keyframes loop1 {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  100%{
    transform: translateX(-200%);
  }
}
@media screen and (min-width:481px) {
  .loop-area{
    width: 450px;
  }
  .loop-box{
    width: 900px;
  }
  .loop-child{
    width: 150px;
    height: 150px;
  }
}

02.img-loop.html

<div class="loop-area">
  <div class="loop-box">
    <div class="loop-group g1">
      <img src="path/to/thumb001.jpg" alt="cat001" class="loop-child">
      <img src="path/to/thumb002.jpg" alt="cat002" class="loop-child">
      <img src="path/to/thumb003.jpg" alt="cat003" class="loop-child">
    </div>
    <div class="loop-group g2">
      <img src="path/to/thumb004.jpg" alt="cat004" class="loop-child">
      <img src="path/to/thumb005.jpg" alt="cat005" class="loop-child">
      <img src="path/to/thumb006.jpg" alt="cat006" class="loop-child">
    </div>
  </div>
</div>