steps()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Die steps()
CSS Funktion definiert eine Transition, die die Eingabezeit in eine angegebene Anzahl gleich langer Intervalle unterteilt. Diese Unterklasse von Schritt-Funktionen wird manchmal auch als Treppen-Funktionen bezeichnet.
Syntax
/* Different intervals */
steps(2, end)
steps(4, jump-end)
steps(12, end)
/* Different jump positions */
steps(3, jump-start)
steps(3, jump-end)
steps(3, jump-none)
steps(3, jump-both)
Parameter
Die Funktion akzeptiert die folgenden Parameter:
<integer>
-
Repräsentiert die Anzahl der gleichmäßigen Intervalle oder 'Schritte'. Es muss eine positive ganze Zahl größer als
0
sein, es sei denn, der zweite Parameter istjump-none
, in diesem Fall muss es eine positive ganze Zahl größer als1
sein. <step-position>
-
Gibt an, wann der Sprung zwischen den Werten erfolgt. Wird es weggelassen, ist der Standardwert
end
. Die möglichen Schlüsselwortwerte sind:jump-start
oderstart
-
Zeigt an, dass der erste Schritt erfolgt, wenn die Animation beginnt.
jump-end
oderend
-
Zeigt an, dass der letzte Schritt erfolgt, wenn die Animation endet.
jump-none
-
Zeigt an, dass keine frühen oder späten Sprünge erfolgen.
jump-both
-
Zeigt an, dass sowohl frühe als auch späte Sprünge erfolgen.
Beschreibung
Die steps()
Funktion unterteilt die Animationsdauer in gleiche Intervalle.
Zum Beispiel teilt steps(4, end)
die Animation in vier gleiche Intervalle, wobei die Werte am Ende jedes Intervalls außer der letzten Änderung, die am Ende der Animation auftritt, wechseln.
Wenn eine Animation mehrere Segmente enthält, gilt die angegebene Anzahl von Schritten für jedes Segment. Zum Beispiel, wenn eine Animation drei Segmente hat und steps(2)
verwendet werden, gibt es insgesamt sechs Schritte, mit zwei Schritten pro Segment.
Das folgende Bild zeigt die Auswirkungen verschiedener <step-position>
Werte, wenn die Sprünge auftreten:
steps(2, jump-start) /* Or steps(2, start) */
steps(4, jump-end) /* Or steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)
Formale Syntax
Beispiele
Verwendung der steps() Funktion
Die folgenden steps()
Funktionen sind gültig:
/* Five steps with jump at the end */
steps(5, end)
/* Two steps with jump at the start */
steps(2, start)
/* Using default second parameter */
steps(2)
Die folgenden steps()
Funktionen sind ungültig:
/* First parameter must be an <integer>, not a real value */
steps(2.0, jump-end)
/* Number of steps must be positive */
steps(-3, start)
/* Number of steps must be at least 1 */
steps(0, jump-none)
Spezifikationen
Specification |
---|
CSS Easing Functions Level 1 # step-easing-functions |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
steps() with start , end or no direction | ||||||||||||
jump- keywords for steps() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Andere Easing-Funktionen:
cubic-bezier()
undlinear()
- Sprungfunktion auf Wikipedia