Scroll-driven animations are one of the most exciting additions to CSS in recent years. They let you tie animations directly to a user's scroll position — no JavaScript, no heavy libraries, just clean, performant CSS.
In this tutorial, we'll build a complete day-to-night landscape scene that transforms as you scroll. The sky shifts from bright blue to sunset orange to deep midnight purple. The sun arcs across the horizon and sets. The moon rises. Stars fade in. Mountains and trees slowly darken into silhouettes.
And we will do it all with zero JavaScript.
Browser Support
As of 2025, animation-timeline: scroll() is supported in Chrome, Edge, and Safari. Firefox support is currently behind a feature flag.
