Transition-duration - Propriété CSS
Résumé des caractéristiques de la propriété transition-duration
0stransition-duration ne peut pas être animée.Schéma de la syntaxe de transition-duration.
transition-duration.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description des termes utilisés sur le schéma :
durationest 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 "Start". 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.
transition-duration qui définit la durée d'une transition.transitions
transition-durationNavigateurs 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
Histoire de la propriété transition-duration.
-
Module CSS - Les transition - Niveau 1
Première spécification définissant les transitions en CSS.
Et introduction de la propriététransition-duration.
20 Mars 2009Document de travail.
-
Module CSS - Les transitions - Niveau 2
Pas de changement concernant la propriététransition-duration.05 Septembre 2023Document de travail.
Voir aussi : les transitions.
Le W3C publie les normes segmentées en modules. Les transitions sont décrites dans le module CSS Transitions. Pour faciliter vos recherches, voici les autres propriétés relatives aux transitions :
Propriétés :
discrete.