transition-timing-function

La propriété transition-timing-function décrit la façon dont 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 dans une même déclaration ; 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

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

/* Valeurs fonctionnelles */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Valeurs avec une fonction en escalier */ 
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Utilisation de plusieurs fonctions */
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 valeur <timing-function> représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à transition-property.

Les valeurs avec des mots-clés (ease, linear, ease-in-out, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction cubic-bezier() permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser la transition en intervalles de même durée.

ease
Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de la transition augmente au milieu de celle-ci puis ralentit à la fin.
linear
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : la transition s'effectue à vitesse constante.
ease-in
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
ease-out
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : la transition commence rapidement puis ralentit jusqu'à la fin.
ease-in-out
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : la transition commence lentement, accèlere puis ralentit à nouveau avant la fin.
cubic-bezier(p1, p2, p3, p4)
Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
steps( n, <jumpterm>)
La transition s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, la transition se composera de cinq paliers. Selon la valeur du paramètre jumpterm, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
jump-start
La fonction est continue à gauche et le premier saut se produit au début de la transition.
jump-end
La fonction est continue à droite et le dernier saut se produit à la fin de la transition.
jump-none
Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
jump-both
Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant la transition.
start
Identique à jump-start.
end
Identique à jump-end.
step-start
Synonyme de steps(1, jump-start)
step-end
Synonyme de steps(1, jump-end)

Syntaxe formelle

<timing-function>#


<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>


<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)


<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Exemples

Courbes de Bézier cubiques

.ease {
   transition-timing-function: ease;
}
.easein {
   transition-timing-function: ease-in;
}
.easeout {
   transition-timing-function: ease-out;
}
.easeinout {
   transition-timing-function: ease-in-out;
}
.linear {
   transition-timing-function: linear;
}
.cb {
   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
}

Fonctions en créneaux

.jump-start {
   transition-timing-function: steps(5, jump-start);
}
.jump-end {
   transition-timing-function: steps(5, jump-end);
}
.jump-none {
   transition-timing-function: steps(5, jump-none);
}
.jump-both {
   transition-timing-function: steps(5, jump-both);
}
.step-start {
   transition-timing-function: step-start;
}
.step-end {
   transition-timing-function: step-end;
}

Accessibilité

Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.

Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de la requête média sur la réduction de mouvements afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.

Spécifications

Spécification État/th> Commentaires
CSS Transitions
La définition de 'transition-timing-function' dans cette spécification.
Version de travail Définition initiale
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
transition-timing-functionChrome Support complet 26
Support complet 26
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 16
Support complet 16
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 10
Support complet 10
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 11.6 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet 9
Support complet 9
Support complet 3.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet ≤37
Support complet ≤37
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 26
Support complet 26
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 16
Support complet 16
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet 9
Support complet 9
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 1.5
Support complet 1.5
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
jump- keywords for steps()Chrome Support complet 77Edge Aucun support NonFirefox Support complet 65IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Support complet 77Chrome Android Support complet 77Firefox Android Support complet 65Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi