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

Chrome 115, Safari 26.0; Firefox atrás de `layout.css.scroll-driven-animations.enabled` no stable, habilitado no Firefox 158 Nightly (segundo o caniuse). Área de foco do Interop 2026; Baseline esperado para o fim de 2026.

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

Guia uma animação de keyframes pela posição do scroll em vez do tempo: barras de progresso de leitura, revelação no scroll, parallax e cabeçalhos que encolhem, tudo fora da thread principal e sem scroll listeners.

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: Navegadores sem suporte não animam nada e mostram o estado final (fill `both` + sem timeline = estático); envolva o estado `from` escondido em `@supports (animation-timeline: scroll())` se o estado inicial piscaria de outra forma.

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

Prompt

Implemente efeitos de scroll com scroll-driven animations: `animation-timeline: scroll(root)` para indicadores de progresso, `animation-timeline: view()` mais `animation-range: entry 0% entry 60%` para revelação no scroll, sempre com `animation-fill-mode: both` e easing `linear`. Envolva as regras em `@supports (animation-timeline: scroll())` para os usuários de Firefox (stable ainda atrás de flag em 2026-09) verem o conteúdo estático. Sem IntersectionObserver, sem scroll listeners.