Transition - Propriété CSS

transition

Résumé des caractéristiques de la propriété `transition`

Description rapide

Regroupe les différents paramètres d'une ou plusieurs transitions.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Non.

Type d'animation

Not animable : la propriété transition ne peut pas être animée.

Module W3C

Module CSS - Les transitions

Références (W3C)

🡇

🡅

CSS Transitions - Level 2

Statut du document: WD (document de travail)

CSS Transitions - Level 1

Statut du document: WD (document de travail)

Description de la propriété `transition`.

Une transition est une animation qui se produit lorsque la valeur d'une propriété est définie ou modifiée. Le passage de l'ancienne valeur à la nouvelle se fait alors de façon progressive.

Voici un exemple de transition : les deux élément ci-dessous ont une largeur définie à 20vw, soit approximativement un cinquième de la largeur de l'écran. En changeant brutalement la largeur de la fenêtre de votre navigateur, vous constaterez que le premier élément (le bleu) réagit instantanément, tandis que la largeur du deuxième élément évolue progressivement vers sa nouvelle valeur (Firefox ne fait pas évoluer progressivement la largeur de l'élément, on constate simplement un temps de retard dans la mise à jour de la largeur de l'élément vert.

Pas de transition sur cet élément

Un effet de transition sur la largeur

transition est une propriété résumée qui définit les valeurs des propriétés suivantes :

transition-property : définit la propriété qui sera soumise à la transition.
transition-duration : la durée de la transition. Cette valeur doit obligatoirement être définie pour que l'effet de transition soit visible.
transition-timing-function : une fonction de calcul qui définit une exécution non linéaire de la transition.
transition-delay : un temps d'attente avant que l'effet de transition ne commence.

Des transitions sur plusieurs propriétés peuvent être définies en les séparant par des virgules (voir l'exemple ci-dessous).

Pour qu'une transition s'active, il est nécessaire que quelque chose d'extérieur à CSS modifie la valeur d'une propriété (l'utilisateur ou un code Javascript par exemple). Pour obtenir une propriété qui évolue de façon autonome d'une valeur à une autre, voyez les possibilités de animation.

Transitions multiples.

Il est possible de définir plusieurs transitions sur un même élément. C'est le cas lorsqu'il est nécessaire d'animer plusieurs propriétés. Chacune des propriétés relatives aux transitions peut alors comporter plusieurs valeurs séparées par des virgules.

Exemple : le bloc ci-dessous a deux transitions définies, une sur sa largeur, et une sur sa couleur d'arrière-plan, avec des durées différentes. Un code Javascript modifie ces deux propriétés toutes les 5 secondes.

Les valeurs s'appliquent aux transitions dans l'ordre où elles ont été énumérées par la propriété transition-property, en fonction des règles suivantes :

La propriété qui sert de référence pour dénombrer les transitions est transition-property.
Si les autres propriétés ont un nombre de valeurs identiques, chacune de ces valeurs s'applique à une transition, dans l'ordre.
Si certaines propriétés ont plus de valeurs que de transitions énumérées par transition-property, les valeurs excédentaires sont ignorées.
Si certaines propriétés ont moins de valeurs que de transitions énumérées par transition-property, le navigateur affecte les valeurs en bouclant sur celles qui sont fournies. Dans le cas extrême, si une seule valeur est fournie, elle s'applique à toutes les transitions.

Exemple. Le code ci-dessous est à comprendre de la façon suivante :

Deux transitions sont définies, une sur la marge gauche et l'autre sur la marge droite.
La durée pour la transition sur la marge gauche est de 3 secondes, celle pour la transition sur la marge droite est de 5 secondes.
Ces deux transitions auront une progression linéaire.
Le délai avant démarrage de 1 seconde est appliqué à la transition sur la marge gauche, celui de 2 secondes correspond à la transition sur la marge droite. Enfin, le délai de 5 secondes ne sera appliqué à aucune transition. Il sera ignoré.


	transition-property: margin-left, margin-right;
	transition-duration: 3s, 5s;
	transition-timing-function: linear;
	transition-delay: 1s 2s 5s;

Exemple d'animation de `transition`.

La propriété transition ne peut pas être animée. Il en est de même pour toutes les propriétés relatives aux transitions.

Accéder à la propriété `transition` 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. Puisqu'il s'agit de transitions, l'effet ne sera visible que au moment de modifier la valeur de la propriété concernée par la transition.

Voici comment modifier, avec Javascript, la valeur de transition pour un élément el. Deux syntaxe existent : la première utilise une notation en tableau, avec des crochets. La deuxième est une notation objet.


function setTransition(el) {
   el.style['transition']='width 1s linear 0s';
}


function setTransition(el) {
   el.style.transition='width 1s linear 0s';
}

Voici deux exemples de code Javascript pour lire la valeur de transition. La propriété doit avoir été définie directement sur l'élément lui-même et pas par l'intermédiaire d'un sélecteur. La valeur de la transition est renvoyée telle qu'elle a été définie, dans le même format et les mêmes unités.


function getTransition(el) {
   return el.style['transition'];
}


function getTransition(el) {
   return el.style.transition;
}

Exemple de code Javascript pour lire la valeur calculée de transition. La valeur est retournée avec les unités converties en secondes.


function getTransition(el) {
   return window.getComputedStyle(el).getPropertyValue('transition');
}

Le premier code JQuery ci-dessous modifie la valeur de la propriété transition. Le deuxième code lit la valeur calculée de la propriété.


function setTransition(el) {
   $(el).css('transition','width 1s linear 0s');
}


function getTransition(el) {
   return $(el).css('transition');
}

Compatibilité des navigateurs avec `transition`.

Les transitions et donc la propriété transition sont prises en charge par tous les navigateurs actuels.

Colonne 1

Prise en charge générale des transitions.

Support des
transitions

Propriété
transition

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

Histoire de la propriété `transition`.

Module CSS - Les transition - Niveau 1

Première spécification concernant les transitions et définition des propriétés correspondantes dont la propriété résumée transition.

20 Mars 2009
Document de travail.
Module CSS - Les transitions - Niveau 2

Ajout de la propriété transition-behavior. La propriété résumée transition accepte cette nouvelle valeur dans sa syntaxe.

05 Septembre 2023
Document de travail.