Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

transition-duration - Propriété CSS

transition-duration

Résumé des caractéristiques de la propriété transition-duration

Description rapide
Définit la durée d'une transition.
Statut
Standard
S'applique à
Tous les éléments.
Type de valeur
Durée+
Valeurs prédéfinies
0s
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0s
Héritée par défaut
Non
Type d'animation
Étant elle même un des paramètres de l'animation, la propriété transition-duration ne peut pas être animée.
Module W3C
Module CSS - Les transitions
Références (W3C)
Statut du document:: WD (document de travail)

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';
}
ou

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'];
}
ou

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');
}
ou

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');
}
ou

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.

transition-duration :

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.

Colonne 1
Prise en charge par les navigateurs des effets de transition en général.
Colonne 2
Support de la propriété transition-duration.
1
Transitions
2
transition-duration
Estimation de la prise en charge en pourcentage du parc actuel.
98%
96%

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.

Propriétés.

Effet d'animation simple.
Définit le temps d'attente avant que la transition ne commence.
Définit la ou les propriétés sur lesquelles doit s'appliquer une transition.
Propriété définissant la fonction d'accélération à utiliser pendant une transition.