Анимация прокрутки в CSS: animation-timeline: scroll()

Ещё недавно для прогресс-бара чтения на сайте приходилось подключать JavaScript: отслеживать событие scroll, вычислять процент прокрутки и менять ширину элемента. Теперь это можно сделать чисто на CSS, благодаря новой возможности — Scroll-driven animations.

Рассмотрим стили:

Как это работает

  • animation-timeline: scroll(); — указывает, что анимация будет синхронизирована с прокруткой страницы, а не с течением времени.
  • @keyframes fill-keyframes описывает изменение свойства (здесь — ширины).
  • При скролле страницы полоса «наполняется» пропорционально тому, сколько контента пользователь пролистал.

То есть ширина элемента теперь зависит не от секунд, а от положения скролла.

Поддержка браузеров

Понятно, что фича новая, и потому возникает вопрос, а кто из браузеров это поддерживает?

На данный момент фича поддерживается в Chrome 115+, Edge 115+ и частично в Safari Technology Preview. Firefox пока находится на этапе внедрения.
Для продакшн-решений имеет смысл предусмотреть fallback (например, оставить JS-реализацию для неподдерживаемых браузеров).

Где можно использовать

  • Прогресс-бар чтения статьи.
  • Анимированное появление блоков при скролле (без IntersectionObserver).
  • Креативные эффекты: фоны, изображения или градиенты, которые меняются при прокрутке.

Мало букафф? Читайте есчо !

Битые картинки vs CSS

Февраль 6, 2021 г.

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как ...

Читать

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

Псевдоклассы состояния контейнера input

Октябрь 24, 2018 г.

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT. :checked псевдокласс Позволяет писать стили для радио/чек - боксов, которые выделены (checked) в текущий момент. [crayon-68f9a47784012113810384/] ...

Читать

Как работает position: sticky с bottom: 0 и почему он "не работает"

Август 6, 2025 г.

Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент "прилип" к нижней границе контейнера при прокрутке. Почему так? На деле position: sticky ...

Читать
 

Комментарии к «Анимация прокрутки в CSS: animation-timeline: scroll()»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: