Wie lässt man CSS-Animationen für immer laufen?

Wie man Bilder in CSS für immer animiert

In diesem Artikel gehen wir auf eine häufig gestellte Frage im Zusammenhang mit 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-Animationen reibungslose Übergänge zwischen ihnen erfolgen sollen. 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, 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;
}

Wenn Sie animation-iteration-count auf unendlich setzen, wird die Animation auf unbestimmte Zeit wiederholt, wodurch ein nahtloser Übergang zwischen Ihren Fotos entsteht .

Das obige ist der detaillierte Inhalt vonWie lässt man CSS-Animationen für immer laufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!