CSS — Animations

Définissez les étapes d’une animation avec @keyframes. Limitez les répétitions décoratives, évitez les clignotements et prévoyez une variante à mouvements réduits qui conserve l’information et les états de l’interface.

Les animations CSS utilisent @keyframes pour définir plusieurs étapes. Les propriétés animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction et animation-fill-mode règlent leur lecture. Mettez en pause les animations décoratives répétées lorsqu’elles ne sont pas visibles et évitez tout effet de clignotement.

Les étapes et le raccourci animation

@keyframes définit des étapes en pourcentages, ou avec from et to. animation-fill-mode: both combine backwards et forwards : dans cet exemple joué une fois dans le sens normal, l’état from s’applique pendant le délai et l’état to reste après la fin. Avec d’autres sens de lecture ou plusieurs répétitions, l’étape conservée dépend aussi de ces réglages. Si vous utilisez animation-iteration-count: infinite, prévoyez comment mettre le mouvement en pause.

@keyframes settle {
  from { opacity: 0; translate: 0 0.4rem; }
  to { opacity: 1; translate: 0 0; }
}
.notice { animation: settle 280ms ease both; }

Conserver le message lorsque les mouvements sont réduits

Remplacez un glissement par un changement immédiat d’opacité ou de bordure, tout en gardant le message visible. Évitez les alternances rapides entre couleurs très contrastées. Si un chargement doit être signalé, ajoutez un état textuel qui reste compréhensible sans animation.