Scroll-gesteuerte Animationen in CSS: scroll-timeline und view-timeline ohne JavaScript

Scroll-gesteuerte Animationen beruhen auf drei CSS-Eigenschaften: animation-timeline, scroll-timeline und view-timeline. Seit 2023 in Chrome und Edge unterstützt, haben sie ihren Weg zur durchgängigen Browser-Kompatibilität 2026 abgeschlossen, als Firefox (Version 159) und Safari (Version 26.0) dazukamen – das entspricht rund 87,8 % weltweiter Browserabdeckung. Damit lässt sich eine Animation an die Scrollposition koppeln, ohne einen einzigen scroll-Event in JavaScript abzuhören.

#Zwei Timelines, ein Prinzip

Eine Scroll-Timeline ersetzt die Zeit durch einen Fortschritt von 0 % bis 100 %. Es gibt zwei Varianten. Die Scroll Progress Timeline (scroll-timeline) misst den Scrollfortschritt innerhalb eines Containers, von oben nach unten. Die View Progress Timeline (view-timeline) misst stattdessen den Fortschritt eines bestimmten Elements durch den sichtbaren Viewport: 0 % beim Eintritt, 100 % beim Austritt.

#scroll-timeline und view-timeline in der Praxis

#Eine Lesefortschrittsleiste

Der häufigste Fall ist die Lesefortschrittsleiste eines Artikels, die sich beim Scrollen der Seite füllt.

<div class="progress-track">
  <div class="progress-bar"></div>
</div>

:root {
  timeline-scope: --page-scroll;
}

html {
  scroll-timeline: --page-scroll block;
}

.progress-bar {
  animation: fuellen linear;
  animation-timeline: --page-scroll;
}

@keyframes fuellen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

Kein Event-Handler, keine manuelle Prozentrechnung: Die Rendering-Engine interpoliert die animierten Eigenschaften direkt anhand des Scrollfortschritts.

#Eine Karte beim Eintritt in den Viewport enthüllen

Für Enthüllungseffekte beim Scrollen (Einblenden, Verschieben) zielt view-timeline direkt auf das zu animierende Element, statt auf den scrollenden Container.

.karte {
  view-timeline-name: --karte-enthuellen;
  view-timeline-axis: block;

  animation: enthuellen linear;
  animation-timeline: --karte-enthuellen;
  animation-range: entry 10% cover 40%;
}

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

animation-range grenzt den Bereich ein, in dem die Animation abläuft: Hier beginnt sie, sobald die Karte 10 % ihres Eintritts in den Viewport zurückgelegt hat, und endet bei 40 % ihrer vollständigen Durchquerung – so wird vermieden, dass ein Effekt zu früh auslöst oder zu spät endet.

Eine Scroll-Timeline hört auf kein Ereignis: Der Fortschritt wird direkt in der Style-Pipeline der Rendering-Engine berechnet, ohne jemals den JavaScript-Hauptthread zu durchlaufen.

#Kompatibilität, Fallback und Debugging

#Endlich echte Kompatibilität in 2026

Die Unterstützung durch Firefox und Safari kam erst in diesem Jahr: Bis dahin blieben die drei Eigenschaften auf streng progressive Effekte beschränkt, die auf nicht unterstützten Browsern einfach ohne Animation dargestellt wurden.

#Eine Timeline in den Entwicklertools debuggen

Chrome und Edge zeigen aktive Scroll-Timelines direkt im Animationen-Panel der Entwicklertools an: Jede Timeline erscheint mit ihrem aktuellen Fortschritt, der sich beim Scrollen der Seite bei geöffnetem Panel beobachten lässt. Das ist der schnellste Weg, um zu prüfen, ob ein animation-range am richtigen Punkt beginnt und endet, statt die Werte per Trial-and-Error im Stylesheet zu erraten. Firefox bietet eine vergleichbare Inspektion seit der Unterstützung ab Version 159.

#Fallback für nicht unterstützte Browser

