1.
Les Transitions en 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 :
CSS
Dans ce chapitre, vous découvrirez les propriétés suivantes :
1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function
Prise en charge des transitions par navigateur
Les nombres du 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-
26.0 10.0 16.0 6.1 12.1
function
Comment utiliser les transitions CSS ?
Pour créer un effet de transition, vous devez spécifier deux éléments :
1. la propriété CSS à laquelle vous souhaitez ajouter un effet
2. la durée de l’effet
Remarque : Si la partie de 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 <div>élément rouge de 100px * 100px. L'<div>element a
également spécifié un effet de transition pour la propriété width, d’une durée de 2 secondes
:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Propriété d'une transition </h1>
<p>Survoler le div pour voir l'effet de la transition :</p><div></div>
</body>
</html>
Quand on survole le bloc, sa largeur va augmenter progressivement jusqu’à atteindre 300%
L’effet de transition commence lorsque la propriété CSS spécifiée (width) change de valeur.
Maintenant, spécifions une nouvelle valeur pour la propriété width lorsqu’un utilisateur passe
la souris sur le <div>element :
Notez que lorsque le curseur sort de l’élément, il revient 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écifier la courbe de vitesse de la transition
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 :
1. 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)
2. linear : spécifie un effet de transition avec la même vitesse du début à la fin
3. ease-in : spécifie un effet de transition avec un démarrage lent
4. ease-out : spécifie un effet de transition avec une fin lente
5. ease-in-out : spécifie un effet de transition avec un démarrage et une fin lents
6. 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 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;}
<!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>
Retarder l’effet de transition
La propriété transition-delay spécifie un délai (en secondes) pour l’effet de transition.
L’exemple suivant a un délai de 1 seconde avant de commencer :
Exemple
div {
transition-delay: 1s;
}
<!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>
Transition + Transformation
L’exemple suivant ajoute un effet de transition à la transformation :
Exemple
div {
transition: width 2s, height 2s, transform 2s;
}
<!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>
Autres 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é transition en format abrégé:
Exemple
div {
transition: width 2s linear 1s;
}
2. Les animations en CSS
CSS permet l’animation d’éléments HTML sans utiliser JavaScript ou Flash!
Dans ce chapitre, vous découvrirez les propriétés suivantes :
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation
Prise en charge des animations par navigateur
Les nombres du tableau spécifient la première version du navigateur qui prend entièrement en
charge la propriété.
Property
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-
43.0 10.0 16.0 9.0 30.0
count
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-
43.0 10.0 16.0 9.0 30.0
function
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0
Que sont les animations CSS ?
Une animation permet à un élément de passer progressivement d’un style à un autre.
Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous
le souhaitez.
Pour utiliser l’animation CSS, vous devez d’abord spécifier certaines images clés pour
l’animation.
Les images clés contiennent les styles que l’élément aura à certains moments.
Règle @keyframes
Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l’animation passe
progressivement du style actuel au nouveau style à certains moments.
Pour qu’une animation fonctionne, vous devez lier l’animation à un élément.
L’exemple suivant lie l’animation « example » au <div>element. L’animation durera 4
secondes et changera progressivement la couleur d’arrière-plan de l'<div>élément de
« rouge » à « jaune »:
Exemple
/* The animation code */
@keyframes example
{
from { background-color: red; }
to { background-color: yellow; }
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
Remarque : La propriété animation-duration définit la durée d’une animation. Si la
propriété animation-duration n’est pas spécifiée, aucune animation ne se produit, car la
valeur par défaut est 0s (0 seconds).
Dans l’exemple ci-dessus, nous avons spécifié quand le style changera en utilisant les mots-
clés « from » et « to » (ce qui représente 0% (début) et 100% (complet)).
Il est également possible d’utiliser le pourcentage. En utilisant le pourcentage, vous pouvez
ajouter autant de changements de style que vous le souhaitez.
L’exemple suivant modifie la couleur d’arrière-plan de l’élément <div> lorsque l’animation
est terminée à 25 %, à 50 % et à nouveau lorsque l’animation est terminée à 100 % :
Exemple
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
L’exemple suivant modifie à la fois la couleur d’arrière-plan et la position de l’élément <div>
lorsque l’animation est terminée à 25 %, 50 % terminée et à nouveau lorsque l’animation est
terminée à 100 % :
Exemple
/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
ADVERTISEMENT
Retarder une animation
La propriété animation-delay spécifie un délai pour le début d’une animation.
L’exemple suivant a un délai de 2 secondes avant de démarrer l’animation :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Les valeurs négatives sont également autorisées. Si vous utilisez des valeurs négatives,
l’animation démarre comme si elle avait déjà été jouée pendant N secondes.
Dans l’exemple suivant, l’animation démarre comme si elle avait déjà été jouée pendant 2
secondes :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Définir le nombre de fois qu’une animation doit s’exécuter
La propriété animation-iteration-count spécifie le nombre de fois qu’une animation doit
s’exécuter.
L’exemple suivant exécutera l’animation 3 fois avant qu’elle ne s’arrête :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
L’exemple suivant utilise la valeur « infinite » pour que l’animation se poursuive pour
toujours :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Exécuter l’animation dans le sens inverse ou dans d’autres cycles
La propriété animation-direction spécifie si une animation doit être lue en avant, en
arrière ou dans d’autres cycles.
La propriété animation-direction peut avoir les valeurs suivantes :
• normal - L’animation est lue normalement (vers l’avant). Il s’agit de la valeur par défaut
• reverse - L’animation est lue dans le sens inverse (à l’envers)
• alternate - L’animation est lue d’abord vers l’avant, puis vers l’arrière
• alternate-reverse - L’animation est lue d’abord vers l’arrière, puis vers l’avant
L’exemple suivant exécute l’animation dans le sens inverse (vers l’arrière) :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
L’exemple suivant utilise la valeur « alternate » pour que l’animation s’exécute d’abord vers
l’avant, puis vers l’arrière :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
L’exemple suivant utilise la valeur « alternate-reverse » pour que l’animation s’exécute
d’abord vers l’arrière, puis vers l’avant :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Spécifier la courbe de vitesse de l’animation
La propriété animation-timing-function spécifie la courbe de vitesse de l’animation.
La propriété animation-timing-function peut avoir les valeurs suivantes :
• ease - Specifies une animation avec un démarrage lent, puis rapide, puis une fin lente (c’est
la valeur par défaut)
• linear - Spécifie une animation avec la même vitesse du début à la fin
• ease-in - Spécifie une animation avec un démarrage lent
• ease-out - Spécifie une animation avec une fin lente
• ease-in-out - Spécifie une animation avec un début et une fin lents
• cubic-bezier(n,n,n,n) - 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 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Spécifier le mode de remplissage d’une animation
Les animations CSS n’affectent pas un élément avant la lecture de la première image clé ou
après la lecture de la dernière image clé. La propriété animation-fill-mode peut remplacer ce
comportement.
La propriété animation-fill-mode spécifie un style pour l’élément cible lorsque
l’animation n’est pas en cours de lecture (avant son début, après sa fin, ou les deux).
La propriété animation-fill-mode peut avoir les valeurs suivantes :
1. none - Valeur par défaut. L’animation n’appliquera aucun style à l’élément avant ou après
son exécution
2. forwards - L’élément conservera les valeurs de style définies par la dernière image clé
(dépend de la direction de l’animation et du nombre d’itérations d’animation)
3. backwards - L’élément obtiendra les valeurs de style définies par la première image clé
(dépend de la direction de l’animation) et les conservera pendant la période de retard de
l’animation.
4. les deux - L’animation suivra les règles pour les avants et les arrières, en étendant les
propriétés de l’animation dans les deux sens
L’exemple suivant permet à l’élément <div> de conserver les valeurs de style de la dernière
image clé à la fin de l’animation :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
L’exemple suivant permet à l'<div>element d’obtenir les valeurs de style définies par la
première image clé avant le début de l’animation (pendant la période de retard de l’animation)
:
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
L’exemple suivant permet à l'<div>element d’obtenir les valeurs de style définies par la
première image clé avant le début de l’animation et de conserver les valeurs de style de la
dernière image clé à la fin de l’animation :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Animation Shorthand, propriété
L’exemple ci-dessous utilise six des propriétés d’animation :
Exemple
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Le même effet d’animation que ci-dessus peut être obtenu en utilisant la propriété
d’animation sténographie :
Exemple
div {
animation: example 5s linear 2s infinite alternate;
}