Les animations en CSS

Les animations permettent de créer des mouvements plus complexes que les transitions. Elles utilisent des keyframes (images-clés) pour définir plusieurs étapes d’une animation.

1. La règle @keyframes

Elle définit les différentes étapes de l’animation. On peut utiliser from / to ou des pourcentages.

@keyframes exemple {
    from { opacity: 0; }
    to   { opacity: 1; }
}
    

@keyframes mouvement {
    0%   { left: 0px; }
    50%  { left: 100px; }
    100% { left: 0px; }
}
    

2. Propriété animation-name

Indique le nom de l’animation à utiliser.

animation-name: mouvement;
    

3. Propriété animation-duration

Définit la durée totale de l’animation.

animation-duration: 2s;
    

4. Propriété animation-timing-function

Contrôle la vitesse de progression de l’animation. Valeurs courantes :

• ease
• linear
• ease-in
• ease-out
• ease-in-out

5. Propriété animation-delay

Ajoute un délai avant le début de l’animation.

animation-delay: 0.5s;
    

6. Propriété animation-iteration-count

Définit combien de fois l’animation se répète.

• 1 (par défaut)
• infinite
• un nombre précis

animation-iteration-count: infinite;
    

7. Propriété animation-direction

Contrôle le sens de l’animation :

• normal
• reverse
• alternate (aller-retour)
• alternate-reverse

animation-direction: alternate;
    

8. Propriété animation-fill-mode

Détermine l’état de l’élément avant et après l’animation.

• none
• forwards
• backwards
• both

animation-fill-mode: forwards;
    

9. La forme raccourcie animation

On peut tout regrouper en une seule ligne :

animation: mouvement 2s ease-in-out 0.5s infinite alternate forwards;
    

10. Exemple complet

Voici un exemple conceptuel (sans CSS ici, juste pour comprendre la logique) :

/* Définition des étapes */
@keyframes clignote {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

/* Application à un élément */
.alerte {
    animation: clignote 1s linear infinite;
}
    

Résultat : l’élément clignote en continu.