Les animations vont, comme les transitions, nous nous permettre de modifier la valeur d’une propriété progressivement mais en utilisant cette fois-ci des keyframes.
Nous allons pouvoir gérer le comportement des animations en CSS en définissant la durée d’animation, le nombre de répétition et le comportement de répétition.
Les Animations permettent de modifier les valeurs de propriétés CSS plusieurs fois dans le temps, tel un scénario Flash. C’est en fait plusieurs transitions qui s’enchainent !
Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Lorsqu'ils sont employés, les mots-clés from et to correspondent respectivement à 0 et 100%.
Survolez-moi !
La boîte doit devenir rouge à la moitié de la durée totale de l'animation, pour revenir à sa couleur initiale à la fin de l’animation.
Nous aurons donc trois keyframes : à 0%, 50% et 100%.
À chaque étape nous indiquerons la couleur à atteindre avec la propriété background-color.
L’animation est nommée monAnimation.
@keyframes monAnimation {
0% {
background-color: blue;
}
50%{
background-color: red;
}
100%{
background-color: blue;
}
}