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 - Propriété animation-timing-function

Description.

Définit une fonction déterminant la dynamique de l'animation. Par exemple, l'animation peut commencer doucement et se terminer rapidement, ou vice-versa.

Pour consulter une présentation générale sur les animations, reportez-vous à la page généralités sur les animations.

Syntaxes pour animation-timing-function.

  • animation-timing-function: ease;

    Valeur par défaut. L'animation démarre lentement, accélère progressivement, prend sa vitesse normale et ralentit avant de se terminer.

  • animation-timing-function: linear;

    La vitesse de l'animation est constante pendant toute sa durée.

  • animation-timing-function: ease-in;

    L'animation démarre doucement jusqu'à sa vitesse normale, puis garde une vitesse constante jusqu'à la fin.

  • animation-timing-function: ease-out;

    L'animation démarre à sa vitesse normale et ralentit avant de se terminer.

  • animation-timing-function: ease-in-out;

    L'animation démarre et se termine lentement.

  • animation-timing-function: steps(3);

    L'animation est jouée par saccades, ici en 3 étapes. Un deuxième paramètre (start ou end) peut être précisé. Il détermine laquelle des étapes sera invisible (temps d'exécution à 0). Par défaut c'est la dernière.
    Reportez-vous à la description de la fonction steps() pour plus de précisions.

  • animation-timing-function: cubic-bezier(n,n,n,n);

    Définit une courbe de Bezier à partir de 4 valeurs numériques. La vitesse de l'animation sera calquée sur cette courbe.
    Voir une description plus complète de la fonction cubic-bezier().

  • animation-timing-function: linear, ease-in, ...;

    Comme pour les autres propriétés relatives aux animations, il est possible de définir une série de valeurs séparées par des virgules, dans le cas où plusieurs animations ont été définies.
    Pour plus de précisions sur les animations multiples, consultez la page animations multiples.

  • animation-timing-function: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Remarque sur cubic-bezier(n,n,n,n).

Cette syntaxe permet d'ajuster très précisément la vitesse et l'accélération de l'animation pour se rapprocher d'un mouvement réaliste mais les 4 valeurs numériques ne sont pas évidentes à déterminer.

Reportez-vous à cet outil, particulièrement pratique, pour calculer ces paramètres : concepteur de courbe de Bezier.

Simulateur.

Le simulateur modifie la propriété animation-timing-function du le bloc bleu. Le bloc gris est animé pour comparaison avec la valeur linear.

animation-timing-function :
linear

Voir aussi...

Animation - Propriétés.

Animation - Directives.

Animation - Fonctions.

  • cubic-bezier() : Détermine une progression non linéaire pour les animations.
  • steps() : Définit une animation saccadée, pas par pas.