Wie man Bilder in CSS für immer animiert

In diesem Artikel gehen wir auf eine häufig gestellte Frage rund um CSS3-Animationen ein: sie auf unbestimmte Zeit laufen zu lassen.

Die Herausforderung

Angenommen, Sie haben eine Reihe von Fotos, die Sie als Diashow anzeigen möchten, wobei mithilfe von CSS3 reibungslose Übergänge zwischen ihnen erfolgen sollen Animation. Sie sind jedoch mit dem Standardverhalten nicht zufrieden, bei dem das letzte Foto ausgeblendet und die Seite neu geladen wird, wodurch die Diashow effektiv neu gestartet wird.

Die Lösung

Um eine nahtlose Schleifenanimation zu erreichen, benötigen wir um das CSS zu ändern, um anzugeben, dass die Animation kontinuierlich iterieren soll. Standardmäßig sind CSS-Animationen so eingestellt, dass sie nur einmal ausgeführt werden.

Die Schlüsseleigenschaft, die wir unserem CSS hinzufügen werden, ist animation-iteration-count. Hier ist ein Beispiel:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

Durch die Einstellung von animation-iteration-count auf unendlich wird die Animation auf unbestimmte Zeit wiederholt, wodurch ein nahtloser Übergang zwischen Ihren Fotos entsteht.