Pour créer une animation en CSS, vous avez besoin d’utiliser les clés `@keyframes` et `animation`.
Voici un exemple base de comment vous pouvez faire cela :
```
@keyframes monAnimation {
0% {background-color: red;}
50% {background-color: blue;}
100% {background-color: green;}
}
.monElement {
animation-name: monAnimation;
animation-duration: 4s;
}
```
Dans cet exemple, l’animation commence avec un fond rouge, change en bleu à la moitié du temps, et finit en vert. `monAnimation` est le nom de l’animation, qui est utilisé pour lier l’animation à un élément spécifique, dans ce cas `.monElement`.
Voici quelques propriétés que vous pouvez utiliser avec `animation` :
- `animation-name` : spécifie le nom de l’animation
- `animation-duration` : spécifie combien de temps une animation doit prendre pour compléter un cycle
- `animation-timing-function` : spécifie la vitesse de l’animation à différentes étapes
- `animation-delay` : spécifie un délai pour le début de l’animation
- `animation-iteration-count` : spécifie combien de fois une animation doit être jouée
- `animation-direction` : spécifie si l’animation doit être jouée à l’envers, en avant, ou dans les deux sens
Il est également possible d’utiliser toutes ces propriétés en une seule ligne, comme ceci :
```
.monElement {
animation: monAnimation 4s linear 2s infinite alternate;
}
```
Dans cet ordre la ligne signifie : nom de l’animation, durée, timing-function, délai, nombre d’itération, direction.
