Wie kann ich konsistente Verzögerungen bei wiederholten CSS-Animationen erreichen?

Wiederholte Animationen mit CSS gestalten: Animationsverzögerungen beheben

Bei der Verwendung von CSS-Animationen ist es wichtig, die Anzeige wiederholter Effekte effektiv zu steuern. Ein häufiges Problem tritt auf, wenn sich die Eigenschaft „animation-delay“ nur auf die erste Iteration auswirkt und dazu führt, dass die Animation kontinuierlich und ohne Pause wiederholt wird.

Um dieses Problem zu beheben, besteht eine Methode darin, eine neue Animation zu erstellen, um die Verzögerung zu emulieren. Im bereitgestellten Code verzögert die „expbarshine“-Animation den Farbverlaufsdurchlauf um 80 % und simuliert so effektiv die gewünschte Pause. Dieser Ansatz kann jedoch die Gesamtdauer der Animation verändern.

Eine alternative Lösung, die von einem anderen Benutzer vorgeschlagen wurde, besteht in der Verwendung eines neutralen Zwischen-Keyframes. Im folgenden Codeausschnitt erzielt die „Schwenk“-Animation ähnliche Ergebnisse, ohne die Gesamtdauer zu ändern:

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

Durch die Definition eines neutralen Keyframes bei 90 % wird die Pause effektiv auf alle Iterationen angewendet, ohne die Animation zu beeinträchtigen Dauer. Dieser Ansatz bietet mehr Kontrolle und Flexibilität und ermöglicht konsistente Verzögerungen zwischen Elementen, die dieselbe Animation verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich konsistente Verzögerungen bei wiederholten CSS-Animationen erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!