scroll-timeline и view(): анимация, привязанная к скроллу страницы

Именованные timeline, `animation-timeline: scroll()` и прогресс-бар без JS.

Scroll-driven animations используют scroll-timeline и view-timeline, чтобы привязать @keyframes к позиции скролла или видимости блока.

Типичный кейс — индикатор прогресса чтения статьи и reveal секций на лендинге.

- [Scroll-driven animations — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations) — Timeline и привязка.

- [Animate on scroll — web.dev](https://web.dev/articles/scroll-driven-animations) — scroll() и view().

---

## Доступность

Уважайте prefers-reduced-motion — отключайте timeline-анимации.

#CSS#анимация#scroll

Читайте также