steps()

Die Funktion akzeptiert die folgenden Parameter:

<integer>

Gibt die Anzahl der gleich weit entfernten Intervalle oder 'Schritte' an. Es muss eine positive ganze Zahl größer als 0 sein, es sei denn, der zweite Parameter ist jump-none, in welchem Fall es eine positive ganze Zahl größer als 1 sein muss.

<step-position>

Gibt an, wann der Sprung zwischen den Werten erfolgt. Wenn weggelassen, ist der Standardwert end. Die möglichen Schlüsselwortwerte sind:

jump-start oder start

Gibt an, dass der erste Schritt erfolgt, wenn die Animation beginnt.

jump-end oder end

Gibt an, dass der letzte Schritt erfolgt, wenn die Animation endet.

jump-none

Gibt an, dass weder frühe noch späte Sprünge erfolgen.

jump-both

Gibt an, dass sowohl frühe als auch späte Sprünge erfolgen.

Die steps() Funktion teilt die Animationsdauer in gleiche Intervalle. Beispielsweise teilt steps(4, end) die Animation in vier gleichmäßige Intervalle, wobei sich die Werte am Ende jedes Intervalls ändern, außer bei der letzten Änderung, die am Ende der Animation erfolgt.

Wenn eine Animation mehrere Segmente enthält, gilt die angegebene Anzahl von Schritten auf jedes Segment. Wenn eine Animation beispielsweise drei Segmente hat und steps(2) verwendet wird, 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)

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

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)

• Andere Timing-Funktionen: cubic-bezier() und linear()
• CSS-Timing-Funktionen Modul
• Stufenfunktion auf Wikipedia