CSS Keyframe-Animation mit Verzögerung zwischen den Iterationen

Sagen wir, du möchtest, dass eine Animation 1 Sekunde lang läuft, dann aber 4 Sekunden pausiert, bevor sie erneut ausgeführt wird. Das klingt einfach, oder? Es stellt sich heraus, dass es nicht ganz so einfach ist, aber machbar. Du musst es vortäuschen.

Nein

Es gibt die Eigenschaft animation-delay, aber das hilft uns hier nicht weiter. Dies verzögert den *Beginn* der Animation, aber nachdem sie gestartet ist, läuft sie kontinuierlich.

Lösung: Keyframes mit keinen Änderungen

Du benötigst ein wenig Kopfrechnen.

Wenn du also die Keyframe-Animation aufrufst, verwendest du die Gesamtdauer in Sekunden.

.mover {
  animation: move 5s infinite;
}

Aber jetzt werden unsere @keyframes 5 Sekunden lang laufen.

@keyframes move {
  /* this will happen over 5 seconds */
}

Damit unsere Animation nur 1 Sekunde lang läuft, musst du die Änderungen über 1/5 der Zeit, also 20%, stattfinden lassen. Ausführlich würde das so aussehen:

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  /* Finish changes by here */
  20% {
    transform: translate(200px, 0);
  }

  /* Between 20% and 100%, nothing changes */
  100% {
    transform: translate(200px, 0);
  }
}

Wir können mit weniger Code schreiben, da die 0%-Werte angenommen werden und du Keyframe-Schritte mit Kommas trennen kannst.

@keyframes move {
  20%, 100% {
    transform: translate(200px, 0);
  }
}

Du kannst die Keyframes so ausgefallen gestalten, wie du möchtest. Du musst nur daran denken, dass alles zwischen dem letzten Schritt deiner Animation und 100% exakt gleich eingestellt ist.

Demo

Sieh dir den Pen Keyframe mit Animationsverzögerung zwischen Iterationen von Chris Coyier (@chriscoyier) auf CodePen an.