Les animations CSS déclenchées par le défilement arrivent !

Bramus

Publié le 12 décembre 2025

En 2023, nous avons lancé les animations liées au défilement, qui vous permettent d'avancer (ou de rembobiner) une animation en faisant défiler la page. Avec les animations liées au défilement, la progression de l'animation passe de 0 % à 100 % lorsque vous faites défiler la page. Si vous arrêtez de faire défiler la page, l'animation se met en pause. Si vous faites défiler la page vers le haut, l'animation s'inverse.

Le prochain chapitre des animations basées sur le défilement arrivera en 2026, avec les animations déclenchées par le défilement dans Chrome 145. Il s'agit d'animations basées sur le temps qui se déclenchent lorsque vous dépassez un décalage de défilement spécifique.

Dites adieu à IntersectionObserver pour ce type d'effet, car vous pouvez désormais le faire de manière déclarative en CSS.

Déclencheurs de timeline, déclencheurs d'animation et actions

Déclencher une animation

Pour configurer une animation déclenchée par le défilement en CSS, commencez par une animation CSS standard associée à un élément :

animation: unclip 0.35s ease-in-out both;

Cette animation utilise un DocumentTimeline comme pilote et s'exécute pendant 0,35 seconde. L'animation se déclenche automatiquement après le chargement de la page. Pour modifier le déclencheur, utilisez la nouvelle propriété CSS animation-trigger :

animation-trigger: --t play-forwards play-backwards;

Ici, l'animation est définie pour être déclenchée par le déclencheur --t. Lorsque ce déclencheur est activé, l'action play-forwards est appelée sur l'animation. Lorsque le déclencheur est désactivé, l'action play-backwards est appelée.

La spécification contient la liste complète des actions.

Créer un déclencheur

Mais qu'est-ce que ce déclencheur --t ? Il s'agit d'un déclencheur nommé --t. Pour les animations déclenchées par le défilement, il s'agit d'un "déclencheur de timeline" qui utilise une timeline de progression de défilement ou une timeline de progression d'affichage comme source.

Pour définir un déclencheur de chronologie, utilisez la propriété timeline-trigger (ou ses propriétés associées). Par exemple, pour créer un déclencheur nommé --t qui utilise une timeline de vue comme source, utilisez la commande suivante :

timeline-trigger-name: --t;
timeline-trigger-source: view();

Le déclencheur --t créé s'active et se désactive en fonction de la timeline de la vue associée à l'élément correspondant. Étant donné que la plage par défaut d'une timeline de vue est la plage cover, le déclencheur s'active et se désactive également lorsqu'il se trouve dans cette plage ou en dehors.

Ajuster les plages du déclencheur

Pour ajuster les positions lorsque le déclencheur doit être actif ou inactif, spécifiez les plages d'activation et active sur le déclencheur. Dans l'exemple suivant, la plage d'activation est définie sur entry 100% exit 0%, ce qui signifie que le déclencheur s'activera une fois que le sujet se trouvera dans cette plage.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

Étant donné qu'aucune plage active n'est spécifiée dans l'extrait précédent, la plage d'activation est également utilisée comme plage active. Lorsque vous sortez de cette plage active, le déclencheur est désactivé.

Combiné à la animation-trigger déjà définie, cela se traduit visuellement par une animation qui se lit vers l'avant lorsque le sujet est complètement entré dans la fenêtre de défilement et vers l'arrière lorsqu'il est sur le point de la quitter.

Enregistrement d'une démonstration avec les plages de déclenchement définies sur entry 100% exit 0%.
La démonstration affiche également des lignes de débogage pour indiquer où commencent et où se terminent les plages.

Il est possible d'avoir des plages d'activation et d'activité différentes. Exemple :

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

Ici, le déclencheur s'active lorsque le sujet se trouve dans la plage entry 100% exit 0%. Le déclencheur reste actif jusqu'à ce qu'il quitte la plage entry 0% exit 100%.

Visuellement, l'animation est lue vers l'avant lorsque le sujet entre dans la zone de défilement et, contrairement à ce qui se passait auparavant, elle reste active jusqu'à ce que le sujet ait complètement quitté la zone de défilement.

Enregistrement d'une démonstration avec les plages de déclenchement définies sur entry 100% exit 0% / entry 0% exit 100%.
La démonstration montre également des lignes de débogage pour indiquer où commencent et où se terminent les plages. La plage active englobe la fenêtre de défilement. Ses lignes de débogage ne sont donc pas visibles.

Limiter le champ d'application d'un déclencheur

Les déclencheurs sont visibles dans le monde entier, ce qui signifie que la dernière correspondance qui déclare un déclencheur avec un certain nom "gagne". Pour limiter la visibilité d'un déclencheur, utilisez la propriété trigger-scope. Cela ressemble à l'utilisation de anchor-scope.

trigger-scope: --t; /* List of dashed idents, or `all` */

Lorsque vous avez une règle CSS qui déclare un déclencheur et qui correspond à plusieurs éléments, vous devez utiliser trigger-scope.

Démo

Dans la démo suivante, un formulaire est réparti sur plusieurs sections de hauteur totale. Chaque partie du formulaire s'affiche à l'aide d'une animation déclenchée par le défilement. Lorsqu'il quitte la zone de défilement, il s'anime pour disparaître.

La logique d'animation déclenchée par le défilement est la suivante :

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

Le code se lit comme suit :

  • Le timeline-trigger est nommé --t et sa source est définie sur un timeline de vue qui suit l'élément correspondant.
  • La plage d'activation du déclencheur est contain 15% contain 85%. Lorsque le sujet se trouve dans cette plage, le déclencheur devient actif.
  • Lorsqu'il est activé, le déclencheur reste actif tant que le sujet se trouve dans la plage active de entry 100% exit 0%.
  • L'animation unclip est associée à l'élément.
  • L'animation est configurée pour utiliser --t comme source de déclencheur. Lorsque le déclencheur devient actif, l'animation commence à se lire dans le sens normal.
  • Lorsque le déclencheur se désactive (c'est-à-dire lorsque le sujet quitte la plage active), l'animation est lue à l'envers.
  • Le contenu de la fiche est également animé en entrée et en sortie à l'aide du même déclencheur --t.

L'exemple inclut un remplacement à l'aide de IntersectionObserver pour les navigateurs qui ne sont pas compatibles avec timeline-trigger.

Autres démonstrations

Si vous aimez les animations déclenchées par le défilement, consultez les démonstrations suivantes :

Enregistrement de la démo Meet the monsters.

Commentaires

Nous aimerions recueillir vos commentaires pour continuer à améliorer cette fonctionnalité. Contactez-nous sur les réseaux sociaux ou signalez un problème au groupe de travail CSS pour nous faire part de vos commentaires.

Si vous rencontrez un bug, signalez-le dans Chromium pour nous en informer. Pour consulter la liste des bugs connus, accédez à l'outil de suivi des bugs de Chromium.