steps() CSS-Funktion
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die steps()-Funktion in CSS funktioniert definiert eine Transition, die die Eingabezeit in eine festgelegte Anzahl gleichlanger Intervalle unterteilt. Diese Unterklasse von Step-Funktionen wird manchmal auch als Treppenfunktionen 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 'Stufen'. Es muss eine positive ganze Zahl gröÃer als
0sein, es sei denn, der zweite Parameter istjump-none. In diesem Fall muss es eine positive ganze Zahl gröÃer als1sein. <step-position>-
Gibt an, wann der Sprung zwischen Werten erfolgt. Wenn dieser weggelassen wird, ist der Standardwert
end. Die möglichen Schlüsselwortwerte sind:jump-startoderstart-
Gibt an, dass der erste Schritt zu Beginn der Animation erfolgt.
jump-endoderend-
Gibt an, dass der letzte Schritt am Ende der Animation erfolgt.
jump-none-
Gibt an, dass weder frühe noch späte Sprünge stattfinden.
jump-both-
Gibt an, dass sowohl frühe als auch späte Sprünge stattfinden.
Beschreibung
Die steps()-Funktion teilt die Animationsdauer in gleiche Intervalle.
Zum Beispiel, steps(4, end) teilt die Animation in vier gleiche Intervalle, wobei Werte am Ende jedes Intervalls auÃer der letzten Ãnderung, die am Ende der Animation erfolgt, geändert werden.
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, gibt es insgesamt sechs Schritte, mit zwei Schritten pro Segment.
Das folgende Bild zeigt die Auswirkung verschiedener <step-position> Werte, wann 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
<steps()> =
steps( <integer> , <step-position>? )
<integer> =
<number-token>
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
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
| Spezifikation |
|---|
| CSS Easing Functions Level 1 # step-easing-functions |
Browser-Kompatibilität
Siehe auch
- Andere Easing-Funktionen:
cubic-bezier()undlinear() - CSS Easing-Funktionen-Modul
- Step-Funktion auf Wikipedia