Warum wirkt sich CSS „animation-delay' manchmal nur auf die erste Animationsiteration aus?

Animationsverzögerungen in CSS verstehen

Die Eigenschaft „animation-delay“ ist ein wichtiges CSS-Attribut, das die Verzögerung vor dem Start einer Animation steuert. In bestimmten Szenarien gilt dies jedoch möglicherweise nur für die erste Iteration einer Animation, sodass nachfolgende Iterationen davon nicht betroffen sind.

Betrachten Sie beispielsweise den folgenden Code:

@keyframes barshine {
  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%);}
  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%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

In diesem Beispiel Die Animationsverzögerung von 4 Sekunden wird nur auf die erste Schleife der Animation angewendet. Anschließend wird die Glanzanimation ohne Verzögerung auf unbestimmte Zeit fortgesetzt.

Alternativer Ansatz

Eine Alternative zur Verwendung der Animationsverzögerung besteht darin, einen Zwischenschritt innerhalb der Animations-Keyframes einzuführen. Zum Beispiel:

@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%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

Diese Technik verlängert effektiv die Animationsdauer, um die gewünschte Verzögerung zu berücksichtigen (in diesem Fall 80 % der Gesamtdauer). Dieser Ansatz kann jedoch das Erscheinungsbild der Animation verändern.

Browserübergreifende Kompatibilität

Es ist wichtig zu beachten, dass das Verhalten der Animationsverzögerung je nach Browser unterschiedlich sein kann . Einige Browser wenden die Verzögerung möglicherweise konsistent über alle Iterationen hinweg an, während andere die Verzögerung möglicherweise bei jeder nachfolgenden Schleife zurücksetzen. Daher ist es oft notwendig, browserspezifische Problemumgehungen einzusetzen.

Das obige ist der detaillierte Inhalt vonWarum wirkt sich CSS „animation-delay' manchmal nur auf die erste Animationsiteration aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!