What are CSS scroll-driven animations?

CSS animations whose progress is tied to scrolling instead of time. You write a normal @keyframes rule, then set animation-timeline to scroll() or view() instead of the default time-based timeline. scroll() links the animation to the overall scroll progress of a container. view() links it to a specific element's visibility as it enters and exits the viewport.

Which browsers support them in 2026?

Chrome, Edge, Opera, and Brave have had support since version 115 in mid-2023. Safari added support in version 18. Firefox still has it behind a flag by default, so most Firefox users will not see the animation without a fallback. Wrap every scroll-driven rule in @supports (animation-timeline: view()) and the feature query handles it cleanly.

What is the difference between scroll() and view()?

scroll() tracks the scroll position of a scroll container. The animation goes from 0% to 100% as the user scrolls from top to bottom of the page. Good for reading progress bars and page-wide parallax. view() tracks a specific element's visibility. The animation progresses as the element enters, passes through, and exits the viewport. Good for per-element effects like fade-ins and slide-ins.

What do entry, exit, contain, and cover ranges mean?

entry runs while the element is entering the viewport. exit runs while it is leaving. contain runs only while it is fully inside the viewport. cover runs the entire time any part of the element is visible. You can mix ranges with percentages for precise control, like animation-range: entry 25% cover 50%.

Do scroll-driven animations run on the GPU?

Yes — that is the main performance argument. Because they are declarative CSS, the browser runs them on the compositor thread, off the main thread, the same way it handles transform and opacity animations. Limit animations to transform, opacity, filter, and clip-path to stay on the fast path. Animating width, height, top, or left will trigger layout on the main thread and kill the performance win.

How do I add a reduced-motion fallback?

Wrap the scroll-driven rules in @media (prefers-reduced-motion: no-preference) so they only apply when the user has not asked for reduced motion. Users who enable reduced motion in their OS will see the static final state instead of the animation, which is the accessible default. Combine with @supports for complete graceful degradation.

How to Use CSS Scroll-Driven Animations (2026)

⚡

Try Scroll Animation Builder

Free, no signup →