Scroll-driven Animations

Définition

API CSS qui lie une animation au défilement (scroll()) ou à la visibilité d'un élément (view()) sans JavaScript. Livrée dans Chrome 115 et Safari 26, elle n'est pas encore Baseline : Firefox ne la propose qu'en préversion. À déployer en amélioration progressive avec @supports.

Analogie

Comme un livre pop-up dont les éléments se déploient au fur et à mesure qu'on tourne les pages.

Exemple de code

@keyframes reveal { from { opacity: 0; } }

@supports (animation-timeline: view()) {
  .element {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

Cas d'usage

Créer des animations de révélation au scroll, barres de progression de lecture, ou parallaxe sans JS.

Anti-pattern

Termes liés

Sources

• developer.chrome.com/docs/css-ui/scroll-driven-animations
• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline