Animate on scroll with CSS

How to do it

Use animation-timeline: scroll() or view() with animation-range for scroll effects. Chrome and Safari 26 support it, and Firefox does not yet by default. Wrap it in @supports, animate only opacity or transform, and turn it off under prefers-reduced-motion: reduce.

Example

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      transform-origin: left;
      animation: grow linear both;
      animation-timeline: scroll();
      animation-range: 0% 100%;
    }
  }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

How to check

A grep of the scripts finds no scroll event listener used for visual effects.