Attribut TRANSITION-PROPERTY

Rôle

L’attribut transition-property permet de spécifier un ou plusieurs attributs concernés (séparés par des virgules) lorsque vous réalisez une transition.

Vous pouvez fournir la valeur all pour cibler tous les attributs.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.transitionProperty

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

img{
  transition: width,height;
  transition-duration: 1s;
  width: 200px;
  height: 200px;
}
img:hover{
  width: 230px;
  height: 230px;
}

– Le code HTML

<img src="lorempixel.com/output/city-q-g-200-200-8.jpg" alt="">

Résultat

Survolez l’image… Dans cet exemple, deux valeurs (width et height) pour transition-property

Compatibilité

L’attribut transition-property est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)

Valeurs

Les différentes valeurs de l’attribut transition-property sont:

none

Aucun attribut
Syntaxe :
transition-property : none

all

Tous les attributs
Syntaxe :
transition-property : all

un attribut ou plusieurs

Séparé les attributs par des virgules
Syntaxe :
transition-property : width,height

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
transition-property : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
transition-property : inherit

A voir aussi

transition– transition-delay– transition-duration– transition-timing-function