timeline-scope
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
timeline-scope は CSS のプロパティで、名前付きアニメーションタイムラインのスコープを変更します。
構文
/* キーワード値 */
timeline-scope: all;
timeline-scope: none;
/* カスタム名の値 */
timeline-scope: --custom_name_for_timeline;
timeline-scope: --timeline_name_one, --timeline_name_two;
/* グローバル値 */
timeline-scope: inherit;
timeline-scope: initial;
timeline-scope: revert;
timeline-scope: revert-layer;
timeline-scope: unset;
値
timeline-scope に許可されている値は次の通りです。
none-
タイムラインのスコープに変更はありません。これがデフォルトです。
all-
子孫が定義するすべてのタイムラインの名前は、この要素とその子孫の範囲内で有効です。
<dashed-ident>-
子孫要素で定義されている既存の名前付きタイムライン（
scroll-timeline-nameまたはview-timeline-nameを用いて宣言されたもの）の名前を指定します。これにより、タイムラインのスコープはtimeline-scopeが設定された要素とその子孫要素まで拡張されます。
解説
timeline-scopeプロパティは、名前付きアニメーションタイムラインのスコープを変更します。デフォルトでは、名前付きタイムライン（つまり scroll-timeline-name または view-timeline-name を使って宣言されたもの）は、直接の子孫要素の制御タイムラインとしてのみ設定することができます（つまり、タイムライン名を値として animation-timeline を設定することで）。これはタイムラインの既定の「スコープ」です。
timeline-scope の値は、子孫要素に定義されたタイムラインの名前です。これにより、タイムラインの範囲が対象要素とその子孫要素を含むように変更されます。言い換えれば、timeline-scope プロパティが定義された要素とそのすべての子孫要素は、そのタイムラインを使用して制御できます。
timeline-scope の値として指定された名前をつけてタイムラインが存在しない場合（または複数のタイムラインが存在する場合は）、指定された名前の非アクティブなタイムラインが作成されます。timeline-scope プロパティは名前付きタイムラインでのみ動作するため、 view() または scroll() アニメーションタイムライン関数で作成される無名タイムラインとの併用はできません。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | none または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |
形式文法
timeline-scope =
none |
all |
<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 プロパティを使用して定義するものである。このスクロールタイムライン名は他の 2 箇所で使用されます。アニメーション対象要素には animation-timeline として適用され、スクロール要素とアニメーションする要素の両方の祖先要素にはtimeline-scopeとして適用され、スコープを拡大します。
まず、 <body> の高さを 100vh に設定し、その 2 つの子要素をフレックスボックスを使って 2 等分の列としてレイアウトします。タイムラインのスコープを <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 一括指定プロパティを使用してアニメーションを適用します。animation-timeline を名前付きスクロールタイムライン --my-scroller に設定します。繰り返しますが、要素をその親要素のスクロール進行に基づいてアニメーションできるのは、共通の祖先要素に 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%;
}
}
結果
ピンクの部分の縦棒をスクロールさせると、正方形がアニメーションします。
ここで注意すべき重要な点は、アニメーションする要素がスクロール要素の子孫ではないことです。これを機能させるには、--my-scroller タイムラインのスコープを拡大するために、timeline-scope: --my-scroller を <body> に設定します。
仕様書
| Specification |
|---|
| Scroll-driven Animations # propdef-timeline-scope |