Wie wendet man eine CSS-Animationsverzögerung auf alle Iterationen an?

CSS-Animationsverzögerung: Anwendung auf alle Iterationen

Bei der Verwendung von CSS-Animationen mit Verzögerung kann es zu einem Problem kommen, bei dem die Verzögerung nur auftritt Wird auf die erste Iteration angewendet, wodurch die Animation kontinuierlich ohne das gewünschte Intervall wiederholt wird.

Um dieses Problem zu beheben, können Sie ein anderes verwenden Ansatz:

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}

Hier ist der 80 %-Keyframe identisch mit dem Von-Keyframe, wodurch effektiv eine „Verzögerung“ von 80 % der gesamten Animationslänge entsteht.

Wie von einem erfahrenen vorgeschlagen Benutzer, Sie könnten auch den folgenden Ansatz verwenden:

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

Bei dieser Methode wird eine gefälschte Dauer erstellt, um die „Verzögerungen“ an beiden Enden des zu berücksichtigen Animation.

Das obige ist der detaillierte Inhalt vonWie wendet man eine CSS-Animationsverzögerung auf alle Iterationen an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!