Свойство CSS `scroll-timeline`

scroll-timeline — это CSS-сокращенное свойство, используемое для определения именованной временной шкалы прокрутки, ход которой определяется прокруткой прокручиваемого элемента (контейнера прокрутки) от верхнего края к нижнему (или от левого к правому).

Составные свойства

Это свойство является сокращенной записью следующих свойств CSS, указанных в таком порядке:

• scroll-timeline-name
• scroll-timeline-axis

Синтаксис

/* One value */
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;

/* Two values */
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none inline;
scroll-timeline: none y;

/* Global values */
scroll-timeline: inherit;
scroll-timeline: initial;
scroll-timeline: revert;
scroll-timeline: revert-layer;
scroll-timeline: unset;

Значения

<scroll-timeline-name>

<dashed-ident> или ключевое слово none.

<scroll-timeline-axis>

Ключевое слово <axis>. Значение по умолчанию — block.

Описание

Сокращенное свойство scroll-timeline можно применить к элементу-контейнеру, чтобы задать свойства scroll-timeline-name и scroll-timeline-axis. Оно задается для контейнера прокрутки, который предоставляет временную шкалу. Если содержимое контейнера не выходит за его границы или переполнение скрыто либо обрезано, временная шкала создана не будет.

Значение scroll-timeline-name, если оно не равно none, должно быть значением <dashed-ident>, то есть начинаться с --. Это помогает избежать конфликтов имен со стандартными ключевыми словами CSS. Затем это имя можно использовать в качестве значения свойства animation-timeline элемента, чтобы определить элемент-контейнер прокрутки, который задаст его временную шкалу анимации и будет управлять ходом анимации при прокрутке.

Необязательное значение <axis> прокрутки задает scroll-timeline-axis; если оно не указано, используется значение block. Если указаны и имя, и ось, сначала должно идти значение <scroll-timeline-name>, а затем значение <axis>. Если первым указано <axis>, объявление недействительно и будет проигнорировано.

Формальное определение

Формальный синтаксис

scroll-timeline = 
  [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

Примеры

Создание анимации с именованной временной шкалой прокрутки

В этом примере временная шкала прокрутки с именем --square-timeline определяется с помощью свойства scroll-timeline-name для элемента #container. Затем имя временной шкалы применяется к анимации элемента #square с помощью animation-timeline: --square-timeline.

HTML

Добавим контейнер с двумя дочерними элементами <div>.

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

Зададим контейнеру высоту 300px, чтобы он прокручивался по вертикали.

С помощью свойства scroll-timeline зададим контейнер в качестве источника временной шкалы прокрутки с именем --square-timeline и явно укажем стандартную вертикальную полосу прокрутки как контроллер временной шкалы.

#container {
  height: 300px;
  overflow-y: scroll;

  scroll-timeline: --square-timeline y;
  /* Firefox supports the non-standard vertical/horizontal syntax */
  scroll-timeline: --square-timeline vertical;

  position: relative;
}

Зададим квадрату базовые стили. Применим rotateAnimation с помощью свойства animation-name. По умолчанию будет использоваться временная шкала документа, основанная на времени. Задав свойству animation-timeline указанную выше временную шкалу --square-timeline, мы настроим вращение квадрата в соответствии с временной шкалой, основанной на прокрутке: ее ход будет меняться при прокрутке контейнера.

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;

  animation: rotateAnimation 1ms linear;
  animation-timeline: --square-timeline;
}

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

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@layer no-support {
  @supports not (scroll-timeline: --square-timeline) {
    body::before {
      content: "Your browser doesn't support the `scroll-timeline` property.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

Прокрутите вертикальную полосу, чтобы увидеть, как квадрат анимируется при прокрутке.

Квадрат анимируется при прокрутке. При использовании scroll-timeline длительность анимации зависит от скорости прокрутки, а не от значения свойства animation-duration.

Спецификации

Совместимость с браузерами

См. также

• animation-timeline
• scroll-timeline-axis
• scroll-timeline-name
• Руководство: временные шкалы анимации, управляемые прокруткой
• Модуль анимации CSS, управляемые прокруткой
• Модуль анимации CSS