view-timeline-axis

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

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

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

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

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

Свойства view-timeline-axis и view-timeline-name также можно задать с помощью сокращённого свойства view-timeline.

Синтаксис

/* Logical property values */
view-timeline-axis: block;
view-timeline-axis: inline;
/* Non-logical property values */
view-timeline-axis: y;
view-timeline-axis: x;

Значения

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

block: Полоса прокрутки на оси блока элемента-прокручивателя, которая перпендикулярна направлению текста в строке. Для горизонтальных режимов написания, таких как стандартный английский, это то же, что и y, а для вертикальных режимов написания — то же, что и x. Это значение по умолчанию.
inline: Полоса прокрутки на оси inline элемента-прокручивателя, которая параллельна направлению текста в строке. Для горизонтальных режимов написания это то же, что и x, а для вертикальных — то же, что и y.
y: Полоса прокрутки по вертикальной оси элемента-прокручивателя.
x: Полоса прокрутки по горизонтальной оси элемента-прокручивателя.

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

Начальное значение	`block`
Применимо к	все элементы
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не подлежит анимации

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

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

Примеры

Определение оси временной шкалы прогресса просмотра

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

Для демонстрации эффекта view-timeline-axis, в данном примере используется горизонтальная (не по умолчанию) полоса прокрутки для управления анимацией.

HTML

Ниже показан HTML для примера.

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>

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

  <p>
    A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat
    nisl vel pretium lectus.
  </p>

  <p>
    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.
  </p>
</div>

CSS

В CSS мы задаём элемент subject как источник временной шкалы прогресса просмотра с именем --subjectReveal с помощью свойства view-timeline-name. Ось прокрутки устанавливается с помощью view-timeline-axis: x; (Chromium) и view-timeline-axis: horizontal; (Firefox) — это приводит к тому, что положение горизонтальной полосы прокрутки родительского элемента прокрутки определяет временную шкалу анимации.

Родительский элемент content делается переполненным по горизонтали путём вывода его содержимого с помощью display: flex; и flex-flow: column wrap;.

Также обратите внимание, что к элементу-субъекту применено animation-duration , чтобы пример работал в Firefox.

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

.content {
  width: 50%;
  height: 400px;
  margin-top: 30px;
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

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

p {
  font-size: 1.3rem;
  line-height: 1.4;
}

.animation {
  view-timeline-name: --subjectReveal;
  /* Chromium supports the new x/y syntax */
  view-timeline-axis: x;
  /* Firefox still supports the old horizontal/vertical syntax */
  view-timeline-axis: horizontal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-timeline: --subjectReveal;
  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-axis

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

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