Scroll-driven Animations

Definition

API CSS qui lie une animation au défilement (scroll timeline) ou à la visibilité d'un élément (view timeline) sans JavaScript. Remplace les libraries de scroll-animation.

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; } }
.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.

Termes lies