steps() CSS-Funktion

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>

Reprsentiert die Anzahl der gleichmigen Intervalle oder 'Schritte'. Es muss eine positive ganze Zahl grer als 0 sein, es sei denn, der zweite Parameter ist jump-none, in diesem Fall muss es eine positive ganze Zahl grer als 1 sein.

<step-position>

Gibt an, wann der Sprung zwischen den Werten erfolgt. Wenn dieser Parameter ausgelassen wird, ist der Standardwert end. Die mglichen Schlsselwortwerte 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 frhe noch spte Sprnge stattfinden.

jump-both

Gibt an, dass sowohl frhe als auch spte Sprnge stattfinden.

Beschreibung

Die steps()-Funktion unterteilt die Animationsdauer in gleiche Intervalle. Zum Beispiel: steps(4, end) unterteilt die Animation in vier gleiche Intervalle, wobei die Werte am Ende jedes Intervalls gendert werden, auer der letzten nderung, die am Ende der Animation erfolgt.

Wenn eine Animation mehrere Segmente enthlt, gilt die angegebene Anzahl an Schritten fr 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 Wirkung verschiedener <step-position>-Werte, wenn die Sprnge 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)

[Diagramme des Eingabe- zu Ausgabefortschritts, wobei steps(2, jump-start) horizontale Linien zeigt, die 0,5 Einheiten von (0, 0,5) und (0,5, 1) aus erstrecken, jeweils mit leeren Kreisen am Ursprung und (0,5, 0,5); steps(4, jump-end) horizontale Linien zeigt, die 0,25 Einheiten von (0, 0), (0,25, 0,25), (0,5, 0,5), und (0,75, 0,75) aus erstrecken, mit ungefllten Kreisen bei (0,25, 0), (0,5, 0,25), und (0,75, 0,5), und einem gefllten Kreis bei (1, 1); steps(5, jump-none) zeigt horizontale Linien, die sich 0,2 Einheiten von (0, 0), (0,2, 0,25), (0,4, 0,5), (0,6, 0,75), und (0,8, 1) erstrecken, jeweils mit ungefllten Kreisen bei (0,2, 0), (0,4, 0,25), (0,6, 0,5), und (0,8, 0,75); steps(3, jump-both) zeigt horizontale Linien, die sich 1/3 Einheiten von (0, 0,25), (1/3, 0,5), und (2/3, 0,75) erstrecken, jeweils mit einem gefllten Kreis bei (1, 1) und ungefllten Kreisen am Ursprung, (1/3, 0,25), (2/3, 0,5), und (1, 0,75).]

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 gltig:

/* 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 ungltig:

/* 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-Kompatibilitt

Siehe auch

• Andere Easing-Funktionen: cubic-bezier() und linear()
• CSS-Easing-Funktionen-Modul
• Schritt-Funktion auf Wikipedia