Eine neue Möglichkeit, Keyframes -Animationen zu verzögern

Das Erstellen von Pausen zwischen Iterationen in CSS @keyframes -Animationen wird nicht direkt unterstützt. Während animation-delay den Start der Animation verschiebt, erfordert das Einfügen von Verzögerungen zwischen Iterationen Problemumgehungen. In diesem Artikel werden effektive Techniken untersucht und die Einschränkungen früherer Methoden behandelt.

Das Bedürfnis entstand bei der Anpassung einer Shooting Stars-Animation für ein Mitarbeiterportal zum Thema Weltraummotiv. Es wurden weniger Sterne benötigt, um die Ablenkung und die CPU -Belastung zu minimieren und gleichzeitig ein Gefühl der Zufälligkeit beizubehalten.

Einschränkungen bestehender Methoden

Herkömmliche Methoden beinhalten die Anpassung von Keyframes auf einen Bruchteil von 100%, wodurch der endgültige Zustand bis zu 100% beibehalten wird, um eine Pause zu simulieren. Dies ist umständlich, fehleranfällig und erschwert die Logik der Animation.

 @keyframes my-Animation {
  / * Animation (0% bis 50%) */
  0% {Breite: 0; }
  15% {Breite: 100px; }
  / * Pause (50% bis 100%) */
  50%, 100% {Breite: 0; }
}

Ein neuer Ansatz: Bedingte Versteck

Eine überlegene Methode verwendet eine zweite @keyframes , die die Sichtbarkeit während der Pause steuern kann. Dies trennt die Animationslogik von der Pause.

 .Target-of-Animation {
  Animation: My-Awesome-Beboop 1s, Pause zwischen den Kenntnissen 4s;
}

@keyframes my-awesome-Beboop {
  / * Ihre Hauptanimation hier */
}

@keyframes pause-wween-dorreations {
  / * Sichtbar (25%) *//
  0%, 25% {Deckkraft: 1; }
  / * Versteckt (75%) */
  25,1%, 100% {Deckkraft: 0; }
}

Die Pausedauer muss ein Vielfaches der Dauer der Animation sein. Unendlich wiederholende Keyframes starten sofort neu und überschreiben längere Animationen.

Schlüsselersicht: Die Lockerungsfunktionen gelten zwischen definierten Keyframes, nicht von 0% bis 100%. Dies bedeutet, dass die Lockerkurve einzeln auf jede Eigenschaft zwischen aufeinanderfolgenden Keyframes angewendet wird.

Im obigen Beispiel läuft my-awesome-beboop während der Pause mehrmals unsichtbar, bevor sie visuell wieder aufgenommen werden.

So gilt dies für die Animation der Shooting Stars:

Aufrechterhaltung der Sichtbarkeit während der Pausen

Wenn die Animation während der Pausen sichtbar bleiben muss, kann ein zweites @keyframes -Set der Bewegung der primären Animation entgegenwirken. Wenn beispielsweise translateX verwendet wird, ist es left oder margin-left animieren, um die Bewegung zu neutralisieren.

Beispiele hierfür sind die Pause unter Verwendung von transform-origin oder entgegenwirkenden translateX mit left . Pausing translateX für mehrere Iterationen erfordert komplexere Keyframes:

 / * Pause für drei Iterationen */
@Keyframes Slide-Links-Pause {
  25%, 50%, 75%{links: 0; }
  37,5%, 62,5%, 87,5%{links: -100px; }
  100% {links: 0; }
}

Minderjähriger Jitter kann aufgrund widersprüchlicher Animationen auftreten.

Abschluss

Das Verstecken des Elements während Pausen oder dem entgegenwirkenden transform bietet die beste Leistung. Die Manipulation von Eigenschaften wie left , margin oder width ist rechnerisch intensiver als die Anpassung opacity .

Kredit an Yusuke Nakaya für die Original -Shooting Stars Animation.

Das obige ist der detaillierte Inhalt vonEine neue Möglichkeit, Keyframes -Animationen zu verzögern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!