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

Свойство scroll-timeline-name CSS используется для задания имени именованной временной шкалы прогресса прокрутки.

Синтаксис

/* Keywords */
scroll-timeline-name: none;

/* Named timeline */
scroll-timeline-name: --custom_name_for_timeline;

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

Значения

Это свойство задаётся одним из следующих значений:

none

Временная шкала не имеет имени.

<dashed-ident>

Произвольный пользовательский идентификатор, задающий имя временной шкалы прогресса прокрутки, на которую затем можно сослаться в свойстве animation-timeline.

Описание

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

Задайте свойство scroll-timeline-name для прокручиваемого контейнера, который предоставляет временную шкалу. Затем на это имя ссылаются в объявлении animation-timeline, указывая элемент-контейнер, используемый для управления ходом анимации при прокрутке.

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

Свойство scroll-timeline-name вместе со свойством scroll-timeline-axis также можно задать с помощью сокращённого свойства scroll-timeline.

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

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

scroll-timeline-name = 
  [ none | <dashed-ident> ]#

Примеры

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

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

HTML

Ниже показан HTML-код примера.

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

CSS

CSS-код контейнера задаёт его как источник временной шкалы прокрутки с именем --square-timeline с помощью свойства scroll-timeline-name. Здесь не задаётся ось полосы прокрутки, поскольку по умолчанию используется вертикальная ось.

Высота контейнера задана как 300px, а также включена вертикальная полоса прокрутки при переполнении (правило CSS height для элемента stretcher ниже приводит к переполнению контейнера содержимым).

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --square-timeline;
  position: relative;
}

Приведённый ниже CSS-код задаёт квадрат, который поворачивается в соответствии с временной шкалой, предоставляемой свойством animation-timeline, которому присвоена указанная выше временная шкала --square-timeline.

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timeline: --square-timeline;
  position: absolute;
  bottom: 0;
}

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

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

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

Правило CSS stretcher задаёт высоту блока 600px, из-за чего содержимое переполняет элемент-контейнер и появляются полосы прокрутки. Без этого элемента содержимое не переполняло бы контейнер, полоса прокрутки отсутствовала бы, а значит, не было бы и временной шкалы прокрутки, которую можно связать с временной шкалой анимации.

Результат

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

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

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

См. также

• animation-timeline
• scroll-timeline, scroll-timeline-axis
• timeline-scope
• Временные шкалы анимации, управляемой прокруткой
• Анимации CSS, управляемые прокруткой