Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

steps() - Fonction CSS

steps()

Résumé des caractéristiques de la fonction steps()

Description rapide
Définit une animation saccadée, pas par pas.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Fonctions d'accélération

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 :

Syntaxe de la fonction steps().

n est le nombre de pas.

steps(
Schéma syntaxique de la fonction steps()Syntaxe de la fonction d'accélération steps() utilisable dans une animation en CSS. steps( n steps( n jump-start jump-start jump-end jump-end jump-none jump-none jump-both jump-both start start end end step-start step-start step-end step-end ) )
)
  • 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è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.

    Calcul de la durée d'un palier avec la valeur jump-start Durée d'un palier = Durée de l'animation Nombre de pas

    La fonction steps()

    end ou jump-end

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

    Calcul de la durée d'un palier avec la valeur jump-end Durée d'un palier = Durée de l'animation Nombre de pas

    La fonction steps()

    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.

    Durée d'un palier avec la valeur jump-both Durée d'un palier = Durée de l'animation Nombre de pas - 1

    La fonction steps()

    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 :

    Durée d'un palier avec la valeur jump-none Durée d'un palier = Durée de l'animation Nombre de pas + 1

    La fonction steps()

  • 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.


animation-iteration-count :

animation-timing-function :

(défaut)

Prise en charge par les navigateurs.

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

Colonne 1
Traitement des animations définies en CSS.
Colonne 2
Prise en charge de la fonction CSS steps().
1
Animations
2
steps()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
97%

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.

Fonctions.

Détermine une progression non linéaire pour les animations.