propriété transition-property CSS

Définition et utilisation

L'attribut transition-property définit le nom de la propriété CSS appliquant l'effet de transition. (L'effet de transition commence lorsque la propriété CSS spécifiée change).

Astuce :Les effets de transition se produisent généralement lorsque l'utilisateur met le pointeur de la souris sur l'élément.

Remarque :Configurez toujours transition-duration Les attributs, sinon l'effet de transition ne se produira pas si la durée est de 0.

Voir également :

Tutoriel CSS :transition CSS

Manuel de référence HTML DOM :Attribut transitionProperty

Exemple

Placez le pointeur de la souris sur l'élément div pour créer un effet de transition de largeur de l'élément avec un changement fluide :

div {
  transition-property: largeur;
}

Essayez-le vous-même

Syntaxe CSS

transition-property: aucun|tout|propriété;

Valeur de l'attribut

Valeur Description
aucun Aucune propriété ne recevra l'effet de transition.
tout Toutes les propriétés recevront l'effet de transition.
propriété Liste des noms des propriétés CSS appliquant l'effet de transition, séparés par des virgules.

Détails techniques

Valeur par défaut : tout
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : objet.style.transitionProperty="largeur,hauteur"

Prise en charge du navigateur

Les numéros dans le tableau indiquent la première version du navigateur prenant en charge cette propriété.

Les nombres avec les préfixes -webkit-, -moz- ou -o- indiquent la première version utilisant les préfixes.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-