animation-timeline

none

Анимация не связана с временной шкалой.

auto

Временная шкала анимации — это стандартная временная шкала документа DocumentTimeline.

scroll()

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

См. scroll() для получения дополнительной информации.

view()

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

См. view() для получения дополнительной информации.

<dashed-ident>

Идентификатор <dashed-ident>, идентифицирующий именованную временную шкалу, предварительно объявленную с помощью свойства scroll-timeline-name или view-timeline-name (или сокращённого свойства scroll-timeline или view-timeline).

Примечание: Если две или более временные шкалы имеют одинаковое имя, будет использоваться последняя, объявленная в каскаде. Также, если не найдена временная шкала, соответствующая заданному имени, анимация не связана с временной шкалой.

Примечание: Значения <dashed-ident> должны начинаться с --. Это помогает избежать конфликтов имён со стандартными ключевыми словами CSS.

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>        

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

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

HTML

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

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

CSS

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

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

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

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

#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-direction: alternate;
  animation-timeline: --squareTimeline;

  position: absolute;
  bottom: 0;
}

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

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

#stretcher {
  height: 600px;
}

Результат

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

В этом примере элемент #square анимируется с помощью анонимной временной шкалы прогресса прокрутки, которая применяется к анимируемому элементу с помощью функции scroll(). Временная шкала в этом конкретном примере предоставляется ближайшим родительским элементом, имеющим полосу прокрутки (любую), из полосы прокрутки в направлении блока.

HTML

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

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

CSS

CSS ниже определяет квадрат, который вращается в разные стороны в соответствии с временной шкалой, предоставляемой свойством animation-timeline. В данном случае временная шкала предоставляется scroll(block nearest), что означает, что она выберет полосу прокрутки в направлении блока ближайшего предкового элемента, имеющего полосы прокрутки; в данном случае вертикальную полосу прокрутки элемента «container».

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

  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

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

CSS для контейнера устанавливает его высоту в 300 пикселей, а также настраивает контейнер для создания вертикальной полосы прокрутки при переполнении. CSS «stretcher» устанавливает высоту блока в 600 пикселей, что заставляет элемент контейнера переполняться. Вместе эти настройки обеспечивают наличие у контейнера вертикальной полосы прокрутки, которая может быть использована в качестве источника анонимной временной шкалы прогресса прокрутки.

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

#stretcher {
  height: 600px;
}

Результат

Прокрутите, чтобы увидеть анимированный элемент-квадрат.

Именованная временная шкала прогресса просмотра с именем --subjectReveal определяется с помощью свойства view-timeline-name на элементе-объекте со значением class animation. Затем она устанавливается как временная шкала для того же элемента с помощью animation-timeline: --subjectReveal;. В результате элемент-объект анимируется при перемещении вверх по документу при прокрутке.

HTML

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

<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

CSS

Элемент subject и содержащий его элемент content стилизованы минимально, и текстовому содержимому заданы базовые настройки шрифта:

.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

Элементу <div> с классом subject также задан класс animation — здесь устанавливается view-timeline-name для определения именованной временной шкалы прогресса просмотра. Ему также задано имя animation-timeline со значением, чтобы указать, что этот элемент будет анимирован по мере продвижения по временной шкале прогресса просмотра.

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

.animation {
  view-timeline-name: --subjectReveal;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

Результат

Прокрутите, чтобы увидеть анимированный элемент-объект.

Анонимная временная шкала прогресса просмотра устанавливается для элемента с классом subject с помощью animation-timeline: view(). В результате элемент subject анимируется при перемещении вверх по документу при прокрутке.

HTML

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

<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

CSS

Элемент subject и содержащий его элемент content стилизованы минимально, и текстовому содержимому заданы базовые настройки шрифта:

.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

Элементу <div> с классом subject также задан класс animation — здесь animation-timeline: view() устанавливает, что он будет анимирован по мере продвижения по временной шкале прогресса просмотра, предоставляемой его прокручиваемым предком (в данном случае корневым элементом документа).

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

.animation {
  animation-timeline: view();

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

Результат

Прокрутите, чтобы увидеть анимированный элемент-объект.

• animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function
• scroll-timeline-name, scroll-timeline-axis, scroll-timeline
• timeline-scope
• view-timeline-name, view-timeline-axis, view-timeline, view-timeline-inset
• Эквивалент на JavaScript: свойство timeline доступное в Element.animate() вызовах
• CSS-анимации, управляемые прокруткой
• Использование CSS-анимаций