Transitions CSS
Transitions CSS
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 :
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Prise en charge du navigateur pour les transitions
Les nombres dans le tableau indiquent 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 |
Comment utiliser les transitions CSS ?
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 100px * 100px. L'élément <div> a également spécifié un effet de transition pour la propriété width, d'une durée de 2 secondes :
Exemple
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 survole l'élément <div> :
Exemple
div:hover
{
width: 300px;
}
Notez que lorsque le curseur sort de l'élément, il reviendra progressivement à son style d'origine.
Modifier plusieurs valeurs de propriété
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 de 4 secondes pour la hauteur :
Exemple
div
{
transition: width 2s, height 4s;
}
Spécification de la courbe de vitesse de la transition
La transition-timing-functionpropriété 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 se termine lentement (c'est la valeur par défaut)linear- spécifie un effet de transition avec la même vitesse du début à la finease-in- spécifie un effet de transition avec un démarrage lentease-out- spécifie un effet de transition avec une fin lenteease-in-out- spécifie un effet de transition avec un début et une fin lentscubic-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 qui peuvent être utilisées :
Exemple
#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;}
Retarder l'effet de transition
La transition-delaypropriété spécifie un délai (en secondes) pour l'effet de transition.
L'exemple suivant a un délai de 1 seconde avant le démarrage :
Exemple
div {
transition-delay: 1s;
}
Transition + Transformation
L'exemple suivant ajoute un effet de transition à la transformation :
Exemple
div {
transition:
width 2s, height 2s, transform 2s;
}
Plus d'exemples de transition
Les propriétés de transition CSS peuvent être spécifiées une par une, comme ceci :
Exemple
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
ou en utilisant la propriété abrégée transition:
Exemple
div
{
transition: width 2s linear 1s;
}
Propriétés de transition CSS
Le tableau suivant répertorie toutes les propriétés de transition CSS :
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |