← Back to at-rules

CSS At-rule

@scroll-timeline

Animation

Links a CSS animation to the scroll position of a scroll container.

Syntax

@scroll-timeline name { source: selector('.el'); }

Example

@scroll-timeline progress { source: selector('#page'); }

Common use cases

  • Scroll-driven progress bars
  • Parallax effects without JavaScript
  • Animate elements based on scroll position

Practical developer insight

The original @scroll-timeline at-rule has evolved — modern implementations use the scroll-timeline property instead. Check the Animation Timeline spec for current usage.

Related

@keyframes@view-transition