Fonction CSS steps() - CSS | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Fonction CSS steps()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La fonction CSS steps() définit une transition qui divise le temps d'entrée en un nombre défini d'intervalles de même longueur. Cette sous-classe de fonctions en étapes est parfois aussi appelée fonction en escalier.

Dans cet article

Syntaxe

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

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

css
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>? )

<integer> =
<number-token>

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Cette syntaxe reflète le dernier standard selon CSS Easing Functions Level 2, CSS Values and Units Module Level 4. Tous les navigateurs n'ont peut-être pas implémenté toutes les parties. Voir la Compatibilité des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Utilisation de la fonction steps()

Les fonctions steps() suivantes sont valides :

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

css
/* 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)

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

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 7 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu