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.

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

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.

• Module CSS - Les transition - Niveau 1

  Première spécification concernant les transitions, et définition de la propriété transition-property.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Les transitions - Niveau 2

  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 CSS Transitions. Voici les propriétés relatives aux transitions :

Propriétés :