Propriété transition-property

La propriété transition-property définit la propriété qui sera animée par une transition fluide transition. La valeur doit être le nom d'une propriété CSS qui sera animée. Si la valeur all est définie (elle est définie par défaut) - toutes les propriétés seront animées simultanément.

Syntaxe

sélecteur {
	transition-property: valeur;
}

Exemple

Passez la souris sur le bloc - il modifiera progressivement sa largeur, car transition-property a la valeur width :

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Exemple . Valeur all

Dans cet exemple, transition-property a la valeur all - donc toutes les propriétés définies pour l'état hover seront modifiées progressivement (dans notre cas, il s'agit de width et height). Tous les changements auront lieu pendant la même durée, définie dans transition-duration :

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

Voir aussi

la propriété transition-duration,
qui définit la durée d'une transition fluide
la propriété transition-delay,
qui définit le délai avant une transition fluide
la propriété transition-timing-function,
qui définit la fonction de temporisation pour une transition fluide
la propriété transition,
qui est un raccourci pour une transition fluide
la propriété animation,
qui permet de créer une animation