Animations & Transitions

Pourquoi le mouvement est essentiel

Le mouvement est un moyen de communication. Un bouton qui s’anime avec fluidité lors du clic, un panneau qui glisse pour apparaître ou une liste qui se réorganise en douceur : tous ces éléments indiquent à l’utilisateur ce qui vient de se passer. Bien maîtrisé, le mouvement rend une interface réactive et soignée. Mal utilisé, il devient distrayant et frustrant.

CSS vous propose trois outils : les transitions pour les changements d’état, les keyframes pour les séquences et les transforms pour le mouvement. Une fois ces concepts maîtrisés, vous aurez rarement besoin de JavaScript pour vos animations quotidiennes.

Transitions

Une transition permet d’interpoler fluidement deux états et s’exécute lorsqu’une propriété change.

/* button.css */
.button {
  background: #2563eb;
  transform: translateZ(0);
  transition: background-color 150ms ease, transform 150ms ease;
}

.button:hover {
  background: #3b82f6;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

La syntaxe raccourcie prend en paramètres la propriété, la durée, la fonction de timing et un délai optionnel. Les transitions nécessitent un déclencheur : :hover, :focus, :checked, un changement de classe via JavaScript ou une media query. Gardez des durées courtes — 150 à 300 millisecondes sont généralement suffisantes pour fournir un retour visuel.

Transformations

Les transformations modifient l’apparence d’un élément sans affecter la disposition des autres, c’est pourquoi elles sont peu coûteuses à animer.

/* transform.css */
.move { transform: translateX(24px); }
.grow { transform: scale(1.1); }
.turn { transform: rotate(45deg); }
.skew { transform: skewX(-10deg); }

.combo {
  transform: translateY(-4px) scale(1.02) rotate(-1deg);
}

translate, scale et rotate peuvent être exécutées par le compositeur, elles restent donc fluides même en cas de charge importante. À l’inverse, l’animation de width, height, top ou margin force le navigateur à recalculer le layout à chaque image.

Keyframes

Pour les animations multi-étapes ou en boucle, utilisez @keyframes et animation.

/* spinner.css */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 800ms linear infinite;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.enter {
  animation: fade-up 300ms ease-out both;
}

Le raccourci animation permet de définir le nom, la durée, le timing, le délai, le nombre d’itérations, la direction et le mode de remplissage. both est particulièrement utile pour les animations d’entrée car il applique les états des premières et dernières keyframes.

Fonctions de timing

La fonction de timing contrôle le ressenti. L’assouplissement (easing) est ce qui rend le mouvement naturel plutôt que mécanique.

/* easing.css */
.linear { transition-timing-function: linear; }
.ease-out { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

• ease-out pour les éléments qui entrent sur l’écran, afin qu’ils décélèrent.
• ease-in pour les éléments qui sortent.
• ease-in-out pour les mouvements entre deux états visibles.
• steps() pour les effets d’images saccadées, comme l’effet de saisie de texte ou l’animation de sprites.

Performance

La règle est simple : animez transform et opacity. Ces propriétés peuvent être gérées par le compositeur, court-circuitant ainsi les étapes de layout et de paint. Tout ce qui modifie la géométrie déclenche un layout, et tout ce qui modifie la couleur ou l’ombre déclenche un paint.

/* hint.css */
.animated {
  will-change: transform;
}

will-change indique qu’un élément est sur le point d’être animé, permettant ainsi au navigateur de le promouvoir sur sa propre couche (layer). Utilisez-le avec parcimonie et supprimez-le une fois l’animation terminée ; trop de couches promues gaspillent de la mémoire. Consultez le guide Browsers & Rendering pour en comprendre les raisons.

Accessibilité et réduction du mouvement

Certains utilisateurs ressentent des vertiges ou des nausées face aux animations, et le système d’exploitation permet d’exposer cette préférence.

/* reduced.css */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Une règle globale comme celle-ci constitue une base sûre. Pour une approche plus nuancée, remplacez les mouvements importants par un simple fondu. Ne transmettez jamais une information uniquement via le mouvement.

Transitions de vue

L’View Transitions API permet d’animer nativement le passage entre deux états du DOM ou deux pages.

// navigate.js
document.startViewTransition(() => {
  updateTheDOM();
});

Le navigateur prend un instantané des états ancien et nouveau, puis anime la transition entre les deux ; vous contrôlez l’effet via des pseudo-éléments CSS. C’est une solution idéale pour la navigation entre pages et le réordonnancement de listes. Prévoyez un fallback simple pour les navigateurs qui ne le supportent pas.

Patterns

• Feedback au survol et au focus. Transitions courtes sur la couleur et la transformation.
• Animations d’entrée. Fondu et glissement avec le mode de remplissage both.
• Listes décalées (staggered). Délai léger pour chaque élément, souvent défini via une variable CSS et un style inline.
• Skeletons et spinners. Keyframes en boucle pour signaler le chargement.
• Accordéons et tiroirs (drawers). Transition de la hauteur via grid-template-rows de 0fr à 1fr, pour une animation fluide.

Bonnes pratiques

• Animez transform et opacity ; évitez les propriétés de mise en page (layout).
• Gardez des durées courtes : 150–300ms pour le feedback, plus long pour mettre l’accent sur un élément.
• Utilisez ease-out pour les entrées et ease-in pour les sorties.
• Respectez la préférence prefers-reduced-motion.
• Utilisez will-change avec parcimonie et nettoyez le DOM après l’animation.
• Privilégiez CSS pour les cas simples et JavaScript pour les séquences complexes.
• Testez sur des appareils peu puissants, et pas seulement sur un ordinateur rapide.

Erreurs courantes

• Animer la largeur (width), la hauteur (height) ou la propriété top, ce qui provoque du jank.
• Laisser will-change activé en permanence, gaspillant ainsi de la mémoire.
• Des animations trop longues et lentes qui rendent l’UI lourde.
• Ignorer les préférences de réduction du mouvement (reduced-motion).
• Des mouvements infinis qui distraient l’utilisateur du contenu.
• S’appuyer uniquement sur l’animation pour transmettre des informations essentielles.

Et après ?

Le mouvement en CSS couvre la majorité des besoins des interfaces. Lorsque vous avez besoin de timelines, de storytelling basé sur le défilement (scroll-driven) ou d’un contrôle précis, passez au guide des Animations Avancées. Comprenez les coûts de performance avec Browsers & Rendering, maintenez la fluidité grâce aux Web Performance, ou revenez aux bases du CSS.