CSS view-timeline プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
view-timeline は CSS の一括指定プロパティで、名前付きビュー進行タイムラインの名前、方向、インセット値を定義します。
構成要素のプロパティ
このプロパティは、次の CSS プロパティの一括指定です。
構文
/* 単一の成分 */
view-timeline: none;
view-timeline: --custom_name_for_timeline;
/* 2 つの成分 */
view-timeline: --custom_name_for_timeline block;
view-timeline: --custom_name_for_timeline y;
view-timeline: none inline;
view-timeline: none x;
/* 3 つの成分 */
view-timeline: --custom_name_for_timeline block auto;
view-timeline: --custom_name_for_timeline block 20% 200px;
/* グローバル値 */
view-timeline: inherit;
view-timeline: initial;
view-timeline: revert;
view-timeline: revert-layer;
view-timeline: unset;
値
<view-timeline-name>-
view-timeline-nameを参照してください。デフォルト値はnoneです。 <view-timeline-inset>-
view-timeline-insetを参照してください。デフォルト値はautoです。 <view-timeline-axis>-
view-timeline-axisを参照してください。デフォルト値はblockです。
解説
view-timeline 一括指定プロパティは、スクロール可能な要素（スクローラー）内の要素（主体要素として呼ばれる）の可視性の変化に基づいて進行する、名前付きビュー進行タイムラインを定義します。 view-timeline は主体要素に設定します。要素がこの軸の方向の寸法でそのコンテナーをはみ出さない場合、または、はみ出した部分が隠されていたりクリップされていたりする場合、タイムラインは作成されません。
スクロール領域内での主体要素の可視状態が追跡されます。デフォルトでは、主体要素がスクロール領域の一方の端で初めて表示された時点でタイムラインは 0% となり、反対側の端に到達した時点で 100% となります。
view-timeline には 3 つの構成値があります。名前付きビュー進行タイムラインの名前、スクロール軸の値、2 つ以下のタイムラインのインセット値です。
値が 1 つだけ宣言された場合、この値は view-timeline-name とみなされます。この名前は animation-timeline 宣言で参照され、タイムラインの進行に合わせてアニメーションする要素を示します。これは主体要素である場合もありますが、そうであるとは限りません。主体要素がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。
view-timeline 一括指定プロパティは <view-timeline-name>、<view-timeline-inset>、<view-timeline-axis> の値の組み合わせとしてコンテナー要素に適用することができます。少なくとも 1 つの値を指定しなければなりません。すべての値を指定した場合は、 <view-timeline-name> 値の後に <view-timeline-axis> 値や <view-timeline-inset> 値が続く順序でなければなりません。
<view-timeline-name> で指定される名前は、カンマ区切りの <dashed-ident> 値（-- から始める必要がある）のリストで、これによって CSS の標準キーワードとの名前の衝突を避けることができます。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
view-timeline =
[ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#
<view-timeline-name> =
[ none | <dashed-ident> ]#
<view-timeline-axis> =
[ block | inline | x | y ]#
<view-timeline-inset> =
[ [ auto | <length-percentage> ]{1,2} ]#
<length-percentage> =
<length> |
<percentage>
例
名前付きビュー進行タイムラインの作成
--subject-reveal という名前のビュー進行タイムラインは、view-timeline プロパティを使用して、class が animation の主体要素に定義します。
これを同じ要素のタイムラインとして設定するには animation-timeline: --subject-reveal を使用します。その結果、主体要素は文書がスクロールされるにつれて上方向に移動するアニメーションが表示されます。
HTML
この例の HTML は以下の通りです。
<div class="content">
<h1>コンテンツ</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. 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. A erat nam at lectus urna
duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
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. Risus quis varius quam quisque id diam
vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
scelerisque. Netus et malesuada fames ac.
</p>
</div>
CSS
subject 要素とそれを含む content 要素には最小限のスタイルを設定し、テキストコンテンツには基本的なフォントを設定します。
.subject {
width: 300px;
height: 200px;
margin: 0 auto;
background-color: deeppink;
}
.content {
width: 75%;
max-width: 800px;
margin: 0 auto;
}
p,
h1 {
font-family: "Helvetica", "Arial", sans-serif;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
line-height: 1.5;
}
subject クラスが指定された <div> には、animation クラスも指定されています。ここで view-timeline を設定し、名前付きビュー進行タイムラインを定義しています。また、同じ値で animation-timeline の名前を指定して、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。
最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。
.animation {
view-timeline: --subject-reveal block;
animation-timeline: --subject-reveal;
animation-name: appear;
animation-fill-mode: both;
animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */
}
@keyframes appear {
from {
opacity: 0;
transform: scaleX(0);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
結果
スクロールすると、主体要素がアニメーションします。
仕様書
| Specification |
|---|
| Scroll-driven Animations # view-timeline-shorthand |