Transition-property - Propriété CSS

Schéma de la syntaxe de transition-property.

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

• prop est le nom d'une propriété.

Description de la propriété transition-property.

transition-property définit quelle(s) propriété(s) doivent être soumises à une transition. La transition démarre lorsque la valeur d'une propriété est définie ou modifiée. Toutes les propriétés CSS ne peuvent pas être associées à une transition. En règle générale, il est possible d'appliquer une transition sur :

• Les propriétés qui acceptent une valeur numérique, quelle que soit l'unité.
• Les propriétés qui acceptent une couleur.
• Les propriétés dites "discrètes". Voir à ce sujet la page sur transition-behavior.

Pour une présentation générale des transitions, reportez-vous à la propriété résumée transition.

Valeurs pour transition-property.

• transition-property: all;

  Toutes les propriétés auront un effet de transition lorsque leur valeur est définie ou modifiée. L'effet n'est cependant pas visible tant que la propriété transition-duration n'a pas été fixée à une valeur différente de zéro.

• transition-property: none;

  Aucune propriété n'est soumise à un effet de transition.

• transition-property: width;

  La propriété width est soumise à un effet de transition.

• transition-property: width, height;

  Plusieurs noms de propriétés séparés par des virgules. Dans cet exemple, les deux propriétés width et height seront soumises à un effet de transition. Reportez-vous à la page sur les transitions multiples pour plus de précisions.

  Si l'une des propriétés listées n'est pas reconnue par le navigateur, elle est ignorée, mais le navigateur doit maintenir la correspondance avec les autres paramètres. Dans l'exemple ci-dessous, la propriété xxxx n'est pas reconnue mais cela ne doit pas décaler les durées, autrement dit, la transition sur width doit bien se faire sur 2 secondes.

  transition-property:xxxx, width; transition-duration:1s, 2s;
• transition-property: initial; (all) transition-property: inherit; transition-property: revert; transition-property: revertLayer; transition-property: unset;

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

Exemple d'animation de transition-property.

Pas d'animation possible pour la propriété transition-property.

Compatibilité des navigateurs avec transition-property.

Les effets de transition sont bien pris en charge par tous les navigateurs depuis pas mal d'années. Il n'y a pas de précautions particulières à prendre au sujet de la compatibilité de la propriété transition-property.

Il faut cependant garder à l'esprit que toutes les propriétés ne peuvent pas faire l'objet d'une transition. En particulier, on ne peut pas appliquer de transition sur les propriétés qui n'acceptent que des valeurs non numériques (text-align par exemple), mais voir à ce sujet transition-behavior.

1

Support des
transitions

2

Propriété
transition-property

Estimation de la prise en charge globale.

97%

95%

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-property.

• 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-property. Première spécification concernant les transitions, et définition de la propriété transition-property.
  

  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-property. Pas de changement concernant la propriété transition-property.
  

  05 Septembre 2023

  Document de travail.

  

  

  

Voir aussi : les transitions.

Les normes CSS sont publiées par le W3C et organisées en modules. Les transitions sont décrites dans le module Les transitions en CSS. Voici les propriétés relatives aux transitions :

Propriétés :

Directives :