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

Chrome 115, Safari 26.0; Firefox detrás de `layout.css.scroll-driven-animations.enabled` en estable, habilitado en Firefox 158 Nightly (según caniuse). Área de foco de Interop 2026; Baseline previsto para finales de 2026.

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

Controla una animación de keyframes por la posición del scroll en lugar del tiempo: barras de progreso de lectura, revelado al hacer scroll, parallax y cabeceras que encogen, todo fuera del hilo principal y sin listeners de scroll.

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: Los navegadores sin soporte no reproducen nada y muestran el estado final (relleno `both` + sin timeline = estático); envuelve el estado `from` oculto en `@supports (animation-timeline: scroll())` si el estado inicial parpadearía.

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

Prompt

Implementa los efectos de scroll con animaciones dirigidas por scroll: `animation-timeline: scroll(root)` para indicadores de progreso, `animation-timeline: view()` más `animation-range: entry 0% entry 60%` para revelado al hacer scroll, siempre con `animation-fill-mode: both` y easing `linear`. Envuelve las reglas en `@supports (animation-timeline: scroll())` para que los usuarios de Firefox (estable sigue detrás de un flag a fecha 2026-09) vean el contenido estático. Sin IntersectionObserver, sin listeners de scroll.