Guide des animations pilotées par le défilement en CSS uniquement

• Il est possible de créer des animations liées au défilement uniquement en CSS, sans JS ni bibliothèque supplémentaire
• Des propriétés CSS comme animation-timeline: scroll() / view() permettent de faire progresser une animation selon la position de défilement ou l’entrée dans le viewport
• La propriété animation-range permet de régler en détail la zone du viewport où l’animation commence et se termine
• Pour les utilisateurs sensibles aux mouvements, il est recommandé d’utiliser la media query prefers-reduced-motion
• La fonctionnalité est prise en charge à partir de Safari 26 beta, ce qui élargit fortement les possibilités des animations de défilement basées sur CSS

---

Les 3 éléments d’une animation pilotée par le défilement

• Target : l’élément cible auquel appliquer l’animation (par ex. une barre de progression, une image, etc.)
• Keyframes : définit les changements qui se produisent en fonction du défilement (identique au @keyframes CSS classique)
• Timeline : détermine quand et comment l’animation se déroule (sur la base du défilement/de la vue, et non du temps)

La timeline en CSS

• Les animations CSS classiques utilisent par défaut la document timeline (basée sur le temps)
• Introduction de la propriété animation-timeline (CSS Animations Level 2, 2023) : il devient possible de faire progresser une animation selon d’autres critères que le temps, comme le défilement ou l’entrée dans le viewport

Timeline scroll()

• La timeline scroll() ne fait progresser l’animation que lorsque l’utilisateur fait défiler la page
• Exemple : une barre de progression en bas de page se remplit de gauche à droite au fil du défilement

  footer::after {  
    content: "";  
    height: 1em;  
    width: 100%;  
    background: rgba(254, 178, 16, 1);  
    left: 0;  
    bottom: 0;  
    position: fixed;  
    animation: grow-progress linear;  
    animation-timeline: scroll();  
  }  
  @keyframes grow-progress {  
    from { transform: scaleX(0); }  
    to { transform: scaleX(1); }  
  }  
  

• animation-timeline doit être défini après la propriété animation pour fonctionner correctement

Prendre en compte l’accessibilité du mouvement

• Pour protéger les utilisateurs sensibles au mouvement, il est recommandé d’utiliser la media query prefers-reduced-motion

  @media not (prefers-reduced-motion) {  
      /* code d’animation */  
  }  
  

Timeline view()

• La timeline view() démarre l’animation lorsque l’élément cible apparaît dans le viewport
• Exemple : lors du défilement, une image glisse depuis la droite tout en apparaissant progressivement

  @keyframes slideIn {  
    0% {  
      transform: translateX(100%);  
      opacity: 0;  
    }  
    100% {  
      transform: translateX(0%);  
      opacity: 1;  
    }  
  }  
  img {  
    animation: slideIn;  
    animation-timeline: view();  
  }  
  

Contrôler la plage de progression avec animation-range

• Par défaut, animation-range va de 0 % (entrée dans le viewport) à 100 % (sortie complète)

• Exemple : faire progresser l’animation seulement jusqu’à 50 % du viewport

  img {  
    animation: slideIn;  
    animation-timeline: view();  
    animation-range: 0% 50%;  
  }  
  

• Il est nécessaire de définir des valeurs de plage adaptées pour une bonne expérience utilisateur

• En tenant compte de l’accessibilité du mouvement, à utiliser avec prefers-reduced-motion

  @media not (prefers-reduced-motion) {  
    img {  
      animation: slideIn;  
      animation-timeline: view();  
      animation-range: 0% 50%;  
    }  
  }  
  

Usages avancés et prochaines étapes

• scroll() et view() sont des fonctions qui permettent de préciser diverses options comme l’élément scroller (par défaut : nearest) ou l’axe (block, inline, x, y)
• Avec animation-range, entry/exit et d’autres options, il est possible de créer une UX bien plus fine
• La prise en charge commence dans les navigateurs récents comme Safari 26 beta, avec une standardisation et un élargissement du support attendus progressivement

[shakespeare]

On peut donc le réaliser uniquement avec animation-timeline. C’est surprenant !