<div class="gallery">
  <img src="https://picsum.photos/id/104/400/400" alt="a dream catcher">
  <img src="https://picsum.photos/id/1082/400/400" alt="a piano">
  <img src="https://picsum.photos/id/158/400/400" alt="a live concert">
  <img src="https://picsum.photos/id/234/400/400" alt="Paris">
</div>

.gallery  {
  --d: 6s; /* duration */
  
  display: grid;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,#0000,#000 10% 90%,#0000);
}
.gallery > img {
  grid-area: 1/1;
  height: 200px;
  aspect-ratio: 1.5;
  object-fit: cover;
  animation: r var(--d) linear infinite;
}

.gallery > img:nth-child(2) {animation-delay: calc(1*var(--d)/4)}
.gallery > img:nth-child(3) {animation-delay: calc(2*var(--d)/4)}
.gallery > img:nth-child(4) {animation-delay: calc(3*var(--d)/4)}

@keyframes r {
  75%    {transform: translate(-300%)}
  75.01% {transform: translate( 100%)}
}


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