Анимация, которая проигрывается не по времени, а по мере прокрутки страницы — прогресс-бар чтения статьи, параллакс-эффект, постепенное появление элементов при скролле — долгое время требовала JavaScript для отслеживания положения прокрутки на каждом кадре.
Новые возможности CSS позволяют связать анимацию непосредственно с прокруткой без единой строчки скрипта — таймлайн анимации привязывается не к обычному времени в секундах, а к прогрессу прокрутки страницы или конкретного контейнера, и анимация проигрывается синхронно с движением скролла.
Это открывает довольно эффектные сценарии: изображение, которое плавно увеличивается по мере прокрутки к нему, полоса прогресса чтения статьи, которая растёт слева направо синхронно с положением на странице, или блоки, которые последовательно проявляются один за другим при пролистывании раздела.
Главное преимущество перед JavaScript-реализацией — производительность. Браузер обрабатывает такую анимацию на уровне рендеринга, без постоянного выполнения обработчика события прокрутки на JavaScript, который при частом срабатывании способен заметно нагружать процессор, особенно на слабых устройствах.
Поддержка этой возможности в браузерах пока не такая повсеместная, как у более давно устоявшихся свойств CSS, поэтому перед использованием в реальном проекте стоит проверить актуальную ситуацию с поддержкой и продумать разумный запасной вариант для браузеров, которые пока не умеют работать с этой технологией.
Как и с любой другой анимацией, здесь важно помнить о пользователях с настройкой уменьшения движения — для них подобные эффекты стоит либо сильно приглушать, либо отключать вовсе, ориентируясь на медиазапрос prefers-reduced-motion.
Подробнее о новых возможностях анимации, привязанной к прокрутке, рассказано в статье про scroll-driven анимации в документации Chrome.
