Scroll-driven animations — это новая возможность CSS, которая позволяет анимировать элементы, синхронизируясь с прокруткой страницы. Больше не нужно использовать JavaScript, чтобы «подогнать» поведение элементов под скролл — теперь всё можно сделать нативно и эффективно.

Как это работает? В основе лежит новая директива @scroll-timeline, которая создаёт временную шкалу, привязанную к скроллу. Затем вы можете привязать CSS-анимацию к этой шкале через свойство animation-timeline.

Пример: вы можете сделать так, чтобы элемент плавно появлялся или трансформировался, пока пользователь прокручивает страницу. Живой пример

Где это применимо? – Появление секций при прокрутке – Параллакс-эффекты – Анимация прогресса – Заголовки, которые "едут" со скроллом – Любая визуальная динамика, связанная с прокруткой

⚠️ Поддержка пока ограничена: работает в последних версиях Chromium-браузеров (Chrome, Edge). Firefox и Safari — на подходе.