Fonction CSS steps()

Syntaxe

/* Intervalles diffrents */
steps(2, end)
steps(4, jump-end)
steps(12, end)

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

Paramtres

La fonction accepte les paramtres suivants :

<integer>

Reprsente le nombre d'intervalles quidistants ou de  pas . Il doit s'agir d'un entier positif suprieur 0, sauf si le second paramtre est jump-none, auquel cas il doit tre suprieur 1.

<step-position>

Dfinit quand le saut entre les valeurs a lieu. Si omis, la valeur par dfaut est end. Les mots-cls possibles sont :

jump-start ou start

Indique que la premire marche a lieu au dbut de l'animation.

jump-end ou end

Indique que la dernire 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 dbut et la fin.

Description

La fonction steps() divise la dure 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 dfinies s'applique chaque segment. Par exemple, si une animation comporte trois segments et utilise steps(2), il y a six tapes au total, soit deux par segment.

L'image suivante montre l'effet des diffrentes 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)

[Graphiques de la progression d'entre vers la progression de sortie : steps(2, jump-start) montre des lignes horizontales partant de (0, 0.5) et (0.5, 1), avec des cercles vides l'origine et en (0.5, 0.5) ; steps(4, jump-end) montre des lignes horizontales partant de (0, 0), (0.25, 0.25), (0.5, 0.5) et (0.75, 0.75), avec des cercles non remplis en (0.25, 0), (0.5, 0.25), (0.75, 0.5) et un cercle plein en (1, 1) ; steps(5, jump-none) montre des lignes horizontales partant de (0, 0), (0.2, 0.25), (0.4, 0.5), (0.6, 0.75), (0.8, 1), avec des cercles non remplis en (0.2, 0), (0.4, 0.25), (0.6, 0.5), (0.8, 0.75) ; steps(3, jump-both) montre des lignes horizontales partant de (0, 0.25), (1/3, 0.5), (2/3, 0.75), avec un cercle plein en (1, 1) et des cercles vides l'origine, (1/3, 0.25), (2/3, 0.5) et (1, 0.75).]

Syntaxe formelle

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

<integer> = 
  <number-token>  

<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 dbut */
steps(2, start)

/* Utilisation du second paramtre par dfaut */
steps(2)

Les fonctions steps() suivantes sont invalides :

/* Le premier paramtre doit tre un <integer>, pas une valeur relle */
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)

Spcifications

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 Wikipdia