Question 1

Quelle est la différence entre les animations CSS (@keyframes) et les transitions CSS ?

Accepted Answer

Les transitions CSS animent un changement de propriété d'un état à un autre déclenché par un événement (comme `:hover`). Elles ne nécessitent qu'un état de départ et d'arrivée. Les animations CSS avec `@keyframes` s'exécutent indépendamment — elles peuvent boucler, se lancer au chargement de la page sans interaction utilisateur et avoir plusieurs étapes intermédiaires. Utilisez les transitions pour de simples effets hover ; utilisez les animations pour des séquences complexes et autonomes comme des loaders ou des effets d'accroche.

Question 2

À quoi sert animation-fill-mode et quand utiliser 'forwards' ?

Accepted Answer

`animation-fill-mode` contrôle le style de l'élément avant le début et après la fin de l'animation. `forwards` maintient l'élément dans l'état de la dernière image-clé après la fin de l'animation. `backwards` applique le style de la première image-clé pendant la période de délai. `both` combine les deux comportements. Utilisez `forwards` quand vous voulez que l'élément animé reste dans sa position finale (ex. : un élément glissé qui doit rester visible).

Question 3

Comment faire boucler une animation CSS à l'infini ?

Accepted Answer

Définissez `animation-iteration-count: infinite` sur l'élément. Vous pouvez aussi utiliser une valeur numérique comme `animation-iteration-count: 3` pour répéter exactement 3 fois. Combinez avec `animation-direction: alternate` pour inverser à chaque boucle (effet ping-pong) plutôt que de revenir au début. Pour un effet de pulsation, `alternate` avec `infinite` est beaucoup plus fluide qu'une simple boucle.

Question 4

Qu'est-ce que la propriété will-change et améliore-t-elle les performances des animations ?

Accepted Answer

`will-change` indique au navigateur qu'un élément va changer, lui permettant de configurer les couches de composition GPU à l'avance : `will-change: transform, opacity`. Cela peut considérablement améliorer la fluidité des animations sur les pages complexes. Cependant, utilisez-le avec parcimonie — l'appliquer à trop d'éléments gaspille la mémoire GPU et peut nuire aux performances. Ajoutez-le seulement quand vous constatez des saccades, et supprimez-le après la fin de l'animation si possible.

Question 5

Qu'est-ce que la media query prefers-reduced-motion et pourquoi est-elle importante ?

Accepted Answer

`prefers-reduced-motion` détecte les utilisateurs qui ont demandé des mouvements réduits dans les paramètres de leur OS (fréquent chez les personnes atteintes de troubles vestibulaires ou du mal des transports). Entourez les animations d'une media query : `@media (prefers-reduced-motion: reduce) { .animated { animation: none; } }`. C'est une bonne pratique d'accessibilité — ne l'omettez jamais pour les animations impliquant des mouvements, rotations ou clignotements. De nombreux frameworks CSS modernes l'incluent automatiquement.

Générateur d'animations CSS

À propos de cet outil

Questions Fréquentes

Comments & Feedback