CSS-Scroll-Animationen verankern Bewegung direkt an der Scrollposition, ganz ohne die Bibliotheken GSAP oder AOS. Seit September 2025 rendert auch Safari die Technik, damit schließt sich die letzte große Lücke im Browser-Feld. Für Betreiber bedeutet das schlankere Seiten, weniger Wartung und ein Ruckeln weniger beim Scrollen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
CSS-Scroll-Animationen lösen ein Problem, das Frontends seit Jahren mit Fremdcode zukleistern. Bislang lud man für eine Fortschrittsleiste, einen Parallaxe-Effekt oder ein sanftes Einblenden eine JavaScript-Bibliothek und ein paar hundert Zeilen Logik nach. Diese Krücke macht der Browser jetzt überflüssig.
Das Wichtigste in Kürze
- Zwei neue Zeitleisten, scroll() und view(), koppeln CSS-Keyframes an die Scrollposition statt an die Uhr.
- Chrome und Edge beherrschen die Technik seit Juli 2023, Safari seit September 2025.
- Nur Firefox schaltet sie stabil noch hinter einem Flag frei, für 2026 steht sie auf der Interop-Liste.
- Scroll-Animationen laufen außerhalb des Haupt-Threads, das Scrollen bleibt flüssig.
Wie CSS-Scroll-Animationen ohne JavaScript funktionieren
Zwei neue Zeitleisten steuern die Bewegung: scroll() koppelt die Animation an den Scrollweg eines Containers, view() startet sie, sobald ein Element ins Bild rückt, und stoppt sie am gegenüberliegenden Rand.
Die Keyframes bleiben dieselben wie bei einer klassischen Animation, allein die Steuerung wechselt. Die Eigenschaft animation-timeline verweist auf eine dieser Zeitleisten, animation-range legt den genauen Abschnitt fest. Kein Scroll-Listener und kein IntersectionObserver rechnen mehr im Haupt-Thread mit.[2]
Welche Scroll-Bibliotheken jetzt überflüssig werden
GSAP mit ScrollTrigger, AOS, ScrollMagic und Smooth-Scroll-Pakete wie Lenis erledigten bisher Aufgaben, die inzwischen vier CSS-Zeilen genauso lösen. So wie der Browser die Tooltips längst selbst positioniert, deckt er nun auch die Scroll-Logik ab. Jede eingesparte Bibliothek senkt Ladegewicht, Wartung und die Angriffsfläche über fremde Abhängigkeiten.
Der Browser-Support schloss zuletzt die entscheidende Lücke. Chrome und Edge beherrschen die Technik seit Juli 2023, Safari unterstützt sie seit September 2025, allein bei Firefox liegt sie stabil noch hinter einem Flag und steht für 2026 auf der Interop-Liste.[1] Eine echte Baseline fehlt damit noch, ein sauberer Fallback bleibt Pflicht.
Nicht jeder Scroll-Effekt braucht ein eigenes Framework. Was jahrelang an Bibliotheken ausgelagert war, erledigt jetzt der Browser selbst und macht schlanke Seiten schneller.
— Michael Dobler, Herausgeber Dr. Web
Was der Browser jetzt selbst steuert und welche Bibliotheken dafür verzichtbar werden.
Wo der Browser schon mitmacht
Was in Rente geht
Wann sich der Umstieg auf CSS-Scroll-Animationen lohnt
Sobald ein Effekt unkritisch ist, lohnt der Einstieg sofort. Ein Test mit @supports (animation-timeline: scroll()) kapselt die Animation, in älteren Browsern bleibt der Inhalt schlicht sichtbar. Niemand sieht eine kaputte Seite, nur eine ruhigere. Weiche Seitenwechsel per View Transitions zeigen bereits, wie weit moderne Layouts ohne Skript kommen.
Zwei Punkte gehören dennoch in jede Umsetzung. Die Abfrage prefers-reduced-motion schützt Nutzer, die Bewegung meiden, und bedient eine Vorgabe, auf die das Barrierefreiheitsstärkungsgesetz seit Juni 2025 pocht. Weniger JavaScript verbessert zugleich die Core Web Vitals und damit die Sichtbarkeit bei Google. Solche Techniken zählen zu den Webdesign-Trends, die 2026 bleiben.
Starten Sie mit einer Lese-Fortschrittsleiste, messen Sie die Ladezeit davor und danach und ersetzen Sie erst dann die größeren Skripte.
Quellen
[1] MDN Web Docs: „animation-timeline“ und CSS Scroll-driven Animations
[2] Chrome for Developers: „Scroll-driven animations“
Mehr Newshunger?
- Tooltip-Bibliotheken in Rente: Wie CSS die Arbeit übernimmt
- Hilfe, die CSS Container Queries kommen: Alles was du jetzt wissen musst
- CSS-Typografie: Wie der Browser endlich wie eine Druckseite setzt
- Layout-Animation: Wie FLIP und View Transitions Sprünge im Interface glätten
- Braucht modernes CSS 2026 noch ein Reset?
