Скоро появятся CSS-анимации, запускаемые при прокрутке!

Bramus

Опубликовано: 12 декабря 2025 г.

В 2023 году мы выпустили анимацию, управляемую прокруткой , которая позволяет продвигать (или перематывать) анимацию вперед (или назад) по мере прокрутки. В анимации, управляемой прокруткой, прогресс анимации увеличивается от 0% до 100% по мере прокрутки. Если вы остановите прокрутку, анимация приостановится; если вы прокрутите обратно, анимация начнется в обратном порядке.

Следующая глава в истории анимаций, запускаемых при прокрутке, наступит в 2026 году, когда в Chrome 145 появятся анимации, срабатывающие при прокрутке. Это анимации, зависящие от времени, которые запускаются при пересечении определенного смещения прокрутки.

Забудьте о IntersectionObserver для подобных эффектов, теперь вы можете реализовать их декларативно в CSS.

Триггеры временной шкалы, триггеры анимации и действия

Запустить анимацию

Чтобы настроить анимацию, запускаемую при прокрутке, в CSS, начните с обычной CSS-анимации, прикрепленной к элементу:

animation: unclip 0.35s ease-in-out both;

Эта анимация использует объект DocumentTimeline в качестве драйвера и длится 0,35 секунды. Анимация автоматически запускается после загрузки страницы. Чтобы изменить время запуска, используйте новое свойство CSS animation-trigger :

animation-trigger: --t play-forwards play-backwards;

Здесь анимация запускается триггером --t . При активации этого триггера выполняется действие play-forwards для анимации, а при деактивации триггера — действие play-backwards .

В спецификации содержится полный перечень действий .

Создайте триггер

Но что же это за триггер --t ? Это триггер с именем --t . В частности, для анимаций, запускаемых прокруткой, это "триггер временной шкалы", который использует временную шкалу прогресса прокрутки или временную шкалу прогресса просмотра в качестве источника.

Для определения триггера временной шкалы используйте свойство timeline-trigger (или его полное обозначение). Например, чтобы создать триггер с именем --t , который использует временную шкалу представления в качестве источника, используйте следующее:

timeline-trigger-name: --t;
timeline-trigger-source: view();

Созданный триггер --t активируется и деактивируется в зависимости от временной шкалы просмотра, связанной с соответствующим элементом. Поскольку диапазон по умолчанию для временной шкалы просмотра — это диапазон cover , триггер также активируется и деактивируется, когда находится внутри или за пределами этого диапазона.

Настройте диапазоны срабатывания триггера.

Чтобы настроить положения, в которых триггер должен быть активен или неактивен, укажите диапазоны активации и активности триггера. В следующем примере диапазон активации установлен на entry 100% exit 0% , что означает, что триггер активируется, как только субъект окажется в пределах этого диапазона.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

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

В сочетании с уже определенным animation-trigger это визуально приводит к тому, что анимация воспроизводится вперед, когда объект полностью входит в область прокрутки, и назад, когда он собирается покинуть область прокрутки.

Возможно использование различных диапазонов активации и активности. Например:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

В данном случае триггер срабатывает, когда объект находится в диапазоне entry 100% exit 0% . Триггер остается активным до тех пор, пока объект не покинет диапазон entry 0% exit 100% .

Визуально это приводит к тому, что анимация воспроизводится вперед, когда объект входит в область прокрутки, и, в отличие от прежних настроек, она остается активной до тех пор, пока объект полностью не покинет область прокрутки.

Ограничьте область действия триггера.

Триггеры видны глобально, это означает, что последнее совпадение, объявляющее триггер с определенным именем, «побеждает». Чтобы ограничить видимость триггера, используйте свойство trigger-scope . Это аналогично использованию anchor-scope .

trigger-scope: --t; /* List of dashed idents, or `all` */

Если у вас есть правило CSS, объявляющее триггер и соответствующее нескольким элементам, вам потребуется использовать trigger-scope .

Демо

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

Логика анимации, запускаемой при прокрутке, следующая:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

В результате анализа код выглядит следующим образом:

• timeline-trigger называется --t а в качестве источника задана временная шкала представления, отслеживающая соответствующий элемент.
• Диапазон срабатывания триггера contain 15% contain 85% . Когда субъект находится в этом диапазоне, триггер активируется.
• При активации триггер остается активным до тех пор, пока субъект находится в активной зоне ( entry 100% exit 0% .
• Анимация unclip прикреплена к элементу.
• Анимация настроена на использование параметра --t в качестве источника запуска. Когда триггер активируется, анимация начинает воспроизводиться в направлении вперед.
• Когда триггер деактивируется — что происходит, когда объект покидает активную зону — анимация воспроизводится в обратном порядке.
• Содержимое карточки также анимируется при появлении и исчезновении с помощью того же триггера --t .

В примере предусмотрен резервный вариант с использованием IntersectionObserver для браузеров, не поддерживающих timeline-trigger .

Больше демонстраций

Если вам нравятся анимации, запускаемые при прокрутке, посмотрите следующие демонстрации:

• Текст для въезда на самолете
• Встречайте монстров (скролли-рассказ)
• Изменение формы

Обратная связь

Нам важны ваши отзывы, чтобы мы могли и дальше улучшать эту функцию. Свяжитесь с нами в социальных сетях или отправьте запрос в рабочую группу CSS, чтобы оставить свой отзыв.

Если вы обнаружили ошибку, сообщите нам об этом , создав заявку в Chromium . Список известных ошибок: см. систему отслеживания ошибок Chromium .