# Animation CSS

> Mécanisme permettant de faire évoluer les propriétés visuelles d'un élément selon des étapes définies, sans écrire une seule ligne de JavaScript.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/animation-css/

Un logo qui pulse doucement, une bannière qui glisse à l'entrée de la page, un bouton qui attire l'œil sans intervention de l'utilisateur : ce type de mouvement continu et défini à l'avance relève des animations, à distinguer des transitions qui, elles, réagissent à un changement d'état ponctuel.

## Des étapes déclarées, puis appliquées

Tout commence par une règle `@keyframes`, qui décrit l'apparence de l'élément à différents pourcentages de la durée totale (`0%`, `50%`, `100%`, ou `from`/`to`). Cette séquence est ensuite associée à un sélecteur via la propriété raccourcie `animation`, qui combine son nom, sa durée, sa fonction de temporisation et son nombre de répétitions.

Dans un thème WordPress, ces styles sont généralement chargés via `wp_enqueue_style()` depuis `style.css` ou une feuille dédiée, plutôt qu'insérés en ligne, pour bénéficier de la mise en cache du navigateur.

## Exemple

```
@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bloc-mise-en-avant {
  animation: apparition 0.6s ease-out both;
}
```

## Pièges fréquents

- Animer `width` ou `top` force le navigateur à recalculer la mise en page à chaque image ; préférez `transform` et `opacity`, bien plus légers pour le moteur de rendu.
- Une animation en boucle infinie sur un grand nombre d'éléments peut nuire à l'autonomie d'un appareil mobile et mérite d'être limitée avec la média-fonctionnalité `prefers-reduced-motion`.
- Un élément animé avec `transform` crée systématiquement son propre contexte d'empilement, ce qui peut modifier l'ordre d'affichage attendu par rapport à d'autres éléments positionnés.