3ième S.I.
Sciences et Technologies de l’Informatique
Animations
Pour créer une animation CSS on doit :
créer et nommer l’animation (avec @keyframes)
attacher cette animation à un élément (avec animation-name)
1. Notre première animation :
On commence par créer une animation :
@keyframes taille {
from {width: 0px;}
to {width: 200px;}
}
On utilise la règle @keyframes et on nomme l’animation taille.
Rque : Il existe quelques règles avec le signe @ (nommées at-rules) qui permettent
d’encapsuler plusieurs règles pour le processeur CSS du navigateur, par
exemple @media, @page…
Ici, on change la largeur (width) de (from) 0px à (to) 200px.
On attache ensuite cette animation à un élément :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
}
On utilise :
animation-name : pour désigner l’animation utilisée. (obligatoire)
animation-duration : pour définir la durée de l’animation (par défaut elle est de 0
seconde). (obligatoire)
2. Plusieurs étapes :
L’intérêt des animations est de pouvoir gérer des étapes intermédiaires. Voici une nouvelle
version de l’animation :
@keyframes taille {
0% {width: 0px;}
50% {width: 300px;}
100% {width: 200px;}
}
1
3ième S.I. Sciences et Technologies de l’Informatique
On a 3 étapes :
le départ (0%) avec une largeur de 0px
la moitié (50%) avec une largeur de 300px
l’arrivée (100%) avec une largeur de 200px
3. Plusieurs propriétés :
On peut aussi changer plusieurs propriétés :
@keyframes taille {
0% {width: 0px; background-color: red;}
25% {width: 50px; background-color: yellow;}
50% {width: 100px; background-color: green;}
75% {width: 150px; background-color: pink;}
/* 100% {width: 200px; background-color: blue;} devient facultatif car
l'état 100% est déjà l'état du div "final".*/
}
4. Démarrage différé :
Dans les exemples ci-dessus, l’animation commence dès le chargement, ce qui n’est pas
toujours souhaitable. On dispose de la propriété animation-delay pour différer le départ de
la durée voulue.
En poursuivant notre exemple ça pourrait donner ce code :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
animation-delay: 2s;
}
5. Nombre d’exécutions :
Par défaut, une animation est exécutée une seule fois, si on en veut plus, il faut utiliser la
propriété animation-iteration-count. Toujours avec notre exemple :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
animation-iteration-count: 2;
}
Rque :
Si on veut un nombre d’exécutions infini, au lieu de mettre une valeur on utilisera infinite.
6. Sens de l’animation :
2
3ième S.I. Sciences et Technologies de l’Informatique
Par défaut une animation va dans le sens normal mais on peut aussi l’obliger à aller dans
l’autre sens en utilisant la propriété animation-direction. On dispose de deux valeurs :
reverse : on va dans le sens inverse.
alternate : on alterne d’un sens à l’autre (dans ce cas évidemment il faut prévoir au
moins deux exécutions).
div {
height: 100px;
width: 200px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
7. Progression de l’animation :
On peut modifier l’animation avec la propriété animation-timing-function et ces valeurs :
ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par défaut).
linear : même vitesse du début à la fin.
ease-in : début lent.
ease-out : fin lente.
ease-in-out : début et fin lents.
8. Le style avant et après l’animation :
Le style avant et après l’animation est défini par défaut par les règles de l’élément. On a la
possibilité de changer ce comportement en utilisant la propriété animation-fill-mode. On
dispose de ces valeurs :
none : comportement par défaut (en gros ça sert à rien)
forwards : on garde les valeurs calculées lors de la dernière étape
backwards : on garde les valeurs calculées lors de la première étape
L’interprétation peut être délicate selon les répétitions et sens des animations.
Par exemple avec ce code :
@keyframes taille {
0% {width: 0px ;}
100% {width: 200px ;}
}
div {
height: 100px;
width: 200px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Au départ et pendant le délai de démarrage, la largeur sera de 0px qui correspond à la
première étape (à 0%) parce qu’on a utilisé la valeur backwards pour animation-fill-mode.
9. Action sur une animation :
3
3ième S.I. Sciences et Technologies de l’Informatique
Pour l’instant nous n’avons pas vu de possibilité d’intervention sur une animation. On
dispose de la propriété animation-play-state qui permet une interaction avec ces valeurs :
running : valeur par défaut de l’animation en action.
paused : animation en pause.
Voici le code d’un exemple où on met l’animation en pause en survolant l’élément :
@keyframes taille {
0% {width: 50px ;}
100% {width: 200px ;}
}
div {
height: 100px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
div:hover {
animation-play-state: paused;
}
On peut faire exactement l’inverse et mettre l’animation en action seulement au survol :
@keyframes taille {
0% {width: 50px}
100% {width: 200px}
}
div {
height: 100px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}