Animations CSS pilotées par le défilement : 5 modèles d'animation de défilement en CSS pur sans JavaScript

Animations CSS Pilotées par le Défilement : Défilement Fluide Sans JS

Parallax avec des listeners de défilement JS causant des saccades, code verbeux d'IntersectionObserver, surcharge de performance de requestAnimationFrame — les animations de défilement dépendent depuis longtemps de JavaScript. Les animations CSS pilotées par le défilement vous permettent d'implémenter parallax, barres de progression et animations de révélation purement en CSS : zéro JS, 60fps, accélération GPU automatique. En 2026, les animations CSS pilotées par le défilement sont entièrement supportées dans Chrome et Safari.

Cet article couvre 5 modèles fondamentaux, vous guidant à travers scroll-timeline → view-timeline → parallax → indicateur de progression → animations de révélation.

Concepts Clés

Concept	Description
scroll-timeline	Timeline d'animation basée sur la position de défilement
view-timeline	Timeline d'animation basée sur la visibilité de l'élément
animation-timeline	Spécifie quelle timeline de défilement une animation utilise
animation-range	Positions de début et de fin de l'animation dans la plage de défilement
scroll()	Fonction de timeline de défilement anonyme
view()	Fonction de timeline de vue anonyme
scroll-progress	Progression du défilement 0-1
view-progress	Progression de visibilité 0-1

Analyse du Problème : 5 Défis Majeurs des Animations de Défilement CSS

Compatibilité des navigateurs : Le support de Firefox est en retard
Débogage difficile : Le support DevTools pour les animations de défilement est limité
Défilement imbriqué : La configuration des conteneurs de défilement non-document est complexe
Calcul de la plage d'animation : Le pourcentage d'animation-range a un coût de compréhension élevé
Fallback : Les navigateurs non supportés nécessitent un fallback JS

Étape par Étape : 5 Modèles d'Animation de Défilement CSS

Modèle 1 : Animation de Progression de Défilement avec scroll-timeline

/* Barre de progression en haut de la page */
@keyframes progress-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transform-origin: left;
  animation: progress-bar linear;
  animation-timeline: scroll(root);
}

Modèle 2 : Animation de Révélation dans le Viewport avec view-timeline

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.card {
  animation: reveal-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 80%;
}

Modèle 3 : Effet de Défilement Parallax

@keyframes parallax-slow {
  from { transform: translateY(0); }
  to { transform: translateY(-100px); }
}

@keyframes parallax-fast {
  from { transform: translateY(0); }
  to { transform: translateY(-300px); }
}

.parallax-bg {
  animation: parallax-slow linear both;
  animation-timeline: scroll(root);
}

.parallax-fg {
  animation: parallax-fast linear both;
  animation-timeline: scroll(root);
}

Modèle 4 : Timeline de Défilement Nommée

.scroller {
  overflow-y: auto;
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: block;
}

@keyframes rotate-icon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-icon {
  animation: rotate-icon linear;
  animation-timeline: --my-scroller;
}

Modèle 5 : Séquences d'Animation Complexes

@keyframes hero-sequence {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
}

.hero-title {
  animation: hero-sequence linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

Guide des Pièges

Piège 1 : Ne pas spécifier animation-timeline

/* ❌ Faux : animation-timeline manquant */
.element {
  animation: slide-in 1s linear;
  /* L'animation ne suivra pas le défilement */
}

/* ✅ Correct : spécifier la timeline de défilement */
.element {
  animation: slide-in linear both;
  animation-timeline: view();
}

Piège 2 : Mauvaises valeurs d'animation-range

/* ❌ Faux : la plage dépasse la plage de défilement */
.element {
  animation-range: entry 0% entry 200%; /* 200% invalide */
}

/* ✅ Correct : utiliser une plage valide */
.element {
  animation-range: entry 0% entry 100%;
}

Piège 3 : Conflit de Transform avec le défilement

/* ✅ Correct : utiliser l'indice will-change */
.parallax {
  animation: parallax linear both;
  animation-timeline: scroll(root);
  will-change: transform;
}

Piège 4 : Ne pas gérer le fallback

/* ✅ Correct : fournir un fallback */
@supports (animation-timeline: view()) {
  .card {
    animation: reveal-up linear both;
    animation-timeline: view();
  }
}

@supports not (animation-timeline: view()) {
  .card { opacity: 1; transform: none; }
}

Piège 5 : Conteneur de défilement sans overflow

/* ✅ Correct : s'assurer que le conteneur est défilable */
.scroller {
  overflow-y: auto;
  scroll-timeline-name: --my-scroll;
}

Dépannage des Erreurs

#	Erreur	Cause	Solution
1	L'animation ne suit pas le défilement	Pas d'animation-timeline défini	Ajouter animation-timeline: view() ou scroll()
2	L'animation se termine trop tôt	animation-range trop petit	Augmenter la plage
3	Mauvaise direction parallax	scroll-timeline-axis mal configuré	Utiliser block/inline pour la direction
4	Timeline nommée invalide	scroll-timeline-name ne correspond pas	S'assurer que les noms parent-enfant correspondent
5	Saccades de l'animation	Pas de will-change	Ajouter will-change: transform
6	Firefox ne fonctionne pas	Le navigateur ne supporte pas	Utiliser @supports pour le fallback
7	Défilement imbriqué ne fonctionne pas	Conflit défilement interne/externe	Utiliser un scroll-timeline nommé
8	L'animation saute	Keyframes pas assez fluides	Ajouter plus de keyframes ou utiliser linear
9	Éléments fixes anormaux	transform affecte le positionnement fixe	Déplacer les éléments fixes hors du conteneur transform
10	Mobile pas fluide	Accélération GPU non activée	Ajouter transform: translateZ(0)

Optimisation Avancée

Scroll Snap + Animations de défilement : Combiner le défilement paginé avec des animations
Propriétés personnalisées CSS Houdini : Enregistrer des propriétés d'animation pour des effets complexes
prefers-reduced-motion : Respecter la préférence de l'utilisateur pour un mouvement réduit
Container queries + animations de défilement : Synergie responsive et d'animation de défilement
WAAPI + Scroll Timeline : Web Animations API combinée avec les timelines de défilement CSS

Comparaison

Dimension	CSS Scroll-Driven	JS IntersectionObserver	Événement scroll JS	GSAP ScrollTrigger
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
Volume de code	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
Support navigateurs	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Flexibilité	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Facilité de débogage	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Courbe d'apprentissage	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

Résumé : Les animations CSS pilotées par le défilement vous permettent d'obtenir des effets de défilement fluides avec zéro JS, surpassant largement les solutions JS. Les animations de défilement CSS conviennent aux scénarios d'interaction de défilement poursuivant des performances extrêmes, en particulier parallax, barres de progression et animations de révélation. Avec le support complet de Chrome et Safari en 2026, utiliser avec un fallback @supports.

Outils en Ligne

Formateur JSON : /fr/json/format
Calculateur de Hash : /fr/encode/hash
cURL vers Code : /fr/dev/curl-to-code