Transition-timing-function - Propriété CSS

Syntaxe de transition-timing-function (schéma).

Description de la propriété transition-timing-function.

transition-timing-function définit une fonction d'accélération pour calculer la dynamique de la transition. La progression est-elle linéaire ? Y a-t-il ralentissement ou accélération ? etc.

Rappel : une transition consiste à faire évoluer progressivement la valeur d'une propriété. Pour une explication générale sur les transitions, reportez-vous à la propriété résumée transition.

Valeurs pour transition-timing-function.

• transition-timing-function: ease-in;

  Les différentes fonctions d'accélération sont décrites ci-dessous. Ce sont les mêmes que celles de la propriété animation-timing-function.

  
  linear
  La valeur varie avec une vitesse uniforme pendant toute la durée de la transition

  
  ease
  La variation de la valeur est légèrement ralentie au début, et fortement ralentie à la fin.

  
  ease-in
  La variation de la valeur est ralentie au début, puis se poursuit avec une vitesse uniforme.
   

  
  ease-out
  La variation de la valeur commence avec une vitesses constante, puis ralenti vers la fin.

  
  ease-in-out
  La variation de la valeur subit un ralentissement au début et à la fin.

  
  steps(5)
  La variation de la valeur se fait pas à coups. Le nombre de pas est le paramètre de la fonction steps().

  
  cubic-bezier()
  La variation de la valeur suit une loi définie par les quatre paramètres de la fonction cubic-bezier().
• transition-timing-function: ease-in, linear;

  Lorsque plusieurs valeurs sont spécifiées, séparées par des virgules, elles s'appliquent aux différentes transitions définies par la propriété transition-property. Voir les explications sur la page sur les transitions multiples.

• transition-timing-function: initial; (ease) transition-timing-function: inherit; transition-timing-function: revert; transition-timing-function: revertLayer; transition-timing-function: unset;

  Liens vers la présentation de ces valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété transition-timing-function.

L'animation de la propriété transition-timing-function n'est pas possible.

La propriété transition-timing-function et Javascript.

Avec Javascript, modifier la valeur de transition-timing-function.

En Javascript, voici comment modifier la valeur de transition-timing-function. Il y a deux codes possibles en Javascript car ce langage accepte le nom de la propriété écrit en kebab-case, typique de CSS, et en camel-case

let el = document.getElementById('id'); el.style['transition-timing-function'] = 'ease-in-out'; // ou let el = document.getElementById('id'); el.style.transitionTimingFunction = 'ease-in-out';

Avec Javascript, lire la valeur de transition-timing-function.

Ce code récupère la valeur de la propriété lorsque celle-ci a été affectée directement à l'élément lui-même par l'attribut style, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['transition-timing-function']; // ou let el = document.getElementById('id'); let value = el.style.transitionTimingFunction;

Avec Javascript, lire la valeur calculée de transition-timing-function.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages, ou, à défaut, ce sera la valeur initiale de la propriété (ease dans le cas de transition-timing-function).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('transition-timing-function');

Avec JQuery, modifier la valeur de transition-timing-function.


$('#id').css('transition-timing-function', 'ease-in-out');
// ou
$('#id').css('transitionTimingFunction', 'ease-in-out');


Avec JQuery, lire la valeur calculée de transition-timing-function.

let value = $('#id').css('transition-timing-function');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété transition-timing-function et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de la propriété, mais dans le cas de transition-timing-function il n'y a pas de différence entre la valeur appliquée et la valeur calculée.

Simulateur avec la propriété transition-timing-function.

Choisissez une valeur pour la propriété transition-timing-function et cliquez sur le bouton "Start". Le deuxième élément suit une transition linéaire, pour comparaison.

Support de transition-timing-function.

Les fonctions d'accélération sont bien prises en charge par tous les navigateurs depuis pas mal d'années. Il n'y a pas de problème de compatibilité à considérer pour la propriété transition-timing-function.

1

Support des
transitions

2

Propriété
transition-timing-function

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la propriété transition-timing-function.

• Module CSS - Les transition - Niveau 1

  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Fonctions d'accélération - Niveau 1

  Description des différentes dynamiques de mouvement applicables aux transitions.
  

  21 Février 2017

  Document de travail.

  

  30 Avril 2019

  Candidat à la recommandation.

  

  

• Module CSS - Les transitions - Niveau 2

  Pas de changement concernant la propriété transition-timing-function.
  

  05 Septembre 2023

  Document de travail.

  

  

  

• Module CSS - Fonctions d'accélération - Niveau 2

  Pas de changement concernant les dynamiques de mouvement.
  

  29 Août 2024

  Document de travail.

  

  

  

Voir aussi : les transitions.

Le W3C publie les spécifications sous le forme de modules. Les transitions sont décrites dans le module CSS Transitions, ainsi que les autres propriétés énumérées ci-dessous.

Propriétés :