Transition-duration - Propriété CSS

Schéma de la syntaxe de transition-duration.

Description des termes utilisés sur le schéma :

• duration est une durée : une valeur numérique suivie d'une des unités de durée.
• La syntaxe peut être répétée autant de fois qu'il y a de transitions, séparées par des virgules.

Description de la propriété transition-duration.

transition-duration définit la durée de la transition. Cette valeur doit obligatoirement être définie à une valeur supérieure à 0 secondes pour que l'effet de transition soit visible.

Rappelons que l'effet de transition consiste à faire évoluer la valeur d'une propriété de façon progressive, et non pas brutalement. Une fois la transition définie, chaque modification de la valeur de la propriété se fera sur le temps défini par transition-duration. Pour plus d'informations sur les transitions en général, reportez-vous à la propriété résumée transition.

Valeurs pour transition-duration.

• transition-duration: 5s;

  La transition se déroulera sur une durée totale de la valeur indiquée. C'est un nombre positif suivi d'une des unités de durée. La valeur par défaut est 0, ce qui annule l'effet de la transition.

• transition-duration: 5s, 3s;

  Plusieurs valeurs peuvent être énoncées, séparées par des virgules. Cette syntaxe est utilisable lorsque plusieurs transitions sont définies : voir la page sur les transitions multiples.

• transition-duration: initial; (0s) transition-duration: inherit; transition-duration: revert; transition-duration: revertLayer; transition-duration: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de transition-duration.

L'animation de transition-duration n'est pas possible. D'ailleurs cela n'aurait pas de sens dans la mesure où cette propriété est un des paramètres de l'animation (ou de la transition).

Accéder à la propriété transition-duration par programme.

Avec Javascript, modifier la valeur de transition-duration.

Exemples de codes Javascript pour modifier la valeur de transition-duration. La première syntaxe, en kebab-case est classique en CSS, tandis que la deuxième syntaxe est plus courante en Javascript.

let el = document.getElementById('id'); el.style['transition-duration'] = '750ms'; // ou let el = document.getElementById('id'); el.style.transitionDuration = '750ms';

Avec Javascript, lire la valeur de transition-duration.

Deux syntaxes également pour lire la valeur de transition-duration. La propriété doit avoir été affectée directement à l'élément lui-même et non pas en passant par un sélecteur CSS. La durée est renvoyée exactement telle qu'elle a été définie, dans la même unité.

let el = document.getElementById('id'); let value = el.style['transition-duration']; // ou let el = document.getElementById('id'); let value = el.style.transitionDuration;

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

Ci-dessous, voici comment lire la valeur calculée de transition-duration en Javascript. La durée est retournée toujours en secondes, même si elle a été définie en millisecondes.

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

Avec JQuery, modifier la valeur de transition-duration.

JQuery permet également la modification et la lecture de la valeur de la propriété transition-duration, avec des syntaxes plus courtes que celles de Javascript.


$('#id').css('transition-duration', '750ms');
// ou
$('#id').css('transitionDuration', '750ms');


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

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

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-duration 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 sérialisée la valeur de transition-duration. On constate en particulier que l'unité est toujours la seconde, même si la valeur a été définie en millisecondes.

Exemple interactif avec la propriété transition-duration.

Une transition a été définie sur la propriété margin-left de l'élément bleu ci-dessous. Saisissez une valeur pour transition-duration, en seconde (2s) ou en millisecondes (200ms), et cliquez ensuite sur le bouton "Démarrer". Ce dernier modifie la marge gauche de l'élément.

Compatibilité des navigateurs avec transition-duration.

Les effets de transition, et la propriété transition-duration sont bien pris en charge par les navigateurs actuels.

1

Support des
transitions

2

Propriété
transition-duration

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

Histoire de la propriété transition-duration.

• Les transition en CSS - Niveau 1

  Normalement, quand une propriété change de valeur, sa restitution à l'écran est immédiate. Ce module de spécification décrit comment faire évoluer des propriétés progressivement d'une valeur à l'autre dans un temps donné. Autrement dit, comment passer d'un état à un autre progressivement.
  Il y a cependant besoin d'un événement extérieur pour déclencher le changement de valeur des propriétés (code Javascript, action de l'utilisateur, etc.). C'est en ce sens que les transitions diffèrent des animations, qui, elles, peuvent s'exécuter indépendamment de toute action extérieure.

  Concernant transition-duration. Première spécification définissant les transitions en CSS.
  Et introduction de la propriété transition-duration.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Les transitions en CSS - Niveau 2

  Le niveau 2 de la spécification sur les transitions ajoute la possibilité d'appliquer une transition sur une propriété discrète.
  Une nouvelle directive @starting-style permet de définir les valeurs de départ pour les valeurs des propriétés . Il est maintenant possible d'appliquer une transition sur des éléments qui passent de l'état invisible à l'état visible.

  Concernant transition-duration. Pas de changement concernant la propriété transition-duration.
  

  05 Septembre 2023

  Document de travail.

  

  

  

Voir aussi : les transitions.

Le W3C publie les normes segmentées en modules. Les transitions sont décrites dans le module les transitions en CSS. Pour faciliter vos recherches, voici les autres propriétés relatives aux transitions :

Propriétés :

Directives :