JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="gallery">
  <img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img1u6qw3ad64bz8nsedrd2wddgrax5wew.jpg">
  <img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgl7nga0eot9mfzdog0r7hja2avzx8jzf.jpg">
  <img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgodr8vukcwco0h34p0ngc84462vs454j.jpg">
  <img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgj1udos782ybmzugwd1ltkozc9zxj3gz.jpg">
  <img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img4gb8ou3p2t5vv347i6lopc13wtm82qw.jpg">
</div>

SCSS

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

.gallery  {
  --d: 12s; /* duration */
  
  display: grid;
  width: 240px;
}

.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 9/16;
  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 {
  #{50/$n}%  {transform: translateX(120%) rotate(var(--r))}
  0%,
  100%,
  #{100/$n}% {transform: translateX(0%)   rotate(var(--r))}
}

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% {z-index: 1}
  #{100 - 100/$n}% {z-index: 2}
}

@keyframes z-order-last {
  #{50/$n}%,
  #{100/$n}% {z-index: 1}
  #{100 - 50/$n}% {z-index: 2}
}

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