steps()

Die Funktion akzeptiert die folgenden Parameter:

<integer>

Repräsentiert die Anzahl gleichmäßiger Intervalle oder 'Schritte'. Es muss eine positive Ganzzahl größer als 0 sein, es sei denn, der zweite Parameter ist jump-none, in diesem Fall muss es eine positive Ganzzahl größer als 1 sein.

<step-position>

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

jump-start oder start

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

jump-end oder end

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

jump-none

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

jump-both

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

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

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, 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)

• Weitere Easing-Funktionen: cubic-bezier() und linear()
• Schritt-Funktion auf Wikipedia