Wie man so eine animierte Polaroid Galerie mit HTML und CSS erstellen kann

Ihr habt Bilder auf eurer Webseite die ihr gerne modern und interessant euren Webseiten Besuchern zeigen möchtet? Dann habe ich evtl eine coole Idee für euch. Hier mit dieser animierten Polaroid Galerie könnt ihr die Aufmerksamkeit der Leute fesseln.

Dieser Effekt ist nichts anders als die Mischung von 2 einzelnen Effekten. Einerseits haben wir die Bewegungsanimation und andererseits haben wir ein z-index Animation und schwubs hat man diesen coolen Bilder Effekt drin.

Video

HTML

<div class="gallery">
      <img src="images/bild1.jpg" alt="bild 1" />
      <img src="images/bild2.jpg" alt="bild 2" />
      <img src="images/bild3.jpg" alt="bild 3" />
      <img src="images/bild4.jpg" alt="bild 4" />
      <img src="images/bild5.jpg" alt="bild 5" />
    </div>

CSS

:root {
  --seiten-bg: #0255b9;
  --rand: #e5e5e5;

  --dauer: 10s;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  min-height: 100vh;
  place-content: center;
  background: var(--seiten-bg);
  overflow: hidden;
}

.gallery {
  display: grid;
  width: 300px;
}

.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid var(--rand);
  box-shadow: 0 0 4px #0007;
  z-index: 2;

  animation: slide var(--dauer) infinite, z-order var(--dauer) infinite steps(1);
}

.gallery img:last-child {
  animation-name: slide, z-order-last;
}

/* minus zahlen bedeutet - die animation läuft bereits */
.gallery > img:nth-child(1) {
  animation-delay: 0s;
  --drehen: -12deg;
}

.gallery > img:nth-child(2) {
  animation-delay: -2s;
  --drehen: 8deg;
}

.gallery > img:nth-child(3) {
  animation-delay: -4s;
  --drehen: -5deg;
}

.gallery > img:nth-child(4) {
  animation-delay: -6s;
  --drehen: 17deg;
}

.gallery > img:nth-child(5) {
  animation-delay: -8s;
  --drehen: -9deg;
}

@keyframes slide {
  10% {
    transform: translateX(120%) rotate(var(--drehen));
  }
  0%,
  100%,
  20% {
    transform: translateX(0%) rotate(var(--drehen));
  }
}

@keyframes z-order {
  10%,
  20% {
    z-index: 1;
  }
  80% {
    z-index: 2;
  }
}

@keyframes z-order-last {
  10%,
  20% {
    z-index: 1;
  }
  90% {
    z-index: 2;
  }
}