Transitions
Les transitions permettent, en utilisant simplement du code CSS, de changer la valeur d’une propriété de manière douce, pendant une durée déterminée.
Pour ce faire, le langage CSS met à disposition 5 propriétés :
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Compatibilité avec les différents navigateurs internet
Voici le tableau résumant la compatibilité des propriétés de transition, en fonction du navigateur internet :
Propriété | Chrome | Edge | Firefox | Safari | Opéra |
---|---|---|---|---|---|
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 |
Utiliser les transitions CSS
Pour utiliser les transitions CSS, il faut spécifier 2 choses :
- La propriété sur laquelle la transition doit s’appliquer
- La durée de la transition
Remarque : Si aucune valeur n’est définie pour la durée, celle-ci n’aura pas d’effet, car la valeur attribuée par défaut est 0.
Exemple :
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s; /* La transition concerne la largeur de la div et prend 2 secondes */
}
div:hover {
width: 300px; /* Au passage de la souris sur la div, la largeur s'étends à 300 pixels */
}
Remarque : Dans l’exemple ci-dessus, lorsque la souris ne survole plus la <div>
, celle-ci reprend progressivement sa taille originelle.
Ajouter une transition sur plusieurs propriétés
Pour changer la valeur de plusieurs propriétés, il faut séparer chaque nom de propriété + durée par une virgule.
Exemple :
div {
width: 100px;
height: 100px;
transition: height 2s, width 2s;
}
div:hover {
height: 100px;
width: 300px;
}
Remarque : Pour les transitions, la règle doit être appliquée sur un élément non-hover, car, le cas échéant, elle ne s’effectuera que dans un sens. En effet, si la propriété transition
est utilisée sur un élément ayant la pseudo-classe :hover
, la transition s’effectuera, mais, ensuite, l’élément ne reviendra pas à son état initial de manière progressive.
transition: all
Lorsque toutes les propriétés définies dans un bloc sont modifiées lors de la transition, la valeur all peut être donnée à la propriété transition.
Exemple :
div {
width: 100px;
height: 100px;
transition: all;
}
div:hover {
height: 100px;
width: 300px;
}
Dans cet exemple, les propriétés width
et height
sont modifiées lors de la transition. La valeur all
est donc passée à la propriété transition
.
Définir la courbe de vitesse de la transition
La courbe de la vitesse signifie que la transition va passer par plusieurs vitesses, avant de terminer dans l’état spécifié. Pour définir la courbe de vitesse de transition, il faut utiliser la propriété transition-timing-function
.
Cette propriété reçoit une des 6 valeurs suivantes :
ease
: L’effet de transition commence doucement, puis devient plus rapide, puis finit doucement. C’est la valeur par défaut.linear
: Définit une transition avec la même vitesse du début à la fin.ease-in
: Définit une transition avec un début lentease-out
: Définit une transition avec une fin lenteease-in-out
: Définit une transition avec un début et une fin lentecubic-bezier(n,n,n)
: Permet au développeur de préciser ses propres valeurs
Exemple :
div {
width: 100px;
height: 100px;
transition: height 2s, width 2s;
}
div:hover {
transition-timing-function: ease-in-out; /* La transition a un début et une fin lente */
height: 100px;
width: 300px;
}
Retarder la transition
La propriété transition-delay
permet de définir un “temps d’attente” avant que la transition commence. Cette propriété prend en valeur le temps d’attente avant de commencer la transition.
Exemple :
div {
width: 100px;
height: 100px;
transition: height 3s, width 3s;
transition-delay: 1s; /* Le navigateur attend une seconde avant de démarrer la transition */
}
Transition et transformation
Le langage CSS permet également d’ajouter une transition à un effet de transformation. Pour ce faire, il faut simplement préciser que la transition s’applique également à la propriété transform
et il faut également préciser la durée de la transition.
Exemple :
div {
width: 100px;
height: 100px;
transition: height 2s, width 2s, transform 2s;
}
Propriété raccourcie
Pour une transition, il est possible d’utiliser toutes les propriétés une par une. Cependant, pour économiser des lignes de code, il est possible d’utiliser la propriété raccourcie transition.
Cette propriété prend, dans cet ordre, les valeurs suivantes :
- La propriété sur laquelle la transition s’applique
- La durée de la transition
- La courbe de durée
- La durée d’attente avant de démarrer la transition
Exemple :
div {
transition: width 4s ease-out 1s;
}
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !