Propriété de transition CSS
Exemple
Survolez un élément <div> et modifiez la largeur avec un effet de transition fluide :
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La transition-property
propriété spécifie le nom de la propriété CSS à laquelle l'effet de transition est destiné (l'effet de transition commencera lorsque la propriété CSS spécifiée changera).
Conseil : Un effet de transition peut généralement se produire lorsqu'un utilisateur survole un élément.
Remarque : spécifiez toujours la propriété transition-duration , sinon la durée est de 0 et la transition n'aura aucun effet.
Valeur par défaut: | tout |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.transitionProperty="largeur,hauteur" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Syntaxe CSS
transition-property: none|all|property|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Survolez un élément <div> et modifiez la largeur ET la hauteur avec un effet de transition fluide :
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Pages connexes
Tutoriel CSS : Transitions CSS
Référence HTML DOM : propriété transitionProperty