Les scroll-driven animations (CSS et View Timelines) permettent d'animer des éléments en fonction du scroll sans librairie. Parallax, révélation et progression en natif.

La propriété animation-timeline: view() (et scroll()) lie l'animation à la visibilité ou au scroll. Les keyframes s'exécutent quand l'élément entre ou sort du viewport. Parallax, compteurs, barres de progression et révélations deviennent possibles en CSS seul. Pour les landing pages et les sites à forte dimension visuelle, les scroll-driven animations améliorent l'expérience sans alourdir le bundle. Le support navigateur (Chrome, Safari récents) progresse ; des polyfills ou fallbacks existent pour les autres.

Conseil : combiner avec prefers-reduced-motion pour respecter les préférences utilisateur.

Points forts / Points faibles

Points forts

  • Pas de JavaScript pour le scroll
  • Performances (GPU, natif)
  • API déclarative
  • Parallax et révélation sans lib

Points faibles

  • Support navigateurs encore partiel
  • Documentation et exemples en évolution
  • Fallbacks pour une large compatibilité