timeline-scope

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

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

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

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

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

Установка timeline-scope имени временной шкалы, определённой на дочернем элементе, расширяет область действия временной шкалы до элемента, на котором timeline-scope установлено, и всех его дочерних элементов. Другими словами, этот элемент и все его дочерние элементы теперь могут управляться этой временной шкалой.

Примечание: Если временная шкала (или несколько временных шкал) с заданным именем для значения timeline-scope не существует, создаётся неактивная временная шкала с указанным именем.

Синтаксис

timeline-scope: none;
timeline-scope: custom_name_for_timeline;

Значения

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

none: Область действия временной шкалы не изменяется.
<dashed-ident>: Указывает имя существующей именованной временной шкалы (то есть объявленной с помощью scroll-timeline-name или view-timeline-name), определённой на дочернем элементе. Это расширяет область действия временной шкалы до элемента, на котором timeline-scope установлено, и всех его дочерних элементов.

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

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

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

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

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

Примеры

В этом примере, временная шкала прокрутки под названием --myScroller определена с помощью свойства scroll-timeline-name на элементе с классом scroller (элемент прокрутки). Затем это применяется к анимации на элементе с классами box и animation (анимированный элемент) с помощью animation-timeline: --myScroller. Важный момент: анимированный элемент не является потомком элемента прокрутки. Для работы мы расширяем область действия временной шкалы --myScroller устанавливая timeline-scope: --myScroller на элементе <body>.

HTML

HTML-код примера показан ниже.

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

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

CSS

CSS-код приведён ниже.

Прежде всего, устанавливаем высоту <body> в 100vh, и выравниваем два дочерних элемента как две равные колонки с помощью flexbox. Также устанавливаем timeline-scope: --myScroller, чтобы временная шкала --myScroller могла быть задана как управляющая временная шкала для анимации на элементе <body> и всех элементов внутри него.

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

  /* increases the timeline scope from the .scroller <div> element
  to the whole <body> */
  timeline-scope: --myScroller;
}

.content,
.scroller {
  flex: 1;
}

Далее, устанавливаем на элементе прокрутки временную шкалу --myScroller для того, чтобы он прокручивался, и задаём ему цвет фона, чтобы его границы были видны. Дочернему элементу элемента прокрутки задаётся большая высота, чтобы он реально прокручивался.

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

.long-element {
  height: 2000px;
}

Далее, мы настраиваем анимированный элемент, применяя к нему анимацию. Также применяем к нему временную шкалу --myScroller с помощью animation-timeline: --myScroller. Повторим, это возможно только потому, что ранее мы установили timeline-scope: --myScroller на элементе <body> — анимированный элемент не является потомком элемента прокрутки.

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 20px;
  left: 0%;
}

.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
}

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

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

Результат

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

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`timeline-scope`	116	116	Нет	102	Нет	116	Нет	78	Нет	24.0	116
`all`	116	116	Нет	102	Нет	116	Нет	78	Нет	24.0	116
`none`	116	116	Нет	102	Нет	116	Нет	78	Нет	24.0	116

См. также

© 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/timeline-scope