CSS3 transition-propertyPropriété

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la propriété.

Les nombres précédant immédiatement -webkit-, -ms- ou -moz- indiquent la première version du navigateur qui prend en charge la propriété préfixée.

Définition de la propriété et instructions d'utilisation

transition-property est une propriété de CSS3 utilisée pour spécifier à quelles propriétés CSS l'effet de transition s'applique. Elle vous permet de spécifier explicitement les propriétés auxquelles appliquer une transition, afin que, lorsque l'état d'un élément change, seules les propriétés spécifiées subissent une transition, plutôt que toutes les propriétés.

La valeur de cette propriété peut être un nom de propriété CSS ou le mot-clé all, ce qui signifie que l'effet de transition s'applique à toutes les propriétés.

Par exemple, si vous souhaitez appliquer un effet de transition uniquement lorsque la couleur change, vous pouvez écrire :

.element {
  transition-property: color;
}

De cette façon, lorsque la couleur de l'élément .element change, un effet de transition se produira.

Si vous souhaitez appliquer l'effet de transition à toutes les propriétés, vous pouvez utiliser le mot-clé all :

.element {
  transition-property: all;
}

De cette façon, quelle que soit la propriété qui change, un effet de transition se produira.

Vous pouvez également spécifier plusieurs propriétés à la fois, séparées par des virgules :

.element {
  transition-property: width, height, opacity;
}

De cette façon, lorsque la largeur, la hauteur ou l'opacité de l'élément .element changent, un effet de transition se produira.

Syntaxe

Plus d’exemples

Survolez un élément div pour modifier la largeur et la hauteur avec un effet de transition fluide.