<div class="gallery">
  <img src="https://picsum.photos/id/199/400/300" alt="the beach">
  <img src="https://picsum.photos/id/1011/400/300" alt="a girl doing kayak">
  <img src="https://picsum.photos/id/124/400/300" alt="a small boat in the sea">
  <img src="https://picsum.photos/id/235/400/300" alt="a mountain">
  <img src="https://picsum.photos/id/423/400/300" alt="a forest">
</div>

$n:5; /* number of images*/

.gallery  {
  --d: 10s; /* duration */
  
  display: grid;
  overflow: hidden;
  width: 380px;
  -webkit-mask: linear-gradient(90deg,#0000,#000 10% 90%,#0000);
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  animation: r var(--d) linear infinite;
}
@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {animation-delay: calc(#{(1 - $i)/$n}*var(--d))}
}
@keyframes r {
  #{100*($n - 1)/$n}% {transform: translate((1 - $n)*100%)}
  #{100*($n - 1)/$n + .01}% {transform: translate(100%)}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #ECD078;
}