steps() - Fonction CSS
Résumé des caractéristiques de la fonction steps()
Description de la fonction steps()
.
La fonction steps()
définit une progression saccadée pour les animations.
La fonction steps() peut être utilisée avec :
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.
Syntaxe de la fonction steps()
.
n
est le nombre de pas.
steps(
)
- animation-timing-function: steps(5); n
n
est le nombre de pas. - animation-timing-function: steps(5, start); n m
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.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ètrem
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
oujump-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
oujump-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.
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.
steps()
.
steps()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que steps()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. steps()
fait partie du Module CSS - Fonctions d'accélération (CSS Easing Functions). Les définitions suivantes sont également décrites dans ce même module.