CSS-Funktion steps()

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>

Gibt die Anzahl gleich langer Intervalle oder „Stufen“ an. Der Wert muss eine positive Ganzzahl größer als 0 sein. Wenn der zweite Parameter jump-none ist, muss er eine positive Ganzzahl größer als 1 sein.

<step-position>

Legt fest, wann der Sprung zwischen den Werten erfolgt. Wird der Parameter weggelassen, gilt standardmäßig end. Mögliche Schlüsselwortwerte sind:

jump-start oder start

Gibt an, dass die erste Stufe zu Beginn der Animation erfolgt.

jump-end oder end

Gibt an, dass die letzte Stufe am Ende der Animation erfolgt.

jump-none

Gibt an, dass weder ein früher noch ein später Sprung erfolgt.

jump-both

Gibt an, dass sowohl ein früher als auch ein später Sprung erfolgt.

Beschreibung

Die Funktion steps() unterteilt die Dauer der Animation in gleich lange Intervalle. Beispielsweise unterteilt steps(4, end) die Animation in vier gleich lange Intervalle. Die Werte ändern sich am Ende jedes Intervalls; die letzte Änderung erfolgt am Ende der Animation.

Wenn eine Animation mehrere Segmente enthält, gilt die angegebene Anzahl von Stufen für jedes Segment. Wenn eine Animation beispielsweise drei Segmente enthält und steps(2) verwendet, gibt es insgesamt sechs Stufen – zwei pro Segment.

Die folgende Abbildung zeigt, wie sich unterschiedliche <step-position>-Werte auf den Zeitpunkt der Sprünge auswirken:

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 Funktion steps()

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

Browser-Kompatibilität

Siehe auch

• Weitere Easing-Funktionen: cubic-bezier() und linear()
• Modul CSS-Easing-Funktionen
• Stufenfunktion auf Wikipedia