--- title: slug: Web/CSS/timing-function tags: - CSS - Reference - Type translation_of: Web/CSS/easing-function translation_of_original: Web/CSS/timing-function ---
{{CSSRef}}

Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).

Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.

Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.

Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).

Valeurs

CSS prend en charge deux types de fonctions de temporisation :

Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.

La classe de fonctions cubic-bezier()

La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.

Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).

Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].

Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.

Lorsqu'on définit une courbe de Bézier invalide en CSS via cubic-bezier, le moteur ignore la déclaration dans son intégralité.

Syntaxe

cubic-bezier(x1, y1, x2, y2)

avec

x1, y1, x2, y2
qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P1 et P2 définissant la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.

Exemples

Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :

cubic-bezier(0.1, 0.7, 1.0, 0.1)

cubic-bezier(0, 0, 1, 1)

/* Des valeurs négatives pour les ordonnées pour */
/* créer du rebondissement                       */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Idem avec des valeurs > 1                     */
cubic-bezier(0, 1.1, 0.8, 4)

En revanche, ces définitions sont invalides :

/* Bien que le type de sortie puisse être une couleur */
/* les courbes de Bézier fonctionnent avec des ratios */
/* numériques */
cubic-bezier(0.1, red, 1.0, green)

/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
/* car sinon la courbe n'est pas une fonction temporelle. */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* Il faut définir les deux points, il n'y a pas de valeur */
/* par défaut. */
cubic-bezier(0.3, 2.1)

/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
/* car sinon la courbe n'est pas une fonction temporelle. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

La classe de fonction steps()

La notation fonctionnelle steps() permet de définir une fonction en escalier qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.

steps(2, start)

steps(4, end)

Syntaxe

steps(nombre_de_marche, direction)

avec

nombre_de_marche
Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.
direction
Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
  • start indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation
  • end indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.
end est la valeur par défaut.

Exemples

Voici des exemples de fonction de temporisation en escalier valides :

/* Il y a cinq marches et la dernière est utilisée */
/* avant la fin de l'animation.                    */
steps(5, end)

/* Une fonction à deux marches dont la première se */
/* déroule au début de l'animation.                */
steps(2, start)

/* Le deuxième paramètre est facultatif. */
steps(2)

En revanche, celles-ci sont invalides :

/* Le premier paramètre doit être un entier (type */
/* <integer>)                                     */
steps(2.0, end)

/* Le nombre d'étapes ne peut pas être négatif. */
steps(-3, start)

/* Il ne peut pas être nul.*/
steps(0, end)

La classe de fonction frames()

Note : Le nom "frames" est actuellement en discussion et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.

La notation fonctionnelle frames() définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre frames() et steps() est que frames() considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.

frames(2), frames(4)

 

 

Syntaxe

steps(nombre_etapes)

où :

nombre_etapes
Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.

Exemples

Ces fonctions de temporisation sont valides :

/* Le paramètre est un entier positif. */
frames(10)

Note : une démo de la fonction frames() avec un exemple fonctionnel est disponible sur notre dépôt GitHub.

Ces fonctions de temporisation sont invalides :

/* Le paramètre passé à la fonction doit être un entier
   et pas une valeur décimale, même si cette dernière est
   égale à un entier. */
frames(2.0)

/* Le nombre de frames doit être positif. */
frames(-3)

/* Il doit y avoir au moins une frame. */
frames(0)

Mots-clés pour les fonctions de temporisation usuelles

linear

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 1.0, 1.0). Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.

ease

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette fonction est semblable à ease-in-out sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..

ease-in

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 1.0, 1.0). L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.

ease-in-out

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 0.58, 1.0). L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.

ease-out

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 0.58, 1.0). L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.

step-start

Ce mot-clé représente la fonction de temporisation steps(1, start) (ou steps(1, jump-start)). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.

step-end

Ce mot-clé représente la fonction de temporisation steps(1, end) (ou steps(1, jump-end)). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.

Spécifications

Spécification État Commentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}} {{Spec2('CSS3 Transitions')}} Définition initiale.
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}} {{Spec2('CSS3 Animations')}} Définition de <single-timing-function> comme synonyme de <single-transition-timing-function> selon le module CSS pour les transitions.

Compatibilité des navigateurs

{{Compat("css.types.timing-function", 2)}}

Voir aussi