CSS-animaties die geactiveerd worden door scrollen komen eraan!

Bramus

Gepubliceerd: 12 december 2025

In 2023 introduceerden we scrollgestuurde animaties waarmee je een animatie kunt versnellen (of terugspoelen) door te scrollen. Bij scrollgestuurde animaties loopt de animatie van 0% tot 100% terwijl je scrollt. Als je stopt met scrollen, pauzeert de animatie; als je weer omhoog scrollt, wordt de animatie omgekeerd afgespeeld.

Het volgende hoofdstuk voor scroll-gebaseerde animaties breekt aan in 2026, met scroll-getriggerde animaties die hun intrede doen in Chrome 145. Dit zijn tijdsgebonden animaties die worden geactiveerd wanneer een specifiek scrollpunt wordt overschreden.

Neem afscheid van IntersectionObserver voor dit soort effecten, want je kunt het nu declaratief in CSS doen.

Tijdlijntriggers, animatietriggers en acties

Start een animatie

Om een ​​scroll-geactiveerde animatie in CSS in te stellen, begin je met een reguliere CSS-animatie die aan een element is gekoppeld:

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

Deze animatie gebruikt een DocumentTimeline als aansturingselement en duurt 0,35 seconden. De animatie wordt automatisch geactiveerd na het laden van de pagina. Om de trigger te wijzigen, gebruikt u de nieuwe CSS-eigenschap animation-trigger :

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

Hier wordt de animatie geactiveerd door de trigger --t . Wanneer deze trigger wordt geactiveerd, wordt de actie play-forwards uitgevoerd en wanneer de trigger wordt gedeactiveerd, wordt de actie play-backwards uitgevoerd.

De specificatie bevat de volledige lijst met acties .

Een trigger maken

Maar wat is die --t trigger dan precies? Het is een trigger met de naam --t . Specifiek voor scroll-geactiveerde animaties is het een "tijdlijntrigger" die een Scroll Progress Timeline of View Progress Timeline als bron gebruikt.

Om een ​​trigger voor een tijdlijn te definiëren, gebruikt u de eigenschap timeline-trigger (of de bijbehorende lange notatie). Om bijvoorbeeld een trigger met de naam ` --t te maken die een weergavetijdlijn als bron gebruikt, gebruikt u het volgende:

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

Deze trigger --t wordt geactiveerd en gedeactiveerd op basis van de weergavetijdlijn die is gekoppeld aan het overeenkomende element. Omdat het standaardbereik voor een weergavetijdlijn het cover is, wordt de trigger ook geactiveerd en gedeactiveerd wanneer het element zich binnen of buiten dat bereik bevindt.

Pas de bereiken van de trekker aan.

Om de posities aan te passen waarop de trigger actief of inactief moet zijn, kunt u de activerings- en actieve bereiken van de trigger specificeren. In het volgende voorbeeld is het activeringsbereik ingesteld op entry 100% exit 0% , wat betekent dat de trigger wordt geactiveerd zodra het object zich binnen dat bereik bevindt.

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

Omdat er in het voorgaande codefragment geen actief bereik is gespecificeerd, wordt het activeringsbereik ook als actief bereik gebruikt. Wanneer het object zich buiten dat actieve bereik bevindt, wordt de trigger gedeactiveerd.

In combinatie met de reeds gedefinieerde animation-trigger resulteert dit er visueel in dat de animatie voorwaarts wordt afgespeeld wanneer het onderwerp volledig in het scrollgebied is gekomen en achterwaarts wanneer het op het punt staat het scrollgebied te verlaten.

Het is mogelijk om verschillende activerings- en werkingsbereiken te hebben. Bijvoorbeeld:

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

Hier wordt de trigger geactiveerd wanneer het onderwerp zich in het bereik entry 100% exit 0% . De trigger blijft actief totdat het onderwerp dit entry 0% exit 100% heeft verlaten.

Visueel gezien zorgt dit ervoor dat de animatie vooruit begint te spelen wanneer het onderwerp het scrollvenster binnenkomt en, in tegenstelling tot voorheen, actief blijft totdat het onderwerp het scrollvenster volledig heeft verlaten.

Beperk de reikwijdte van een trigger

Triggers zijn wereldwijd zichtbaar, wat betekent dat de laatste match die een trigger met een bepaalde naam declareert, "wint". Om de zichtbaarheid van een trigger te beperken, gebruikt u de eigenschap trigger-scope . Dit is vergelijkbaar met hoe anchor-scope kan worden gebruikt.

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

Wanneer je een CSS-regel hebt die een trigger declareert en die overeenkomt met meerdere elementen, moet je trigger-scope gebruiken.

Demo

In de volgende demo wordt een formulier opgesplitst in verschillende secties over de volledige hoogte. Wanneer een deel van het formulier in beeld komt, verschijnt het met een scroll-geactiveerde animatie. Wanneer het deel het scrollgebied verlaat, verdwijnt het weer.

De logica achter de scroll-geactiveerde animatie is als volgt:

@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;
}

Na analyse blijkt de code het volgende te bevatten:

• De timeline-trigger heeft de naam --t en de bron is ingesteld op een weergavetijdlijn die het overeenkomende element volgt.
• Het activeringsbereik van de trigger is contain 15% contain 85% . Wanneer het onderwerp zich binnen dat bereik bevindt, wordt de trigger geactiveerd.
• Eenmaal geactiveerd, blijft de trigger actief zolang het onderwerp zich binnen het actieve bereik bevindt entry 100% exit 0% .
• De unclip animatie is aan het element gekoppeld.
• De animatie is ingesteld om --t als triggerbron te gebruiken. Wanneer de trigger actief wordt, begint de animatie voorwaarts af te spelen.
• Wanneer de trigger wordt gedeactiveerd – wat gebeurt wanneer het onderwerp het actieve bereik verlaat – wordt de animatie achteruit afgespeeld.
• De inhoud van de kaart wordt ook geanimeerd met behulp van dezelfde trigger --t .

Het voorbeeld bevat een terugvaloptie met behulp van IntersectionObserver voor browsers die geen ondersteuning bieden voor timeline-trigger .

Meer demo's

Als je geen genoeg kunt krijgen van animaties die geactiveerd worden door scrollen, bekijk dan de volgende demo's:

• Invliegende tekst
• Maak kennis met de monsters (scrollytelling)
• Veranderende vorm

Feedback

We stellen feedback op prijs om deze functie verder te verbeteren. Neem contact met ons op via sociale media of dien een melding in bij de CSS Working Group om feedback te geven.

Als je een bug tegenkomt, meld deze dan via een Chromium-bugrapport . Een lijst met bekende bugs vind je in de Chromium Bug Tracker .