Animation au défilement de la page (scroll reveal en CSS)
Choisissez l’effet et faites défiler l’aperçu. L’animation suit le défilement, sans JavaScript ni bibliothèque.
Mode d’emploiDes sections qui apparaissent pendant que le visiteur défile
Faites défiler dans l’aperçu pour voir l’effet (dans Chrome, Edge ou Safari 26+).
Disponible en: 
Animation au défilement de la page (scroll reveal en CSS): à quoi ça sert
Des sections qui apparaissent pendant que le visiteur défile rendent la page plus vivante. Ce générateur crée l’effet uniquement en CSS, grâce aux animations liées au défilement (animation-timeline: view()), sans bibliothèques comme AOS ou ScrollReveal.
Choisissez l’effet (montée, simple apparition, glissement latéral, zoom ou sortie du flou), la distance et le point d’entrée à l’écran où l’animation se termine, puis faites défiler l’aperçu. Le code est placé dans un @supports : dans Firefox, qui garde encore la fonction derrière une option expérimentale, les éléments s’affichent normalement au lieu de rester invisibles, et le code respecte les personnes qui ont demandé moins de mouvement.
Mode d’emploi
- Choisissez l’effet et la distance.
- Définissez le point où l’animation se termine.
- Copiez le CSS et appliquez la classe aux sections.
Quand l’utiliser
- Landing pages.
- Sections de services et de témoignages.
- Portfolios.
Questions fréquentes
Cela fonctionne-t-il dans tous les navigateurs ?
Les animations liées au défilement (animation-timeline) fonctionnent dans Chrome, Edge et Safari 26 ou plus récent. Dans Firefox, elles sont encore derrière une option expérimentale. C’est pourquoi le code est placé dans un @supports : là où la fonction n’existe pas, les éléments s’affichent simplement normalement, sans rester invisibles.
Pourquoi ne pas utiliser une bibliothèque comme AOS ou ScrollReveal ?
Ces bibliothèques utilisent JavaScript pour surveiller le défilement, ce qui alourdit le chargement et peut ralentir les mobiles peu puissants. Avec animation-timeline, c’est le navigateur lui-même qui gère l’animation, et le site est plus léger.
Et pour les personnes qui préfèrent moins de mouvement ?
Le code respecte prefers-reduced-motion : pour celles qui ont activé cette option, les éléments apparaissent sans glisser ni grossir.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.