Beeinflusst CSS „animation-delay' alle Iterationen einer wiederholten Animation?

CSS-Animationsverzögerungsproblem bei wiederholten Animationen

Kontext:

Das Erstellen von CSS-Animationen kann ein leistungsstarkes Werkzeug zum Hinzufügen visueller Elemente sein Effekte auf Webseiten. Das Festlegen der Eigenschaft „animation-delay“ zum Verzögern des Starts einer Animation kann jedoch zu unerwartetem Verhalten führen, wenn die Animation auf unendliche Wiederholung eingestellt ist.

Frage:

Ist Es kann sichergestellt werden, dass die Eigenschaft „animation-delay“ für alle Iterationen einer wiederholten CSS-Animation gilt und nicht nur für die erste Iteration?

Antwort:

Nein, die Eigenschaft „animation-delay“ kann nicht auf alle Iterationen einer wiederholten CSS-Animation angewendet werden. Sobald die anfängliche Verzögerung auf die erste Iteration angewendet wurde, beginnen nachfolgende Iterationen sofort, auch wenn eine Animationsverzögerung angegeben ist.

Problemumgehung:

Eine häufige Problemumgehung besteht darin, einen neuen Keyframe mit einem beliebigen Prozentsatz (z. B. 80 %) zu erstellen, der mit dem ursprünglichen Keyframe identisch ist. Dadurch entsteht effektiv eine Verzögerung, indem die Animation mit einem nicht sichtbaren Zeitraum aufgefüllt wird. Allerdings kann dieser Ansatz zu längeren Animationen führen, wenn die Verzögerung gewünscht ist.

Ein anderer Ansatz besteht darin, mehrere Keyframes mit unterschiedlicher Dauer zu verwenden, um die gewünschte Verzögerung zu erzeugen. Um beispielsweise eine Verzögerung von 4 Sekunden gefolgt von einer Animation von 1 Sekunde zu erreichen, könnte man die folgenden Keyframes verwenden:

@keyframes my-animation {
  0% { ... }
  80% { ... }
  90% { ... }
  100% { ... }
}

Das Festlegen der Animationsdauer auf 5 Sekunden würde zu einer Verzögerung von 4 Sekunden führen bevor die Animation beginnt.

Einschränkung:

Es ist erwähnenswert, dass die Die Eigenschaft „animation-delay“ gilt für die gesamte Animation, einschließlich aller Iterationen. Wenn Sie daher unterschiedliche Verzögerungen für verschiedene Elemente benötigen, die dieselbe Animation verwenden, müssen Sie alternative Ansätze verwenden, z. B. die Erstellung separater Animationen mit unterschiedlichen Verzögerungen.

Das obige ist der detaillierte Inhalt vonBeeinflusst CSS „animation-delay' alle Iterationen einer wiederholten Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!