animation-range

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

• animation-range-start
• animation-range-end

/* single keyword or length percentage value */
animation-range: normal; /* Equivalent to normal normal */
animation-range: 20%; /* Equivalent to 20% normal */
animation-range: 100px; /* Equivalent to 100px normal */

/* single named timeline range value */
animation-range: cover; /* Equivalent to cover 0% cover 100% */
animation-range: contain; /* Equivalent to contain 0% contain 100% */
animation-range: cover 20%; /* Equivalent to cover 20% cover 100% */
animation-range: contain 100px; /* Equivalent to contain 100px cover 100% */

/* two values for range start and end */
animation-range: normal 25%;
animation-range: 25% normal;
animation-range: 25% 50%;
animation-range: entry exit; /* Equivalent to entry 0% exit 100% */
animation-range: cover cover 200px; /* Equivalent to cover 0% cover 200px */
animation-range: entry 10% exit; /* Equivalent to entry 10% exit 100% */
animation-range: 10% exit 90%;
animation-range: entry 10% 90%;

Сокращенное свойство animation-range может применяться к контейнерному элементу в сочетании с значениями <animation-range-start> и <animation-range-end>. Если оба значения указаны, они будут интерпретироваться в порядке <animation-range-start> и затем <animation-range-end>.

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

• Если значение является <length-percentage> или normal, <animation-range-start> примет это значение, а <animation-range-end> будет равно normal.
• Если значение представляет собой имя временного диапазона без <length-percentage> после него, диапазон будет находиться между этим именем временного диапазона на 0% и 100%.
• Если значение представляет собой имя временного диапазона с <length-percentage> после него, диапазон начнется с этого имени временного диапазона и процента, а закончится с этого имени временного диапазона и 100%.

Одно или два значения, представляющие animation-range-start и/или animation-range-end. Эти значения могут быть следующими:

normal

Представляет начало временной шкалы в случае animation-range-start и конец временной шкалы в случае animation-range-end. Это значение по умолчанию.

<length-percentage>

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

<timeline-range-name>

Конкретный именованный диапазон временной шкалы внутри общей временной шкалы. Возможные значения:

cover

Представляет весь диапазон именованной временной шкалы прогресса просмотра (подробнее см. CSS-анимации, управляемые прокруткой), от момента, когда элемент-субъект впервые начинает входить в область видимости прогресса просмотра области прокрутки (0% прогресса) до момента, когда он полностью покидает её (100% прогресса).

contain

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

• Если элемент-субъект меньше области прокрутки, он находится в диапазоне от момента, когда элемент-субъект полностью содержится в области прокрутки (0% прогресса) до момента, когда он больше не полностью содержится в области прокрутки (100% прогресса).
• Если элемент-субъект больше области прокрутки, он находится в диапазоне от момента, когда элемент-субъект впервые полностью покрывает область прокрутки (0% прогресса) до момента, когда он больше не полностью покрывает область прокрутки (100% прогресса).

entry

Представляет диапазон именованной временной шкалы прогресса просмотра от момента, когда элемент-субъект впервые начинает входить в область прокрутки (0% прогресса) до момента, когда он полностью входит в область прокрутки (100%).

exit

Представляет диапазон именованной временной шкалы прогресса просмотра от момента, когда элемент-субъект впервые начинает выходить из области прокрутки (0% прогресса) до момента, когда он полностью покидает область прокрутки (100%).

entry-crossing

Представляет диапазон именованной временной шкалы прогресса просмотра от момента, когда элемент-субъект впервые начинает пересекать начальную границу области прокрутки (0% прогресса) до момента, когда он полностью пересекает начальную границу области прокрутки (100%).

exit-crossing

Представляет диапазон именованной временной шкалы прогресса просмотра от момента, когда элемент-субъект впервые начинает пересекать конечную границу области прокрутки (0% прогресса) до момента, когда он полностью пересекает конечную границу области прокрутки (100%).

В случае значений <timeline-range-name>, не включающих <length-percentage>, процент по умолчанию равен 0% если это значение animation-range-start, и 100% если это значение animation-range-end.

Примечание: Достаточно сложно визуализировать, что эти значения означают по описаниям выше. К счастью, Визуализатор диапазонов временной шкалы просмотра показывает, что они означают в удобном для восприятия визуальном формате.

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

Комбинированное значение, равное указанному проценту или расстоянию по указанному именованному диапазону временной шкалы, измеренному от начала этого диапазона временной шкалы.

animation-range = 
  [ <'animation-range-start'> <'animation-range-end'>? ]#  

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

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

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

Посмотрите Визуализатор диапазонов временной шкалы просмотра для наглядного объяснения значений всех типов.

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

Также устанавливается объявление animation-range, чтобы анимация начиналась позже, чем ожидалось, и завершалась раньше.

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 для определения временной шкалы прогресса именованного представления. Ему также присваивается имя animation-timeline с тем же значением, чтобы объявить, что этот элемент будет анимирован при прокрутке временной шкалы прогресса. Мы также добавляем объявление animation-range, чтобы анимация начиналась позже, чем ожидалось, и завершалась раньше.

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

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

  animation-name: appear;
  animation-range: entry 10% contain 25%;
  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-timeline
• animation-range-end, animation-range-start
• scroll-timeline, scroll-timeline-axis, scroll-timeline-name
• timeline-scope
• view-timeline-inset
• Анимации, управляемые прокруткой CSS