Scroll-driven animations (animation-timeline: scroll() / view())

Chrome 115, Safari 26.0; Firefox in Stable hinter `layout.css.scroll-driven-animations.enabled`, aktiviert in Firefox 158 Nightly (laut caniuse). Interop-2026-Fokusbereich; Baseline Ende 2026 erwartet.

Chrome 115Edge 115Safari 26Firefox flag (158 nightly)

Treibt eine Keyframe-Animation über die Scrollposition statt über die Zeit: Lesefortschrittsbalken, Reveal-on-Scroll, Parallax und schrumpfende Header, alles abseits des Main Threads und ohne Scroll-Listener.

Scroll to reveal these.

One

Two

Three

CSS

.fx-039-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 4px;
  background: #2563eb;
  width: 100%;
  transform-origin: 0 50%;
    animation: fx-039-grow linear both;
  animation-timeline: scroll(root)
}
@keyframes fx-039-grow {
  from {
    scale: 0 1
  }
  to {
    scale: 1 1
  }
}
.fx-039 {
  font-family: system-ui;
  display: grid;
  gap: 24px;
  padding: 40vh 0
}
.fx-039-item {
  padding: 24px;
  background: #f3f4f6;
  border-radius: 12px;
    animation: fx-039-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%
}
@keyframes fx-039-reveal {
  from {
    opacity: 0;
    translate: 0 30px
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-039, .fx-039 * { animation: none; transition: none; }
}

HTML

<section class="fx-039">
  <div class="fx-039-bar"></div>
  <p>Scroll to reveal these.</p>
  <div class="fx-039-item">One</div><div class="fx-039-item">Two</div><div class="fx-039-item">Three</div>
</section>

Fallback: Browser ohne Unterstützung spielen nichts und zeigen den Endzustand (`both` Fill + keine Timeline = statisch); wickle den versteckten `from`-Zustand in `@supports (animation-timeline: scroll())`, wenn der Anfangszustand sonst aufblitzen würde.

Quelle: caniuse.com/mdn-css_properties_animation-timeline and https://webkit.org/blog/17333/webkit-features-in-safari-26-0/

Prompt

Setze Scroll-Effekte mit scrollgesteuerten Animationen um: `animation-timeline: scroll(root)` für Fortschrittsanzeigen, `animation-timeline: view()` plus `animation-range: entry 0% entry 60%` für Reveal-on-Scroll, immer mit `animation-fill-mode: both` und einem `linear` Easing. Wickle die Regeln in `@supports (animation-timeline: scroll())`, damit Firefox-Nutzer (Stable Stand 2026-09 noch hinter Flag) den Inhalt statisch sehen. Kein IntersectionObserver, keine Scroll-Listener.