CSS-свойство `view-timeline-axis`

CSS-свойство view-timeline-axis задаёт направление прокрутки для именованной временной шкалы прогресса просмотра.

Синтаксис

/* Logical property values */
view-timeline-axis: block;
view-timeline-axis: inline;

/* Physical property values */
view-timeline-axis: y;
view-timeline-axis: x;

/* Global values */
view-timeline-axis: inherit;
view-timeline-axis: initial;
view-timeline-axis: revert;
view-timeline-axis: revert-layer;
view-timeline-axis: unset;

Значения

<axis>

Задаёт направление прокрутки, используемое временной шкалой прогресса просмотра. Значением может быть одно из ключевых слов <axis>: block, inline, x или y. Значение по умолчанию — block.

Описание

Свойство view-timeline-axis задаёт направление, или <axis>, именованных временных шкал прогресса просмотра, основанных на блоке элемента.

По умолчанию CSS-анимации @keyframes выполняются по временной шкале, основанной на времени. Если вместо неё задать прогресс анимации с помощью временной шкалы прогресса просмотра, свойство view-timeline-axis определяет направление, управляющее ходом временной шкалы.

Для временных шкал прогресса просмотра ход анимации по временной шкале определяется видимостью элемента, или объекта. Свойство view-timeline-axis задаётся для объекта.

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

Свойство view-timeline-axis вместе со свойствами view-timeline-inset и view-timeline-name является компонентом сокращённого свойства view-timeline.

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

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

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

Примеры

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

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

Чтобы продемонстрировать эффект свойства 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 как источник временной шкалы прогресса просмотра с именем --subject-reveal с помощью свойства view-timeline-name. Ось прокрутки задаётся свойством view-timeline-axis: x;. Мы также добавляем view-timeline-axis: horizontal; для браузеров, поддерживающих нестандартные устаревшие значения horizontal и vertical вместо x и y.

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

.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: "Helvetica", "Arial", sans-serif;
}

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

.animation {
  view-timeline-name: --subject-reveal;
  view-timeline-axis: x;
  view-timeline-axis: horizontal;

  animation: appear 1ms linear both;
  animation-timeline: --subject-reveal;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@layer no-support {
  body::before {
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
  @supports not (view-timeline-axis: inherit) {
    body::before {
      content: "Your browser doesn't support the `view-timeline-axis` property.";
      background-color: wheat;
    }
  }
  @supports (view-timeline-axis: horizontal) {
    body::before {
      content: "Your browser supports legacy values for the `view-timeline-axis` property.";
      background-color: yellow;
    }
  }
}

Результат

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

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

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

См. также

• animation-timeline
• view-timeline, view-timeline-inset, view-timeline-name
• view()
• Руководство: временные шкалы анимации, управляемой прокруткой
• Модуль CSS-анимации, управляемые прокруткой
• Модуль CSS-анимации