scroll-timeline

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

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

/* two values: one each for scroll-timeline-name and scroll-timeline-axis */
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline inline;
scroll-timeline: --custom_name_for_timeline y;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none y;
scroll-timeline: none x;

/* one value: scroll-timeline-name */
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;

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

<scroll-timeline-name>

См. scroll-timeline-name.

<scroll-timeline-axis>

См. scroll-timeline-axis. Значение по умолчанию — block.

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

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

<scroll-timeline-axis> = 
  [ block | inline | x | y ]#  

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

HTML

HTML для примера показан ниже.

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

CSS

В CSS для контейнера задаётся источник временного отсчёта прокрутки под названием --squareTimeline с помощью свойства scroll-timeline . Также устанавливается использование вертикальной полосы прокрутки для временного отсчёта (это не обязательно, так как это значение по умолчанию).

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

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: --squareTimeline y;
  /* Firefox supports the older "vertical" syntax */
  scroll-timeline: --squareTimeline vertical;
  position: relative;
}

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

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

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

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

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

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

Результат

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

Квадрат анимируется при прокрутке, и продолжительность анимации при использовании scroll-timeline зависит от скорости прокрутки (тем не менее, свойство animation-duration определено, чтобы вы могли увидеть анимацию, управляемую прокруткой).

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