Les Animations liées au scroll avec CSS

Raphael - Alsacreations - 18/12

Les animations liées au scroll (ou scroll-driven animations) constituent une nouvelle fonctionnalité CSS permettant de synchroniser des animations avec le défilement d'une page ou d'un conteneur. Cette solution native vient remplacer efficacement les scripts JavaScript habituels, avec une meilleure performance et une implémentation simplifiée de manière générale.

Apparition d'un bouton "scroll-to-top" lors du scroll de page. Source : Codepen

Syntaxe de base

Une animation liée au scroll n'en reste pas moins une animation au sens CSS du terme, elle nécessite donc un @keyframes et une propriété animation comme toute animation CSS classique. Ce sont les propriétés complémentaires animation-timeline et animation-range qui différencient ce type d'animation des autres.

@keyframes monAnimation { /* ici un scénario d'animation */ } .element { animation: monAnimation linear auto both; /* Définit l'animation dans son ensemble */ animation-timeline: scroll(); /* Définit le défilement comme référent */ animation-range: 0 100%; /* Définit la plage de défilement pour l'animation */ }

Types d'animations possibles

La spécification CSS "Scroll-Driven Animations" définit deux modes d'a...
[Courte citation de 8% de l'article original]