Steps() - Fonction CSS

Schéma syntaxique de steps().

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• integer est un nombre entier supérieur à 1.

Description de la fonction steps().

La fonction steps() définit une progression saccadée pour les animations ou les transitions.

La valeur steps() peut être utilisée avec les propriétés suivantes :

• animation-timing-function : Définit la fonction d'accélération à utiliser pendant une animation.
• transition-timing-function : Propriété définissant la fonction d'accélération à utiliser pendant une transition.

Syntaxes de la fonction steps().

• animation-timing-function: steps(5, start); n m

  n est le nombre de pas. C'est un entier supérieur ou égal à 0, sauf s'il est suivi par jump-none auquel cas il doit être supérieur à 1.

  m est un paramètre qui précise le comportement de l'animation sur le premier et le dernier pas. Ce paramètre impacte aussi la façon dont l'animation est reprise lorsque celle-ci se déroule plusieurs fois de suite.
  Lorsque ce paramètre est omis, il vaut par défaut end.

  Les animations avec steps() sont une succession de sauts et de paliers, comme on le voit sur les schémas ci-après. Le paramètre m détermine si la progression commence par un palier ou par un saut, et comment elle se termine.

  Les valeurs suivantes sont acceptées. La valeur par défaut est end.

  start ou jump-start

  Le premier saut s'effectue au tout début de l'animation, et cette dernière se termine par un palier. Chaque palier a une durée qui se calcule de la façon suivante.

  

  end ou jump-end

  Le dernier saut s'effectue à la fin de la durée d'animation prévue.

  

  jump-both

  Il y a un saut juste au début de l'animation et un autre à la fin. En conséquence il y a un palier de moins, chaque palier dure un peu plus longtemps que dans les deux cas précédents.

  

  jump-none

  L'animation commence et se termine par un palier. Il y a un palier de plus que le nombre n spécifié. La durée de chacun des paliers se calcule avec la formule :

  

• animation-timing-function: step-start; animation-timing-function: step-end;

  Ces deux valeurs s'utilisent avec une syntaxe complètement différentes.

  step-start est équivalent à steps(1, start).
  step-end est équivalent à steps(1, end)

Simulateur avec la fonction steps()

Le simulateur est surtout utile pour comprendre le fonctionnement du deuxième paramètre de la fonction steps(). Le nombre de pas est d'ailleurs figé à 5. Le bloc bleu sert de référence de comparaison.

Avec les valeurs autres que jump-none, on a parfois l'impression que le bloc vert ne part pas du début de sa course ou ne va pas jusqu'à la fin. Cela est dû au fait que la progression commence ou se termine par un saut et non pas par un palier.

Prise en charge par les navigateurs.

Les animations et la fonction steps() sont bien prises en charge par les navigateurs actuels.

1

Support des
animations

2

Fonction
steps()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction steps().

• Module CSS - Fonctions d'accélération - Niveau 1

  Première définition de la fonction d'accélération steps().
  

  21 Février 2017

  Document de travail.

  

  30 Avril 2019

  Candidat à la recommandation.

  

  

• Module CSS - Fonctions d'accélération - Niveau 2

  Pas de changement concernant la fonction steps().
  

  29 Août 2024

  Document de travail.

  

  

  

Autres fonctions d'accélération.

La fonction steps() est décrite dans le module CSS Easing Functions. Notez que d'autres fonctions d'accélération sont de simples valeurs et non listées ci-dessous : linear, ease, ease-in, etc.

Fonctions :