MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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() (Oui) 55.0 (55.0) ? Pas de support (Oui) ?
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() ? (Oui) 55.0 (55.0) ? 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.

Voir aussi

Étiquettes et contributeurs liés au document

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