view-timeline-inset

Допустимые значения для view-timeline-inset:

auto

Если установлено, используется соответствующее значение scroll-padding (или эквивалентное длинное значение) для этого края области прокрутки. Если это не установлено (или установлено в значение auto), значение обычно будет 0, хотя некоторые пользовательские агенты могут использовать эвристику для определения другого значения по умолчанию, если это уместно.

<length-percentage>

Принимается любое допустимое значение <length-percentage> в качестве значения вставки/выемки.

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

Если предоставлено два значения, первое значение представляет начальную вставку/выемку по соответствующей оси (где начинается анимация), а второе значение представляет конечную вставку/выемку (где заканчивается анимация). Если предоставлено только одно значение, начальная и конечная вставка/выемка устанавливаются в одно и то же значение.

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

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

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

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

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

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

.animation {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  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);
  }
}

Результат

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

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