Scroll-driven animations là gì?

Scroll-driven animations gắn animation theo vị trí scroll thay vì theo thời gian. Hai loại timeline:

• animation-timeline: scroll() — liên kết với scroll progress (ví dụ progress bar 0–100% khi cuộn trang)
• animation-timeline: view() — kích hoạt khi element vào/rời viewport

.progress {
  animation: grow linear;
  animation-timeline: scroll();
}

Thay thế JS scroll event listeners tốn performance.

Chrome 115+, Firefox 128+.

A new CSS API that ties animations to scroll position instead of time.

• Two timeline types: animation-timeline: scroll() links an animation to the scroll progress of a scroll container (e.g., a progress bar going 0% to 100% as the user scrolls); animation-timeline: view() triggers when an element enters or leaves the viewport.
• This replaces performance-expensive JS scroll event listeners and is great for parallax, reveal animations, and progress indicators.
• Supported in Chrome 115+ and Firefox 128+.