Свойство CSS `animation-range-start`

Свойство animation-range-start CSS задаёт точку на временной шкале, в которой должна начаться анимация.

Синтаксис

/* Keyword or length percentage value */
animation-range-start: normal;
animation-range-start: 20%;
animation-range-start: 100px;

/* Named timeline range value */
animation-range-start: cover;
animation-range-start: contain;
animation-range-start: cover 20%;
animation-range-start: contain 100px;

/* Multiple values */
animation-range-start:
  cover 20%,
  contain 100px;

/* Global values */
animation-range-start: inherit;
animation-range-start: initial;
animation-range-start: revert;
animation-range-start: revert-layer;
animation-range-start: unset;

Значения

Это свойство задаётся списком значений, разделённых запятыми. Каждое значение может быть одним из следующих:

normal

Обозначает начало временной шкалы. Это значение по умолчанию.

<length-percentage>

Задаёт значение длины или процента, отсчитываемое от начала временной шкалы.

<timeline-range-name>

Задаёт именованный диапазон временной шкалы в общей временной шкале. Диапазон начинается с 0%.

<timeline-range-name> <length-percentage>

Задаёт значение длины или процента, отсчитываемое от начала указанного именованного диапазона временной шкалы.

Описание

Допустимые значения свойства animation-range-start: normal, <length-percentage>, <timeline-range-name> или <timeline-range-name> с последующим <length-percentage>. Если значение <timeline-range-name> не включает <length-percentage>, по умолчанию процент равен 0%.

Подробное описание доступных значений см. в разделе animation-range.

Если указано несколько значений, разделённых запятыми, они применяются к анимациям в том порядке, в котором следуют значения animation-name. См. раздел Задание нескольких значений свойств анимации.

Свойство animation-range-start включено в сокращённую запись animation как значение, используемое только для сброса. Это означает, что применение сокращённой записи animation сбрасывает ранее объявленное значение animation-range-start с равной или меньшей специфичностью до normal; сокращённую запись нельзя использовать для задания нового значения animation-range-start. При создании прокручиваемых анимаций CSS объявляйте animation-range-start после сокращённой записи animation, чтобы избежать сброса значения до normal.

Свойство animation-range-start, наряду со свойством animation-range-end, также можно задать с помощью сокращённой записи animation-range.

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

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

animation-range-start = 
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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

<timeline-range-name> = 
  cover |
  contain |
  entry |
  exit |
  entry-crossing |
  exit-crossing

Примеры

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

В этом примере свойство animation-range-start применяется к элементу, анимируемому с помощью временной шкалы прогресса прокрутки. Благодаря этому анимация начинается задолго до того, как элемент попадает в область прокрутки.

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="animatedElement"></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

Временная шкала прогресса прокрутки задаётся с помощью функции scroll() в качестве значения свойства animation-timeline. Это свойство объявлено после сокращённой записи animation, чтобы избежать сброса значения соответствующего развернутого свойства.

Мы также задали animation-range-start, чтобы анимация начиналась раньше ожидаемого.

.animatedElement {
  background-color: deeppink;

  animation: appear 1ms linear;

  animation-timeline: scroll();
  animation-range-start: -25%;
}

@keyframes appear {
  from {
    background-color: rebeccapurple;
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    background-color: darkturquoise;
    opacity: 0.75;
    transform: scaleX(0.75);
  }
}

Для краткости остальные стили, применённые в этом примере, здесь скрыты.

.animatedElement {
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

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

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

h1 {
  font-size: 3rem;
}

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

@supports not (animation-range-start: normal) {
  body::before {
    content: "Your browser does not support the 'animation-range-start' property.";
    color: black;
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

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

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

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

См. также

• animation-timeline
• animation-range
• animation-range-end
• view-timeline-inset
• Element.animate() свойство rangeStart
• Временные шкалы анимаций, управляемых прокруткой
• Понимание имён диапазонов временной шкалы
• Модуль прокручиваемых анимаций CSS
• Временная шкала прогресса просмотра: диапазоны и визуализатор прогресса анимации