Анимация прокрутки в 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).
  • Креативные эффекты: фоны, изображения или градиенты, которые меняются при прокрутке.

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

Кол-во знаков после запятой при генерации css препроцессором sass

Март 28, 2018 г.

В одном из проектов использовался SASS, но оказалось, что у другого разработчика другие настройки SASS. И конечные CSS генерировались с числами другой точности (другое кол-во знаков после запятой). Любое изменение в файле приводило к огромному ...

Читать

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

Этот эффект я увидел на одном сайте, где авторы решили так оригинально бороться с пользователями ад-блокера. Дескать сайт живет за счет рекламы, а раз ...

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

Ошибка background-size:cover в Firefox при рендеринге svg

Сентябрь 21, 2021 г.

По какой то причине firefox не верно отрабатывает свойство background-size: cover для SVG. Чтобы воспроизвести попробуйте задать стили вроде: [crayon-68ded9e641471203013650/] Чтобы исправить ситуацию, вы можете заменить размер фона на следующий: ...

Читать
 

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

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



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