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

.gallery  {
  --d: 10s; /* duration */
  
  display: grid;
  width: 220px;
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
  z-index: 2;
  animation: 
    slide var(--d) infinite,
    z-order var(--d) infinite steps(1);
}
.gallery img:last-child {
  animation-name: slide, z-order-last;
}

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i)/$n}*var(--d));
    --r: #{(-20 + random(40))*1deg};
  }
}

@keyframes slide {
    16.67% { transform: translateX(120%) rotate(var(--r))}
    33.33% { transform: translateX(0%) rotate(var(--r))}
}

@keyframes z-order {
    16.67%,
    33.33% { z-index: 1; }
    66.33% { z-index: 2; }
  }
  @keyframes z-order-last {
    16.67%,
    33.33% { z-index: 1; }
    83.33% { z-index: 2; }
  }

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