Wie kann ich eine konsistente Verzögerung zwischen CSS-Animationsiterationen hinzufügen?

CSS-Animationsverzögerung: Verlängern der Pause zwischen Iterationen

Um eine sich wiederholende Animation mit einer konsistenten Verzögerung zwischen den Iterationen zu erreichen, statt einer solchen Berücksichtigen Sie die folgenden Methoden, wenn sie nur auf die erste Iteration angewendet werden:

1. Animationsdauer anpassen:

Eine Problemumgehung besteht darin, die gewünschte Verzögerung in die Animationsdauer einzubeziehen. Dazu gehört die Berechnung der tatsächlichen Dauer, die die Animation dauern sollte (einschließlich der Verzögerung), und das anschließende Festlegen der Eigenschaft „animation-duration“ entsprechend. Zum Beispiel:

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

In diesem Beispiel hat die Animation eine tatsächliche Dauer von 5 Sekunden mit einer Verzögerung von 1 Sekunde.

2. Verwenden Sie separate Animationen für die Verzögerung und den Effekt:

Ein anderer Ansatz besteht darin, separate Animationen für die Verzögerung und den eigentlichen Effekt zu erstellen. Diese Methode bietet mehr Flexibilität bei der Steuerung der Verzögerung unabhängig von der Animation selbst. So können Sie dies erreichen:

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

In diesem Fall erhöht die „Verzögerungs“-Animation die Deckkraft schrittweise über 4 Sekunden von 0 auf 1, wodurch ein Einblendeffekt entsteht. Die „Glanz“-Animation läuft dann unbegrenzt und erzeugt den beabsichtigten schwungvollen Farbverlauf.

3. Verwenden Sie Herstellerpräfixe:

In einigen Fällen kann es zu Browserkompatibilitätsproblemen mit der Eigenschaft „animation-delay“ kommen. Um die Kompatibilität sicherzustellen, wird empfohlen, Herstellerpräfixe wie „-webkit-“ oder „-moz-“ zusammen mit der Standardeigenschaft anzugeben. Zum Beispiel:

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

Zusätzlicher Hinweis:

Der bereitgestellte Code aus der Antwort mit „@-webkit-keyframes“ ist für ältere Versionen von WebKit geeignet. Es wird im Allgemeinen nicht empfohlen, sich in der modernen Entwicklung auf Herstellerpräfixe zu verlassen, es sei denn, dies ist aus Kompatibilitätsgründen erforderlich.

Das obige ist der detaillierte Inhalt vonWie kann ich eine konsistente Verzögerung zwischen CSS-Animationsiterationen hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!