steps()

Syntaxe

/* Intervalles différents */
steps(2, end)
steps(4, jump-end)
steps(12, end)

/* Positions de saut différentes */
steps(3, jump-start)
steps(3, jump-end)
steps(3, jump-none)
steps(3, jump-both)

Paramètres

La fonction accepte les paramètres suivants :

<integer>

Représente le nombre d'intervalles équidistants ou de « pas ». Il doit s'agir d'un entier positif supérieur à 0, sauf si le second paramètre est jump-none, auquel cas il doit être supérieur à 1.

<step-position>

Définit quand le saut entre les valeurs a lieu. Si omis, la valeur par défaut est end. Les mots-clés possibles sont :

jump-start ou start

Indique que la première marche a lieu au début de l'animation.

jump-end ou end

Indique que la dernière marche a lieu à la fin de l'animation.

jump-none

Indique qu'aucun saut anticipé ou retardé n'a lieu.

jump-both

Indique que des sauts ont lieu à la fois au début et à la fin.

Description

La fonction steps() divise la durée de l'animation en intervalles égaux. Par exemple, steps(4, end) divise l'animation en quatre intervalles égaux, les valeurs changeant à la fin de chaque intervalle, sauf le dernier changement qui a lieu à la fin de l'animation.

Si une animation contient plusieurs segments, le nombre d'étapes définies s'applique à chaque segment. Par exemple, si une animation comporte trois segments et utilise steps(2), il y aura six étapes au total, soit deux par segment.

L'image suivante montre l'effet des différentes valeurs de <step-position> sur le moment où les sauts se produisent :

steps(2, jump-start)  /* Ou steps(2, start) */
steps(4, jump-end)    /* Ou steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)

Syntaxe formelle

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

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

Exemples

Utilisation de la fonction steps()

Les fonctions steps() suivantes sont valides :

/* Cinq étapes avec saut à la fin */
steps(5, end)

/* Deux étapes avec saut au début */
steps(2, start)

/* Utilisation du second paramètre par défaut */
steps(2)

Les fonctions steps() suivantes sont invalides :

/* Le premier paramètre doit être un <integer>, pas une valeur réelle */
steps(2.0, jump-end)

/* Le nombre d'étapes doit être positif */
steps(-3, start)

/* Le nombre d'étapes doit être au moins égal à 1 */
steps(0, jump-none)

Spécifications

Compatibilité des navigateurs

Voir aussi

• Autres fonctions d'assouplissement : cubic-bezier() et linear()
• Le module des fonctions d'assouplissement CSS
• Fonction en escalier ^(angl.) sur Wikipédia