CSS-свойство `animation-range-end`

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

Синтаксис

/* Keyword or length percentage value */
animation-range-end: normal;
animation-range-end: 80%;
animation-range-end: 700px;

/* Named timeline range value */
animation-range-end: cover;
animation-range-end: contain;
animation-range-end: cover 80%;
animation-range-end: contain 700px;

/* Multiple values */
animation-range-end:
  cover 80%,
  contain 700px;

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

Значения

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

normal

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

<length-percentage>

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

<timeline-range-name>

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

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

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

Описание

Свойство animation-range-end задаёт конец диапазона привязки анимации. Изменение конца диапазона привязки может сместить конец анимации, то есть точку, в которой оказываются ключевые кадры, привязанные к прогрессу 100%, если число итераций равно 1, а также сократить фактическую продолжительность анимации.

Значением свойства может быть normal, <length-percentage> или <timeline-range-name> с необязательным значением <length-percentage>. Если значение <timeline-range-name> не содержит значение <length-percentage>, процент по умолчанию равен 100%.

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

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

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

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

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

animation-range-end = 
  [ 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-end. Благодаря этому анимация достигает последнего ключевого кадра задолго до того, как элемент дойдёт до конца содержащей его области просмотра.

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>

В середину длинного текстового блока мы добавили элемент, который будем анимировать. Мы добавили много текста, чтобы содержимое выходило за границы контейнера; для краткости дополнительный текст здесь скрыт.

<div class="animatedElement">

<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>
<p>

Мы также добавили флажок, переключающий свойство animation-fill-mode, чтобы вы могли увидеть, как это свойство влияет на анимации с сокращёнными временными шкалами.

<label>
  <input type="checkbox" /> Add <code>animation-fill-mode: forwards;</code>
</label>

  </p>
</div>

CSS

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

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

.animatedElement {
  background-color: deeppink;
  animation: appear 1ms linear;
  animation-timeline: view();
  animation-range-end: exit 25%;
}

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

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

Когда флажок установлен, к анимируемому элементу применяется свойство animation-fill-mode:

:has(:checked) .animatedElement {
  animation-fill-mode: forwards;
}

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

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

:has(:checked) .animatedElement {
  animation-fill-mode: both;
}

.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-end: normal) {
  body::before {
    content: "Your browser does not support the 'animation-range-end' property.";
    color: black;
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

Прокрутите страницу, чтобы увидеть анимацию элемента. Затем переключите флажок в конце текстового блока и прокрутите страницу ещё раз. Обратите внимание, что анимация элемента завершается, когда он проходит 75% области просмотра, а если свойство animation-fill-mode не применяется, в этот момент элемент возвращается к состоянию по умолчанию.

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

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

См. также

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