transition-duration - Propriété CSS
Résumé des caractéristiques de la propriété transition-duration
0s
0s
transition-duration
ne peut pas être animée.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
.
Syntaxes 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 unité de durée (voir les unités CSS 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
; transition-duration:inherit
; transition-duration:revert
; transition-duration:revert-layer
; transition-duration:unset
;La valeur initiale est :
.0s
Animation de la propriété 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).
Manipulation de la propriété transition-duration
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
Cett variable peut être initialisée avec document.getElementById('id')
ou par document.querySelector('#id')
.
Exemples de codes Javascript pour modifier la valeur de transition-duration
.
La première syntaxe, en kebab-case (à gauche) est classique en CSS, tandis que la deuxième syntaxe est courante en Javascript.
function setTransitionDuration(el) {
el.style['transition-duration']='2s';
}
function setTransitionDuration(el) {
el.style.transitionDuration='2s';
}
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 pas en passant par un sélecteur.
La durée est renvoyée exactement telle qu'elle a été définie.
function getTransitionDuration(el) {
return el.style['transition-duration'];
}
function getTransitionDuration(el) {
return el.style.transitionDuration;
}
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.
function getBackgroundColor(el) {
return window.getComputedStyle(el).getPropertyValue('transition-duration');
}
Voici les syntaxes pour modifier la valeur de transition-duration
avec JQuery.
function setTransitionDuration(el) {
$(el).css('transition-duration','2s');
}
function setTransitionDuration(el) {
$(el).css('transitionDuration','2s');
}
Et les syntaxes pour lire la valeur calculée de transition-duration
, toujours avec JQuery. La valeur est retournée en secondes.
function getTransitionDuration(el) {
return $(el).css('transition-duration');
}
function getTransitionDuration(el) {
return $(el).css('transitionDuration');
}
Simulateur pour 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.
Prise en charge par les navigateurs (compatibilité).
Les effets de transition, et la propriété transition-duration
sont bien pris en charge par les navigateurs actuels.
transition-duration
.
transition-duration
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que transition-duration
.
Les spécifications CSS éditées par le W3C sont organisées en modules. transition-duration
fait partie du Module CSS - Les transitions (CSS Transitions). Les définitions suivantes sont également décrites dans ce même module.