La propriété transition-timing-function est utilisée pour décrire comment les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.

Cette courbe d'accelération est définie en utilisant une <timing-function> pour chacune des propriétés à animer.

Il est possible de définir plusieurs fonctions de temporisation ; chacune sera appliquée à la propriété correspondante listée avec la propriété transition-property, qui agit comme liste maîtresse. S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (ease). S'il y a trop de fonctions de temporisation, la liste est simplement tronquée à la bonne dimension. Dans les deux cas, la déclaration CSS reste valide.

Syntaxe

/* Avec un mot-clé */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Avec des valeurs de type fonction */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: frames(10);

/* Avec plusieurs fonctions de temps */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Valeurs globales */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

Valeurs

<timing-function>
Chaque <timing-function> représente une fonction de temporisation à lier avec la propriété à animer, comme défini par transition-property.

Exemples

Il y a de nombreux exemples de transitions CSS dans l'article Transitions CSS.

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'transition-timing-function' dans cette spécification.
Version de travail  

Valeur initialeease
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiainteractif
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

26

Oui -webkit-

12

12 -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

10

12.1

15 -webkit-

11.6 — 15 -o-

Oui

Oui -webkit-

FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

Oui

Oui -webkit-

26

Oui -webkit-

12

12 -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

?

Oui

Oui -webkit-

Oui

Oui -webkit-

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, mrstork, fscholz, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,