CSS Animations
Animations CSS
CSS permet d'animer des éléments HTML sans avoir besoin de JavaScript !
Qu'est-ce que les animations CSS ?
Une animation permet à un élément de changer progressivement d'un style à un autre.
Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, et autant de fois que nécessaire.
Pour utiliser une animation CSS, vous devez spécifier quelques images clés pour celle-ci.
Les images clés définissent les styles que l'élément aura à des moments précis.
Propriétés animation-name et animation-duration en CSS
La propriété animation-name spécifie un nom pour l'animation.
La propriété animation-duration définit la durée d'une animation. Si cette propriété n'est pas spécifiée, aucune animation ne se produira, car la valeur par défaut est de 0s (0 secondes).
Règle @keyframes en CSS
Lorsque vous spécifiez des styles CSS à l'intérieur de la règle @keyframes , l'animation changera progressivement du style actuel au nouveau style à des moments précis.
Pour que l'animation fonctionne, vous devez lier l'animation à un élément.
L'exemple suivant lie l'animation "myAnimation" à l'élément <div>. L'animation durera 4 secondes et changera progressivement la couleur de fond de l'élément <div> de "rouge" à "jaune" :
Exemple
/* Le code d'animation */
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
/* L'élément auquel appliquer l'animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
} Dans l'exemple ci-dessus, nous avons utilisé les mots-clés "from" et "to" dans la règle @keyframes , qui représentent respectivement 0% (début) et 100% (fin).
Il est également possible d'utiliser des pourcentages. En utilisant des pourcentages, vous pouvez ajouter autant de changements de style que vous le souhaitez.
L'exemple suivant changera la couleur de fond de l'élément <div> lorsque l'animation est à 25% complète, 50% complète, et à nouveau lorsque l'animation est à 100% complète :
Exemple
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
} L'exemple suivant changera à la fois la couleur de fond et la position de l'élément <div> lorsque l'animation est à 25% complète, 50% complète, et à nouveau lorsque l'animation est à 100% complète :
Exemple
@keyframes myAnimation {
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;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
} Propriété animation-delay en CSS
La propriété animation-delay spécifie un délai avant le début d'une animation.
L'exemple suivant a un délai de 2 secondes avant de commencer l'animation :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
} Les valeurs négatives sont également autorisées. Si vous utilisez des valeurs négatives, l'animation commencera comme si elle avait déjà été jouée pendant N secondes.
Dans l'exemple suivant, l'animation commencera 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: myAnimation;
animation-duration: 4s;
animation-delay: -2s;
} Propriété animation-iteration-count en CSS
La propriété animation-iteration-count spécifie le nombre de fois qu'une animation doit être exécutée.
L'exemple suivant exécutera l'animation 3 fois avant de s'arrêter :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 3;
} L'exemple suivant utilise la valeur "infinite" pour faire continuer l'animation indéfiniment :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
} Propriété animation-direction en CSS
La propriété animation-direction spécifie si une animation doit être jouée en avant, en arrière ou en cycles alternés.
La propriété animation-direction peut avoir les valeurs suivantes :
-
normal- L'animation est jouée normalement (en avant). C'est la valeur par défaut. -
reverse- L'animation est jouée en direction inverse (en arrière). -
alternate- L'animation est jouée d'abord en avant, puis en arrière. -
alternate-reverse- L'animation est jouée d'abord en arrière, puis en avant.
L'exemple suivant exécutera l'animation en direction inverse (en arrière) :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-direction: reverse;
} L'exemple suivant utilise la valeur "alternate" pour faire fonctionner l'animation d'abord en avant, puis en arrière :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
} L'exemple suivant utilise la valeur "alternate-reverse" pour faire fonctionner l'animation d'abord en arrière, puis en avant :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
} Propriété animation-timing-function en CSS
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- Spécifie une animation avec un début lent, suivi d'une accélération, puis d'une fin lente (c'est la valeur par défaut). -
linear- Spécifie une animation avec une vitesse constante du début à la fin. -
ease-in- Spécifie une animation avec un début 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)- Vous permet de définir vos propres valeurs dans une fonction cubic-bezier.
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;} Propriété animation-fill-mode en CSS
Les animations CSS n'affectent pas un élément avant que la première image clé ne soit jouée ou après que la dernière image clé ait été jouée. 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 qu'elle ne commence, après qu'elle se termine, ou les deux).
La propriété animation-fill-mode peut avoir les valeurs suivantes :
-
none- Valeur par défaut. L'animation n'appliquera aucun style à l'élément avant ou après son exécution. -
forwards- L'élément conservera les valeurs de style définies par la dernière image clé (dépend de animation-direction et animation-iteration-count). -
backwards- L'élément obtiendra les valeurs de style définies par la première image clé (dépend de animation-direction), et conservera cela pendant la période de délai d'animation. -
both- L'animation suivra les règles pour les deux directions, en étendant les propriétés d'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é lorsque l'animation se termine :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-fill-mode: forwards;
} L'exemple suivant permet à l'élément <div> d'obtenir les valeurs de style définies par la première image clé avant que l'animation ne commence (pendant la période de délai d'animation) :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
} L'exemple suivant permet à l'élément <div> d'obtenir les valeurs de style définies par la première image clé avant que l'animation ne commence, et de conserver les valeurs de style de la dernière image clé lorsque l'animation se termine :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
} Propriété abrégée d'animation en CSS
L'exemple ci-dessous utilise six des propriétés d'animation :
Exemple
div {
animation-name: myAnimation;
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é abrégée animation :
Exemple
div {
animation: myAnimation 5s linear 2s infinite alternate;
} Propriétés d'animation en CSS
Le tableau suivant répertorie la règle @keyframes et toutes les propriétés d'animation en CSS :
| Propriété | Description |
|---|---|
| @keyframes | Spécifie le code d'animation |
| animation | Une propriété abrégée pour définir toutes les propriétés d'animation |
| animation-delay | Spécifie un délai pour le début d'une animation |
| animation-direction | Spécifie si une animation doit être jouée en avant, en arrière ou en cycles alternés |
| animation-duration | Spécifie combien de temps une animation doit prendre pour compléter un cycle |
| animation-fill-mode | Spécifie un style pour l'élément lorsque l'animation n'est pas en cours de lecture (avant qu'elle ne commence, après qu'elle se termine, ou les deux) |
| animation-iteration-count | Spécifie le nombre de fois qu'une animation doit être jouée |
| animation-name | Spécifie le nom de l'animation @keyframes |
| animation-play-state | Spécifie si l'animation est en cours d'exécution ou en pause |
| animation-timing-function | Spécifie la courbe de vitesse de l'animation |