Q43: How do CSS Scroll-Driven Animations link keyframes directly to scroll progress?
CSS Scroll-Driven Animations link keyframe timelines directly to page scroll progress using animation-timeline: scroll() or view progress using animation-timeline: view(), enabling scroll-linked progress indicators without JavaScript scroll listeners.
Scroll Progress Reading Bar
@keyframes progress-grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.reading-progress-bar {
animation: progress-grow linear;
animation-timeline: scroll(root);
}💡 The reading bar expands smoothly from 0% to 100% width bound directly to root document scroll position.
Key Takeaways
- Links animation keyframes directly to scroll containers without JavaScript.
animation-timeline: scroll()maps timeline execution to scroll percentages.
Knowledge Check
Which property binds a keyframe animation timeline directly to container scroll progress?