T
css animations scroll-driven keyframes web-design

Animations CSS modernes : Scroll-Driven, Spring et au-delà

Faites passer vos animations web au niveau supérieur. Découvrez les animations CSS pilotées par le défilement, la physique des ressorts et les fonctions de timing avancées.

2026-04-18

Animations CSS modernes : Scroll-Driven, Spring et au-delà

Les animations ne sont plus seulement des fioritures "sympas à avoir". Ce sont des outils essentiels pour fournir un retour d'information, guider l'attention de l'utilisateur et créer une expérience de marque mémorable.

Le CSS moderne a introduit des moyens révolutionnaires d'animer des éléments qui nécessitaient auparavant des écouteurs de défilement JavaScript complexes ou des bibliothèques d'animation lourdes.

1. Animations pilotées par le défilement (Scroll-Driven) : pas de JS requis

L'ajout le plus excitant aux animations CSS est la spécification Scroll-Driven Animation. Elle vous permet de lier la progression d'une animation directement à la position de défilement d'un conteneur.

Comment ça marche :

Auparavant, vous aviez besoin de window.onscroll et requestAnimationFrame. Maintenant, vous avez juste besoin de scroll-timeline.

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* Lier au défilement de la page ! */
}

Cas d'utilisation clés :

  • Barres de progression de lecture : indique jusqu'où l'utilisateur a défilé.
  • Effets de parallaxe : déplace les éléments d'arrière-plan à différentes vitesses par rapport au défilement.
  • Révélation au défilement : apparition progressive des éléments lorsqu'ils entrent dans le viewport à l'aide de view-timeline.

2. Keyframes avancés et composition

Le CSS moderne permet un contrôle plus granulaire sur la façon dont les animations sont combinées.

  • animation-composition : définit comment plusieurs animations affectant la même propriété doivent se mélanger (ex: replace, add ou accumulate).
  • animation-range : permet d'ajuster précisément quand une animation pilotée par le défilement commence et se termine dans le viewport.
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* Anime uniquement pendant que l'élément est dans les 50% centraux de l'écran */
  animation-range: entry 25% exit 75%;
}

3. Au-delà du linéaire : Cubic-Bezier et physique des ressorts (Spring)

Les fonctions de timing définissent le "ressenti" d'une animation. Alors que ease-in-out est le standard, les designs avancés utilisent des courbes personnalisées.

Cubic-Bezier

Une fonction cubic-bezier vous permet de créer des effets de "dépassement" (overshoot) ou d'"anticipation".

.button:active {
  /* Un léger effet de rebond */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

Animations Spring CSS (Expérimental)

Bien qu'elle ne soit pas encore totalement native dans tous les navigateurs, le concept de Physique des ressorts (Spring Physics) (masse, raideur, amortissement) arrive dans CSS. Cela crée un mouvement beaucoup plus naturel et organique que le timing traditionnel basé sur la durée.

4. Performance : la règle des 60 FPS

La clé d'animations fluides est de rester en dehors du "Main Thread" (fil principal). Les animations CSS modernes sont hautement optimisées, mais seulement si vous animez les bonnes propriétés.

Propriétés sûres à animer :

  • transform (scale, rotate, translate)
  • opacity
  • filter (certains navigateurs)

Évitez d'animer (provoque des décalages de mise en page) :

  • width / height
  • margin / padding
  • top / left / bottom / right

5. View Transitions : animer le changement du DOM

Combiné avec l'API View Transition, le CSS peut désormais gérer le "morphing" des éléments entre deux états, créant une expérience fluide semblable à une application native.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ : Questions fréquemment posées

Q : Les Scroll-Driven Animations sont-elles supportées ?

R : Depuis 2024, elles sont supportées dans Chrome et Edge. Firefox et Safari y travaillent. Vous pouvez les utiliser dès aujourd'hui comme une "amélioration progressive" — le site fonctionne toujours sans elles, mais il est plus beau avec.

Q : Pourquoi mon animation saccade-t-elle ?

R : Assurez-vous de n'animer que transform et opacity. Vérifiez si vous n'avez pas trop d'effets backdrop-filter actifs, car ils peuvent être gourmands en ressources.

Q : Puis-je utiliser @scroll-timeline ?

R : L'ancienne syntaxe @scroll-timeline a été remplacée par les fonctions plus concises animation-timeline: scroll() et view(). Nous recommandons d'utiliser la nouvelle syntaxe pour garantir la pérennité de votre code.

Donnez vie à votre site

Les animations sont l'"âme" d'une interface utilisateur moderne. En maîtrisant les timelines pilotées par le défilement et les fonctions de timing avancées, vous pouvez créer des expériences professionnelles et engageantes qui fidélisent les utilisateurs.

Prêt à perfectionner votre timing ? Essayez notre Générateur Cubic-Bezier (prochainement) ou utilisez nos outils d'animation existants.

Retour au blog