MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

/* 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;

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.

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

Syntaxe

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  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 26 4.0 (2.0)-moz
16.0 (16.0)[1]
(Oui)-webkit
(Oui)
10 11.6-o
12.5 #
(Oui)-webkit
frames() Pas de support[2] Pas de support[2] ? Pas de support Pas de support[2] ?
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple (Oui)-webkit (Oui)-webkit 4.0 (2.0)-moz16.0 (16.0)[1] (Oui)-webkit
(Oui)
? ? (Oui)-webkit
frames() ? Pas de support[2] Pas de support[2] ? Pas de support (Oui) ?

[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[2] Le nom utilisé pour la fonction frames() est sujet à discussions et est actuellement désactivé dans les navigateurs tant qu'une décision finale n'a pas été prise. Actuellement, la fonctionnalité est seulement activée dans Nightly/Canary.

Voir aussi

Étiquettes et contributeurs liés au document

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