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 :

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

Syntaxe de la fonction 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 valeurs suivantes sont acceptées :

    1. start ou jump-start : le premier pas s'effectue au tout début de l'animation :

      La fonction steps()
    2. end ou jump-end : le dernier pas s'effectue à la fin de la durée d'animation prévue :

      La fonction steps()
    3. jump-both :

      La fonction steps()
    4. jump-none :

      La fonction steps()
    5. step-start :

    6. step-end :

    La valeur par défaut est end.

Simulateur.

Le simulateur est surtout utile pour comprendre le fonctionnement du deuxième paramètre de la fonction steps(). Le nombre de répétitions est d'ailleurs figé à 5.

animation-direction :
animation-timing-function:
( nbre mode )
end (défaut)

Compatibilité et prise en charge par les navigateurs.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Animation - Propriétés.

Animation - Directives.

Animation - Fonctions.

  • cubic-bezier() : Détermine une progression non linéaire pour les animations.