Les transitions CSS vous permettent de modifier les valeurs des propriétés en douceur, sur une durée donnée.
Passez la souris sur l'élément ci-dessous pour voir un effet de transition CSS :
Dans ce chapitre, vous découvrirez les propriétés suivantes :
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Pour créer un effet de transition, vous devez spécifier deux choses :
la propriété CSS à laquelle vous souhaitez ajouter un effet
la durée de l'effet
Remarque : Si la partie durée n'est pas spécifiée, la transition n'aura aucun effet, car la valeur par défaut est 0.
L'exemple suivant montre un élément <div> rouge de 100 px * 100 px. Le <div> element a également spécifié un effet de transition pour la propriété width, d'une durée de 2 secondes :
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
L'effet de transition commencera lorsque la propriété CSS spécifiée (largeur) changera de valeur.
Maintenant, spécifions une nouvelle valeur pour la propriété width lorsqu'un utilisateur passe la souris sur l'élément <div> :
div:hover
{
width: 300px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>
Notez que lorsque le curseur sort de l'élément, il revient progressivement à son style d'origine.
L'exemple suivant ajoute un effet de transition pour les propriétés width et height, avec une durée de 2 secondes pour la largeur et 4 secondes pour la hauteur :
div
{
transition: width 2s, height 4s;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>
La propriété transition-timing-function
spécifie la courbe de vitesse de l'effet de transition.
La propriété transition-timing-function peut avoir les valeurs suivantes :
ease
- spécifie un effet de transition avec un démarrage lent, puis rapide, puis une fin lente (c'est la valeur par défaut)
linear
- spécifie un effet de transition avec la même vitesse du début à la fin
ease-in
- spécifie un effet de transition avec un démarrage lent
ease-out
- spécifie un effet de transition avec une fin lente
ease-in-out
- spécifie un effet de transition avec un début et une fin lents
cubic-bezier(n,n,n,n)
- vous permet de définir vos propres valeurs dans une fonction cubique-bézier
L'exemple suivant montre quelques-unes des différentes courbes de vitesse pouvant être utilisées :
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
</body>
</html>
La propriété transition-delay
spécifie un délai (en secondes) pour l'effet de transition.
L'exemple suivant présente un délai d'une seconde avant le démarrage :
div {
transition-delay: 1s;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>
L'exemple suivant ajoute un effet de transition à la transformation :
div {
transition:
width 2s, height 2s, transform 2s;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
</body>
</html>
Les propriétés de transition CSS peuvent être spécifiées une par une, comme ceci :
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Properties Specified One by One</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>
ou en utilisant la propriété raccourcie transition
:
div
{
transition: width 2s linear 1s;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Using The transition Shorthand Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>
Le tableau suivant répertorie toutes les propriétés de transition CSS :
Une propriété raccourcie pour définir les quatre propriétés de transition en une seule propriété
Spécifie un délai (en secondes) pour l'effet de transition
Spécifie le nombre de secondes ou de millisecondes nécessaires à l'exécution d'un effet de transition.
Spécifie le nom de la propriété CSS à laquelle l'effet de transition est destiné
Spécifie la courbe de vitesse de l'effet de transition