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é.
| Propriété | |||||
|---|---|---|---|---|---|
| transition | 26,0 | 10.0 | 16.0 | 6.1 | 12.1 |
| délai de transition | 26,0 | 10.0 | 16.0 | 6.1 | 12.1 |
| durée de transition | 26,0 | 10.0 | 16.0 | 6.1 | 12.1 |
| propriété de transition | 26,0 | 10.0 | 16.0 | 6.1 | 12.1 |
| fonction de synchronisation de transition | 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
Note: 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
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
fond : rouge ;
transition : largeur 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
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 :
Spécification de la courbe de vitesse de la transition
Le transition-timing-function La proprié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 {fonction de synchronisation de transition : linéaire ;}
#div2 {transition-timing-function : facilité ;}
#div3 {fonction de synchronisation de transition : facilité ;}
#div4 {transition-timing-function : facilité ;}
#div5 {fonction de synchronisation de transition : entrée-sortie ;}
Essayez-le vous-même »
Retarder l’effet de transition
Le transition-delay La proprié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 :
Transition + Transformation
L’exemple suivant ajoute un effet de transition à la transformation :
Plus d’exemples de transition
Les propriétés de transition CSS peuvent être spécifiées une par une, comme ceci :
Exemple
div {
propriété de transition : largeur ;
durée de transition : 2 s ;
fonction de synchronisation de transition : linéaire ;
délai de transition : 1 s ;
}
Essayez-le vous-même »
ou en utilisant la propriété abrégée transition:
Propriétés de transition CSS
Le tableau suivant répertorie toutes les propriétés de transition CSS :
| Propriété | Description |
|---|---|
| transition | Une propriété abrégée pour définir les quatre propriétés de transition en une seule propriété |
| délai de transition | Spécifie un délai (en secondes) pour l’effet de transition |
| durée de transition | Spécifie le nombre de secondes ou de millisecondes qu’un effet de transition prend pour se terminer |
| propriété de transition | Spécifie le nom de la propriété CSS pour laquelle l’effet de transition est |
| fonction de synchronisation de transition | Spécifie la courbe de vitesse de l’effet de transition |
#Transitions #CSS