Wie kann ich CSS3-Animationen auf unbestimmte Zeit wiederholen?

CSS3-Animationen unbegrenzt wiederholen

CSS3-Animationen bieten eine praktische Möglichkeit, Elemente auf einer Webseite zu animieren. Standardmäßig werden diese Animationen jedoch nur einmal abgespielt. Damit Animationen kontinuierlich in einer Schleife ablaufen, müssen wir eine bestimmte CSS-Eigenschaft verwenden.

Herausforderung

Sie möchten, dass eine Reihe von Bildern kontinuierlich ein- und ausgeblendet wird, ohne dass dies erforderlich ist Laden Sie die Seite neu.

Lösung

Der Schlüssel zum Ermöglichen von Endlosschleifen von CSS3 Animationen liegen in der Eigenschaft „animation-iteration-count“. Diese Eigenschaft gibt an, wie oft eine Animation wiederholt wird, bevor sie stoppt. Indem wir diese Eigenschaft auf „unendlich“ setzen, können wir den Browser anweisen, die Animation auf unbestimmte Zeit auszuführen.

In Ihrem bereitgestellten Code haben Sie mehrere Bildcontainer mit CSS-Klassen definiert. Um eine kontinuierliche Schleife zu ermöglichen, fügen Sie die folgende Zeile zu den CSS-Regeln für jedes Bild hinzu:

animation-iteration-count: infinite;

Hier ist das aktualisierte CSS mit der hinzugefügten Eigenschaft:

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...

Durch die Einstellung „animation-iteration-“ Wenn Sie für jedes Bild bis unendlich zählen, haben Sie sichergestellt, dass sich die Einblendanimation endlos wiederholt und nahtlos und ohne Unterbrechungen zwischen den Bildern übergeht. Dadurch entsteht die Illusion einer kontinuierlichen Animationsschleife.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-Animationen auf unbestimmte Zeit wiederholen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!