view-timeline

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех широко используемых браузерах.

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

Свойство view-timeline CSS сокращенное свойство используется для определения временной шкалы прогресса отображения по имени, которая продвигается на основе изменения видимости элемента (известного как объект) внутри прокручиваемого элемента (прокрутка). view-timeline задается для объекта.

Отслеживается видимость объекта внутри прокрутки — по умолчанию, временная шкала составляет 0%, когда объект впервые становится видимым на одном краю прокрутки, и 100%, когда он достигает противоположного края.

view-timeline может содержать два составных значения — имя для временной шкалы прогресса отображения по имени и необязательное значение оси прокрутки. Затем имя используется в объявлении animation-timeline для указания элемента, который будет анимирован по мере продвижения временной шкалы. Это может быть элемент-объект, но это необязательно — вы можете анимировать другой элемент, когда объект перемещается по области прокрутки.

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

Составные свойства

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

Синтаксис

/* two values: one each for view-timeline-name and view-timeline-axis */
view-timeline: --custom_name_for_timeline block;
view-timeline: --custom_name_for_timeline inline;
view-timeline: --custom_name_for_timeline y;
view-timeline: --custom_name_for_timeline x;
view-timeline: none block;
view-timeline: none inline;
view-timeline: none y;
view-timeline: none x;

/* one value: view-timeline-name */
view-timeline: none;
view-timeline: --custom_name_for_timeline;

Сокращенное свойство view-timeline может быть применено к элементу-контейнеру в виде комбинации значений <view-timeline-name> и <view-timeline-axis>. Должно быть указано по крайней мере одно значение. Если оба значения указаны, порядок должен быть <view-timeline-name>, за которым следует <view-timeline-axis>.

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

Значения

<view-timeline-name>: См. view-timeline-name.
<view-timeline-axis>: См. view-timeline-axis. Значение по умолчанию — block.

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

Начальное значение	как каждое из свойств сокращения: `view-timeline-name`: `none` `view-timeline-axis`: `block`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращения: `view-timeline-name`: `none` или упорядоченный список идентификаторов `view-timeline-axis`: как указано
Тип анимации	как каждое из свойств сокращения: `view-timeline-name`: Не анимируемо `view-timeline-axis`: Не анимируемо

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

view-timeline = 
  [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#  

<view-timeline-name> = 
  [ none | <dashed-ident> ]#  

<view-timeline-axis> = 
  [ block | inline | x | y ]#  

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

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

Примеры

Создание временной шкалы прогресса отображения по имени

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

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

.animation {
  view-timeline: --subjectReveal block;
  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);
  }
}

Результат

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

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

Спецификация
Анимации, управляемые прокруткой # view-timeline-shorthand

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`view-timeline`	115	115	114 Теперь поддерживает значения `x` и `y`, а также устаревшие значения `horizontal` и `vertical`.	101	Нет	115	Нет	77	Нет	23.0	115

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline