Scroll-driven animations

La plus grande nouveauté de ces deux dernières années : pouvoir lier une animation CSS directement à la position de scroll, sans une seule ligne de JavaScript. Ce site lui-même en est la démonstration — les sections s'animent en entrant dans la vue grâce à animation-timeline: view().

/* Révéler un élément au scroll — zéro JS */
.carte {
  animation: apparaitre linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@property : des variables CSS animables

Avant @property, les variables CSS custom ne pouvaient pas être animées — le navigateur ne savait pas leur type. Désormais, on peut déclarer qu'une variable est un <color>, un <length> ou un <percentage> et l'animer en transition.

@property --couleur-fond {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

.element {
  background: var(--couleur-fond);
  transition: --couleur-fond 0.4s ease;
}
.element:hover {
  --couleur-fond: #c8392b;
}

View Transitions API

La View Transitions API permet d'animer les transitions entre deux états du DOM — ou même entre deux pages — avec une syntaxe minimaliste. Ce site l'utilise pour le changement de thème : document.startViewTransition(() => applyTheme(next)).

« En 2025, écrire du JavaScript pour une simple animation de révélation au scroll, c'est comme utiliser jQuery pour centrer une div. CSS gère ça. »

Ce que ça change pour les développeurs

Ces évolutions réduisent la dette JavaScript, améliorent les performances (pas de recalcul sur le thread principal) et simplifient la maintenance. Elles renforcent aussi la séparation des responsabilités : CSS gère la présentation, JS gère la logique.

La veille technologique ne consiste plus seulement à apprendre de nouveaux frameworks — elle exige de revisiter régulièrement ce que CSS peut faire nativement.