Für Zielgruppen, die noch einen Anteil älterer Browser mitbringen, verhindert eine Feature-Abfrage, dass Inhalte durch einen Style-Fehler statt durch das Fehlen der Animation eingefroren wirken:

@supports (animation-timeline: works) {
  .karte {
    opacity: 0;
  }
}

Ohne diese Prüfung bliebe ein Element, dessen Anfangszustand von der Animation abhängt (hier eine Opazität von 0 vor der Enthüllung), auf einem Browser unsichtbar, der die Animation nie abspielt.

#Barrierefreiheit, Karussell und Performance

#Die Präferenz für reduzierte Bewegung respektieren

@media (prefers-reduced-motion: reduce) {
  .karte {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

#scroll-snap und view-timeline für ein geführtes Karussell kombinieren

Beide Mechanismen lassen sich gut kombinieren: Ein Container mit scroll-snap-type erzwingt einen sauberen Stopp bei jeder Folie, während eine auf jedem Karussell-Element gesetzte view-timeline dessen Skalierung oder Opazität steuert, während es die zentrale Zone durchquert.

.karussell {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.karussell > * {
  scroll-snap-align: center;
  view-timeline-name: --folie;
  view-timeline-axis: inline;

  animation: an-raendern-verkleinern linear;
  animation-timeline: --folie;
  animation-range: cover 0% cover 100%;
}

@keyframes an-raendern-verkleinern {
  0%, 100% { transform: scale(0.85); opacity: 0.5; }
  50%      { transform: scale(1);    opacity: 1;   }
}

Das Ergebnis: Die zentrierte Folie wächst leicht, ihre Nachbarn schrumpfen, ohne dass ein Skript die Scrollposition Bild für Bild neu berechnet.

#Auswirkung auf die Performance

Diese Animationen laufen in der Style-Pipeline der Rendering-Engine statt in einer vom Hauptthread gesteuerten requestAnimationFrame-Schleife. In der Praxis konkurriert schnelles Scrollen nicht mehr mit dem eigenen JavaScript der Seite um dieselben CPU-Ressourcen, was das Ruckel-Risiko auf Einsteigergeräten senkt. Der Kompromiss: Nur Eigenschaften, die per Compositing animiert werden können (vor allem transform und opacity), bleiben ohne Aussetzer flüssig; das Animieren von Eigenschaften, die ein Layout auslösen (wie width oder top), bleibt teuer – mit oder ohne Scroll-Timeline.

#Einsatz in der Produktion

Über die Fortschrittsleiste, Karten-Enthüllungen und das Karussell hinaus dient derselbe Mechanismus dazu, einen Seitenkopf beim Scrollen zu verkleinern oder einen leichten Parallax-Effekt auf ein Bild zu legen. In jedem Fall bleibt die Animation deklarativ und hängt nicht mehr von einer eigenen JavaScript-Bibliothek fürs Scrollen ab – anders als bei den Ansätzen, die für vollständige Seitenübergänge weiterhin nötig sind, wie sie unser Artikel zu View Transitions beschreibt.

Dieser Mechanismus ergänzt sinnvoll die bereits ohne JavaScript verfügbaren Techniken, vom CSS Anchor Positioning für Menüs und Tooltips bis zu den Container Queries für adaptive Komponenten: Layout und Interaktion wandern weiter von JavaScript zu deklarativen Mechanismen, die nativ von der Rendering-Engine übernommen werden.

#Was man sich merken sollte

Mit Firefox 159 und Safari 26 an Bord decken scroll-gesteuerte Animationen inzwischen den Großteil des Browsermarkts ab und können von einer experimentellen Spielerei zu einem Produktionswerkzeug werden. Eine @supports-Abfrage als Fallback und die Beachtung von prefers-reduced-motion bleiben die beiden Vorsichtsmaßnahmen, die verhindern, dass aus einer visuellen Verbesserung eine Barrierefreiheits-Regression wird.

Zum Weiterlesen: die CSS-Scroll-driven-Animations-Referenz auf MDN.