Animations CSS au scroll : le guide complet 2026

Pendant des annees, animer des elements en fonction du scroll necessitait du JavaScript : un listener sur l’evenement scroll, un calcul de position, et une mise a jour manuelle des proprietes CSS. C’etait verbeux, fragile et mauvais pour les performances. En 2026, cette epoque est revolue.

Les specifications CSS Scroll-Driven Animations sont desormais supportees par tous les navigateurs majeurs. Chrome, Firefox, Safari et Edge implementent tous les proprietes scroll-timeline et view-timeline. Il est temps de les adopter pleinement.

Le principe fondamental

L’idee derriere les animations pilotees par le scroll est elegante : au lieu d’animer un element en fonction du temps (comme avec @keyframes classiques), on l’anime en fonction de la progression du scroll. L’animation avance quand l’utilisateur scrolle vers le bas, recule quand il scrolle vers le haut.

Deux types de timelines existent :

• Scroll Timeline : l’animation est liee a la progression du scroll dans un conteneur (souvent le viewport). De 0% (en haut) a 100% (en bas).
• View Timeline : l’animation est liee a la visibilite d’un element dans le viewport. De 0% (l’element entre dans le viewport) a 100% (il en sort).

Scroll Timeline : les bases

Commencons par un exemple simple. Imaginons une barre de progression qui se remplit au fur et a mesure que l’utilisateur scrolle la page :

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #c084fc, #f472b6);
  transform-origin: left;
  animation: grow-progress linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

C’est tout. Pas de JavaScript. La propriete animation-timeline: scroll() remplace la timeline temporelle par defaut par une timeline de scroll.

La fonction scroll() accepte deux parametres optionnels :

/* Syntaxe complete */
animation-timeline: scroll(<scroller> <axis>);

/* Exemples */
animation-timeline: scroll();           /* root, block */
animation-timeline: scroll(root);       /* root scroller, block axis */
animation-timeline: scroll(nearest);    /* nearest scrollable ancestor */
animation-timeline: scroll(root inline); /* root scroller, inline axis */

View Timeline : animer a l’entree dans le viewport

La View Timeline est probablement ce que vous utiliserez le plus souvent. Elle permet d’animer un element au moment ou il entre dans le viewport, exactement comme le faisait IntersectionObserver avec du JavaScript.

.card {
  animation: fade-in-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

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

La propriete animation-range est cruciale ici. Elle definit la portion de la timeline sur laquelle l’animation se deroule.

Les ranges disponibles

La specification definit plusieurs ranges nommes :

• entry : de l’entree du bord avant jusqu’a ce que l’element soit entierement visible.
• exit : de la sortie du bord avant jusqu’a ce que l’element soit entierement hors du viewport.
• contain : la periode pendant laquelle l’element est entierement contenu dans le viewport.
• cover : de la premiere intersection jusqu’a la derniere.

/* Fade-in uniquement a l'entree */
animation-range: entry;

/* Animation pendant toute la visibilite */
animation-range: cover;

/* Animation entre 25% de l'entree et 75% de la sortie */
animation-range: entry 25% exit 75%;

Timelines nommees

Parfois, vous voulez que l’animation d’un element soit liee au scroll d’un autre conteneur. C’est la que les timelines nommees interviennent :

.scroll-container {
  overflow-y: auto;
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: block;
}

.animated-element {
  animation: slide-in linear both;
  animation-timeline: --my-scroller;
}

@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

Cas d’usage concrets

Parallax sans JavaScript

.parallax-bg {
  animation: parallax linear;
  animation-timeline: scroll();
}

@keyframes parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(-30%); }
}

Reveler une galerie d’images

.gallery-item {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% entry 90%;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

Header qui se compacte au scroll

.site-header {
  animation: compact-header linear both;
  animation-timeline: scroll();
  animation-range: 0px 200px;
}

@keyframes compact-header {
  from {
    padding-block: 24px;
    background: transparent;
  }
  to {
    padding-block: 8px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
  }
}

Performances : pourquoi c’est mieux

Les animations pilotees par le scroll en CSS sont fondamentalement plus performantes que leurs equivalents JavaScript pour plusieurs raisons :

• Pas de listener scroll : les listeners scroll se declenchent a chaque frame, bloquant le thread principal. Les animations CSS sont gerees par le compositor.
• Pas de reflow : le navigateur sait a l’avance quelles proprietes vont changer et peut optimiser en consequence.
• 60 fps natif : les animations CSS tournent naturellement a la frequence de rafraichissement de l’ecran.
• Respect du prefers-reduced-motion : vous pouvez facilement desactiver ces animations dans une media query.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    animation-timeline: none !important;
  }
}

Compatibilite navigateur en 2026

Au moment d’ecrire ces lignes (mars 2026), le support est excellent :

• Chrome / Edge : support complet depuis la version 115 (juillet 2023).
• Firefox : support complet depuis la version 132 (fin 2024).
• Safari : support complet depuis la version 18.2 (debut 2025).

Cela signifie que plus de 95% des utilisateurs ont acces a cette fonctionnalite.

Conseils pratiques

Utilisez les animations au scroll avec moderation. Un site ou tout bouge en permanence fatigue l’utilisateur. Reservez-les aux moments ou elles servent veritablement le contenu.

Quelques bonnes pratiques :

1. Animez des proprietes composites : transform et opacity sont les meilleures candidates.
2. Testez sur mobile : le comportement du scroll sur mobile peut affecter vos animations.
3. Utilisez animation-range : ne faites pas durer l’animation sur toute la timeline.
4. Pensez accessibilite : respectez toujours prefers-reduced-motion.
5. Combinez avec will-change : si vous animez beaucoup d’elements simultanement.

Conclusion

Les animations CSS pilotees par le scroll representent l’une des avancees les plus significatives du CSS ces dernieres annees. Elles eliminent des centaines de lignes de JavaScript, ameliorent les performances et offrent une syntaxe declarative elegante.

En 2026, il n’y a plus aucune raison d’utiliser un listener scroll pour des animations. Le CSS gere desormais cela nativement, de maniere plus performante et plus maintenable.