CSS-свойство `timeline-scope`

Свойство timeline-scope CSS изменяет область действия именованной временной шкалы анимации.

Синтаксис

/* Keyword values */
timeline-scope: all;
timeline-scope: none;

/* Custom name values */
timeline-scope: --custom_name_for_timeline;
timeline-scope: --timeline_name_one, --timeline_name_two;

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

Значения

Это свойство задаётся ключевым словом или списком пользовательских имён временных шкал, разделённых запятыми:

none

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

all

Имена всех временных шкал, определённых потомками, входят в область действия этого элемента и его потомков.

<dashed-ident>

Задаёт имя существующей именованной временной шкалы (то есть объявленной с помощью scroll-timeline-name или view-timeline-name), определённой на элементе-потомке. Это расширяет область действия временной шкалы на текущий элемент и всех его потомков.

Описание

Свойство timeline-scope изменяет область действия именованной временной шкалы анимации. По умолчанию именованную временную шкалу (то есть объявленную с помощью scroll-timeline-name или view-timeline-name) можно задать в качестве управляющей временной шкалы только для непосредственного потомка (то есть установив для него animation-timeline со значением, равным имени временной шкалы). Это область действия временной шкалы по умолчанию.

Значение timeline-scope — это имя временной шкалы, определённой на элементе-потомке; оно изменяет область действия временной шкалы, включая в неё целевой элемент и его потомков. Иными словами, элемент, для которого задано свойство timeline-scope, и все его элементы-потомки могут управляться с помощью этой временной шкалы.

Если временная шкала с именем, заданным в значении timeline-scope, отсутствует или таких временных шкал несколько, создаётся неактивная временная шкала с указанным именем. Свойство timeline-scope работает только с именованными временными шкалами, поэтому его нельзя использовать вместе с анонимными временными шкалами, созданными с помощью функций временной шкалы анимации view() или scroll().

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

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

timeline-scope = 
  none |
  <dashed-ident>#

Примеры

В этом примере мы анимировали элемент в ответ на прокрутку другого элемента, расширив область действия временной шкалы с помощью свойства timeline-scope.

HTML

HTML включает элемент для анимации и элемент для прокрутки:

<div class="content">
  <div class="box animation"></div>
</div>

<div class="scroller">
  <div class="long-element"></div>
</div>

CSS

Именованная временная шкала прокрутки --my-scroller задаётся с помощью свойства scroll-timeline-name для прокручиваемого элемента. Это имя временной шкалы прокрутки используется ещё в двух местах: оно задаётся как animation-timeline для элемента, который нужно анимировать, и как timeline-scope для предка прокручиваемого и анимируемого элементов, расширяя область действия.

Мы задаём высоту <body> равной 100vh и размещаем два его дочерних элемента в двух равных столбцах с помощью flexbox. Чтобы расширить область действия временной шкалы с элемента <div class="scroller"> на весь <body>, мы задаём для него timeline-scope: --my-scroller. Благодаря этому временную шкалу --my-scroller можно задать в качестве управляющей временной шкалы для анимации, назначенной <body> или любому вложенному в него элементу.

body {
  margin: 0;
  height: 100vh;
  display: flex;

  timeline-scope: --my-scroller;
}

.content,
.scroller {
  flex: 1;
}

Мы задаём --my-scroller в качестве scroll-timeline-name для прокручиваемого элемента, который должен предоставлять временную шкалу прогресса прокрутки для анимируемого элемента. Мы добавляем overflow, чтобы включить прокрутку, и задаём цвет фона, чтобы обозначить его границы. Мы задаём большое значение height для содержимого прокручиваемого элемента, чтобы он действительно прокручивался.

.scroller {
  overflow: scroll;
  scroll-timeline-name: --my-scroller;
  background: deeppink;
}

.long-element {
  height: 2000px;
}

Затем мы задаём анимируемому элементу простые стили и применяем к нему анимацию с помощью сокращённого свойства animation. Мы задаём именованную временную шкалу прокрутки --my-scroller в качестве animation-timeline. Напомним: анимировать элемент в зависимости от прогресса прокрутки его элемента-родственника возможно только потому, что мы задали timeline-scope для общего предка; анимируемый элемент не является потомком прокручиваемого элемента.

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
}

.animation {
  animation: rotate-appear 1ms linear;
  animation-timeline: --my-scroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    translate: 0;
  }

  to {
    rotate: 720deg;
    translate: 100%;
  }
}

@layer supports {
  @supports not (timeline-scope: none) {
    body::before {
      content: "Your browser does not support the 'timeline-scope' property.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem;
    }
  }
}

Результат

Прокрутите вертикальную полосу в розовой области, чтобы увидеть анимацию квадрата.

Важно отметить, что анимируемый элемент не является потомком прокручиваемого элемента. Чтобы это работало, мы расширяем область действия временной шкалы --my-scroller, задавая timeline-scope: --my-scroller для элемента <body>.

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

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

См. также

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