CSS steps() Funktion

Definition und Verwendung

CSS steps() Funktion zur Erstellung von Schrittzeitfunktionen für Animationen.

Diese Funktion teilt die Animationsdauer in gleich lange Intervalle der angegebenen Anzahl (n) auf. Zum Beispiel: Wenn n 4 beträgt, wird die Animation in 4 Teile aufgeteilt. Es wird die Dauer von 0% bis 100% in 4 Teile aufgeteilt;分别是 0%-25%、25%-50%、50%-75% 和 75%-100%。

Beispiel

Erstellen Sie verschiedene Schrittzeitfunktionen für die Animation:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Versuchen Sie es selbst

CSS Syntax

steps(n, step-position)
Wert Beschreibung
n Erforderlich. Bestimmen Sie die Anzahl der Schritte/Intervalle.
step-position

Optional. Zeit der Sprünge zwischen den Werten angeben. Verwenden Sie eines der folgenden Schlüsselwörter:

  • jump-start oder start: Der erste Schritt erfolgt am Anfang der Animation
  • jump-end oder end: Der letzte Schritt erfolgt am Ende der Animation. end ist der Standardwert
  • jump-none: Keine vorzeitigen oder verzögerten Sprünge
  • jump-both: Gleichzeitig vorzeitige und verzögerte Sprünge

Technische Details

Version: CSS Easing Functions Level 1

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionen der Browser dar, die diese Funktion vollständig unterstützen.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Verwandte Seiten

Referenz:CSS-animation-Attribut

Referenz:CSS-animation-timing-function-Attribut