Scroll-driven animations

<!doctype html>
<meta charset="utf-8">
<title>Scroll-driven animations · ejemplo mínimo</title>
<style>
  body { font: 18px/1.6 system-ui; max-width: 40rem; margin: auto; padding: 2rem; }
  section { margin: 60vh 0; padding: 2rem; background: #eee; }
  #progress { position: fixed; inset: 0 0 auto; height: 4px; background: #c0643a; transform-origin: left; }

  @keyframes grow { from { scale: 0 1; } }
  @keyframes reveal { from { opacity: 0; translate: 0 2rem; } }

  /* Solo si el navegador lo soporta y la persona no ha pedido menos movimiento */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* La barra avanza con el scroll de la página */
      #progress { animation: grow linear both; animation-timeline: scroll(root block); }
      /* Cada sección aparece al entrar en pantalla (el shorthand va antes que el timeline) */
      section { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    }
  }
</style>
<div id="progress"></div>
<h1>Desplázate hacia abajo</h1>
<section>Uno</section>
<section>Dos</section>
<section>Tres</section>