Propriété CSS transition-property
La propriété transition-property spécifie les noms des propriétés pour la transition. Cela peut être soit les noms séparés de virgules soit la valeur "all", qui peut être utilisée pour spécifier toutes les propriétés sur un élément à être transitionné.
Pas toutes les propriétés en CSS peuvent être transitionnées.
Pour la compatibilité maximale des navigateurs, des extensions, telles que -webkit-
pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz-
pour Firefox, -o- pour les plus anciennes versions d'Opera, sont utilisées avec cette propriété.
Valeur initiale | all |
Appliquée à | Tous les éléments, les pseudo-éléments ::before et ::after. |
Héritée | Non. |
Animable | Non. |
Version | CSS3 |
Syntaxe DOM | object.style.transitionProperty = "height"; |
Syntaxe
transition-property: none | all | property | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: height;
-moz-transition-property: height;
-o-transition-property: height;
transition-property: height;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h2>Exemple de la propriété transition-property</h2>
<p>Placez la souris sur l'élément pour voir l'effet.</p>
<div></div>
</body>
</html>
Un autre exemple, dans lequel la largeur et la hauteur de l'élément sont transitionnées:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
-webkit-transition-duration: 1s;
-webkit-transition-property: width, height;
-moz-transition-property: width, height;
-o-transition-property: width, height;
transition-property: width, height;
transition-duration: 1s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>Exemple de la propriété transition-property</h2>
<p>Placez la souris sur l'élément pour voir l'effet.</p>
<div></div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
none | Aucun effet de transition n'apparaît. |
all | L'effet de transition s'applique à toutes les propriétés. |
property | Spécifie une liste des noms des propriétés CSS séparées de virgules pour l'effet de transition. |
initial | Fait utiliser la valeur initiale. |
inherit | Hérite la propriété de son élément parent. |
Support de Navigateurs
26.0+ 1.0 -webkit- |
12.0+ |
16.0+ 4.0 -moz- 49.0 -webkit- |
6.1+ 3.0 -webkit- |
12.1+ 15.0 -webkit- |
Pratiquez vos connaissances
Qu'est-ce que la propriété CSS 'transition-property' est utilisée pour?
Correcte!
Incorrecte!