Propriété CSS transition-property
La transition-property spécifie les noms des propriétés pour la transition. Elle accepte une liste de noms de propriétés séparés par des virgules, ou le mot-clé all pour transitionner toutes les propriétés d'un élément.
La transition-property est l'une des propriétés CSS3.
WARNING
Toutes les propriétés CSS ne peuvent pas être transitionnées.
INFO
Les préfixes fournisseurs (par ex. -webkit-, -moz-, -o-) ne sont plus requis pour les transitions CSS dans les navigateurs modernes.
| Valeur initiale | all |
|---|---|
| S'applique à | Tous les éléments, ainsi que les pseudo-éléments ::before et ::after. |
| Héritée | Non. |
| Animable | Non (contrôle quelles propriétés sont animées, mais n'est pas animée elle-même). |
| Version | CSS3 |
| Syntaxe DOM | object.style.transitionProperty = "height"; |
Note : En CSS moderne, il est recommandé d'utiliser la propriété raccourcie transition à la place.
Syntaxe
Valeurs CSS de transition-property
transition-property: none | all | property | initial | inherit;Exemple de la propriété transition-property :
Exemple de code CSS pour transition-property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
transition-duration: 1s;
transition-property: height;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Exemple de la propriété transition-property avec une transition de largeur et de hauteur :
Autre exemple de code CSS pour transition-property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
transition-duration: 1s;
transition-property: width, height;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Exemple de la propriété transition-property avec une transition de couleur de fond :
Exemple de transition-property avec une transition de couleur de fond :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #666666;
transition-duration: 1s;
transition-property: background-color;
}
div:hover {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Exemple de la propriété transition-property avec une transition de couleur de fond et un décalage de position gauche :
Exemple de transition-property avec une transition de couleur de fond et un décalage de position gauche
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
cursor: pointer;
background-color: #8ebf42;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
}
.element:hover {
left: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<p>Hover over the box to see the element's background color and left position offset transition.</p>
<div class="element"></div>
</div>
</body>
</html>Exemple de la propriété transition-property avec une transition de police :
Exemple de transition-property CSS avec les propriétés letter-spacing, font-size et line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: inline-block;
font-family: sans-serif;
transition-duration: 0.6s;
letter-spacing: 1px;
font-size: 20px;
line-height: 28px;
color: #777777;
transition-property: letter-spacing, font-size, line-height;
}
span:hover {
color: #0f9881;
letter-spacing: 6px;
font-size: 26px;
line-height: 34px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<span>Hover over the text to see the effect</span>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| none | Aucun effet de transition ne s'affichera. |
| all | L'effet de transition s'appliquera à toutes les propriétés. |
| property | Spécifie une liste de noms de propriétés CSS séparés par des virgules pour l'effet de transition. |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite cette propriété de son élément parent. |
Pratique
Quelle affirmation est correcte concernant transition-property ?