Animations CSS avec @keyframes dans React

Une règle @keyframes décrit une animation en plusieurs étapes en indiquant les valeurs des propriétés à différents points de la chronologie, avec from/to ou des pourcentages comme 0%, 50% et 100%.

Contrairement aux transitions, les images clés peuvent décrire un mouvement complexe en plusieurs phases qui s’exécute seul, sans changement d’état à chaque étape.

Vous appliquez un ensemble d’images clés avec la propriété animation : animation: slideIn 400ms ease forwards. Elle regroupe le nom, la durée, la fonction de temporisation et le mode de remplissage.

Le mode de remplissage forwards maintient l’élément sur les valeurs de sa dernière image clé lorsque l’animation se termine, ce qui empêche un retour instantané au début.

Dans React, vous ajoutez généralement une classe contenant la déclaration animation lorsque l’état devient vrai. Par exemple, l’ajout de is-entering démarre les images clés au moment où l’élément est monté ou lorsqu’un indicateur change.

La logique d’animation reste ainsi dans CSS, tandis que React décide uniquement du moment où la classe doit être ajoutée.

animation-fill-mode contrôle les styles appliqués avant et après l’exécution de l’animation. forwards conserve la dernière image clé, backwards applique la première image clé pendant tout délai éventuel, et both fait les deux.

Sans forwards, un élément qui s’anime vers un état visible redeviendrait invisible à la fin de l’animation.

animation-direction: alternate joue l’animation vers l’avant puis vers l’arrière à chaque répétition. Associée à animation-iteration-count: infinite, cette propriété crée un mouvement régulier d’aller-retour, semblable à un effet de pulsation ou de respiration.

C’est utile pour les indicateurs de chargement ou pour attirer subtilement l’attention par le mouvement.

animation-play-state peut valoir running ou paused. Vous pouvez le piloter depuis l'état React, par exemple en mettant en pause un bandeau défilant au survol en changeant de classe.

Comme elle se met en pause au lieu de se réinitialiser, l'animation reprend exactement là où elle s'était arrêtée.

Une animation par images clés ne se joue qu'une seule fois lorsque sa classe est appliquée pour la première fois ; réappliquer la même classe ne la redémarre pas. L'astuce React la plus propre consiste à modifier la key de l'élément afin que React remonte un nouveau nœud et rejoue l'animation depuis le début.

Par exemple, key={count} sur une notification la remonte chaque fois que count est incrémenté.

Certains utilisateurs activent la réduction des mouvements dans leur OS pour leur confort ou leur accessibilité. Entourez les animations non essentielles de @media (prefers-reduced-motion: reduce) et désactivez-les ou raccourcissez-les dans ce contexte.

Respecter cette préférence rend votre interface plus inclusive et évite de provoquer de l'inconfort.

Pour animer des éléments lorsqu'ils entrent dans la zone d'affichage, utilisez un IntersectionObserver dans un useEffect. Lorsque l'entrée devient visible, vous modifiez l'état, ce qui ajoute la classe d'animation.

Cela produit des effets de révélation au défilement sans faire fonctionner de lourds écouteurs de défilement à chaque image.

animation-delay décale le début de chaque animation par images clés. En attribuant des délais croissants à une liste d'éléments, vous les faites s'animer en séquence pour obtenir une révélation chorégraphiée.

Vous pouvez calculer le délai de chaque élément dans React avec style={{ animationDelay: i * 80 + 'ms' }}.

Utilisez les transitions pour de simples changements entre deux états déclenchés par une interaction, et les images clés lorsque vous avez besoin d'un mouvement en plusieurs étapes, d'une boucle ou d'une animation qui s'exécute indépendamment d'une bascule d'état.

Les deux sont entièrement gérés par CSS : React décide seulement quand les classes sont appliquées et le navigateur gère les images.

Évaluez votre compréhension du comportement des animations par images clés.

Vous avez appris à définir @keyframes, à les appliquer avec la notation abrégée animation, à contrôler le mode de remplissage et la direction, à mettre en pause et à relancer des animations, ainsi qu'à révéler des éléments au défilement avec IntersectionObserver.

Vous avez également vu comment respecter prefers-reduced-motion pour proposer des mouvements accessibles.