Note · CSS

Des animations au scroll sans une ligne de JavaScript

Publié le 17 juillet 2026 · Testé sur ce site même

La réponse courte : la propriété CSS animation-timeline: view()pilote une animation par la position d'un élément dans le viewport, sans JavaScript. Toutes les révélations au défilement de ce site, y compris la frise deshomonymes, tiennent en une douzaine de lignes de CSS.

Ce qu'on faisait avant

Pendant quinze ans, animer au scroll voulait dire écouter l'événementscroll (et bloquer le thread principal), poser desIntersectionObserver (et gérer des classes), ou embarquer une bibliothèque dédiée. Trois solutions, trois coûts : du JavaScript à charger, à exécuter, à maintenir.

Ce qu'on écrit maintenant

Voici, à peine simplifié, le cœur du système de ce site :

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(2.2rem); }
  to { opacity: 1; transform: none; }
}

view() fait de la traversée du viewport la timeline de l'animation.animation-range précise quelle portion de cette traversée anime : ici, de l'entrée de l'élément jusqu'à 45 % de sa course. L'animation est liée au défilement lui-même : elle avance et recule avec lui, gratuitement, hors du thread principal.

Pourquoi c'est sans risque

Les deux gardes font tout le travail. @supports réserve la technique aux navigateurs qui la comprennent : les autres affichent simplement le contenu, sans animation, ce qui est un repli parfait. Etprefers-reduced-motion respecte les visiteurs qui demandent des interfaces calmes. Aucun contenu ne dépend de l'animation pour être visible : c'est la règle qui rend tout le reste acceptable.

Les limites honnêtes

• Le support n'est pas encore universel : d'où le @supports, non négociable.
• Une animation liée au scroll recule quand on remonte. C'est voulu, mais il faut le savoir : pour du « joué une fois », il faut encore un IntersectionObserver.
• Animer opacity et transform uniquement : le compositeur s'en charge, la fluidité est garantie. Animer autre chose se paie.

Le verdict

Adopté sans réserve pour les révélations d'entrée. C'est la première fois que le pattern « apparaître en défilant » coûte zéro octet de JavaScript, et c'est exactement le genre de progrès de plateforme qu'on attendait.

Toutes les notes →