view-timeline
=============

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`view-timeline`** は CSS の一括指定プロパティで、スクロール可能な要素（*スクローラー*）内の要素（主体要素として呼ばれる）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインを定義するために使用します。 `view-timeline` は主体要素に設定します。

既定では、主体要素がスクローラーの一方の端に初めて表示されるとタイムラインは 0% になり、反対側の端に達すると 100% になります。

`view-timeline` は 2 つの構成値、名前付き進行タイムラインの名前とオプションのスクロール軸の値持つことができます。
 この名前は `animation-timeline` 宣言で参照され、タイムラインの進行に合わせてアニメーションする要素を示します。これは主体要素である場合もありますが、そうである必要はありません。主体がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。

**メモ:** 要素が軸方向の寸法でそのコンテナーをはみ出さない場合、またははみ出した部分が隠されているかクリップされている場合、タイムラインは作成されません。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `view-timeline-name`
* `view-timeline-axis`
構文
--


```css
/\* 2 つの値: view-timeline-name と view-timeline-axis がそれぞれ 1 つずつ \*/
view-timeline: --custom_name_for_timeline block;
view-timeline: --custom_name_for_timeline inline;
view-timeline: --custom_name_for_timeline y;
view-timeline: --custom_name_for_timeline x;
view-timeline: none block;
view-timeline: none inline;
view-timeline: none y;
view-timeline: none x;

/\* 1 つの値: view-timeline-name \*/
view-timeline: none;
view-timeline: --custom_name_for_timeline;
```


`view-timeline` の一括指定プロパティは `<view-timeline-name>` と `<view-timeline-axis>` の値の組み合わせとしてコンテナー要素に適用することができます。少なくともどちらか一方の値を指定しなければなりません。両方の値を指定する場合は、 `<view-timeline-name>` 値の後に `<view-timeline-axis>` 値が続く順序でなければなりません。

**メモ:** `<view-timeline-name>` は `<dashed-ident>` の値で、 `--` から始める必要があり、これによって CSS の標準キーワードとの名前の衝突を避けることができます。

### 値

`<view-timeline-name>`

`view-timeline-name` を参照してください。

`<view-timeline-axis>`

`view-timeline-axis` を参照してください。既定値は `block` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `view-timeline-name`: `none`
* `view-timeline-axis`: `block`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `view-timeline-name`: `none` または識別子の順序付きリスト
* `view-timeline-axis`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `view-timeline-name`: アニメーション不可
* `view-timeline-axis`: アニメーション不可
 |

形式文法
----
```

view-timeline =   
  [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#    
  
```

例
-

### 名前付きビュー進行タイムラインの作成

`--subjectReveal` という名前のビュー進行タイムラインは、 `view-timeline` プロパティを使用して、`class` が `animation` の主体要素に定義します。
 これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal` を使用します。その結果、主体要素は文書がスクロールされるにつれて上方向に移動するアニメーションが表示されます。

#### HTML

この例の HTML は以下の通りです。


```html
<div class="content">
  <h1>Content</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` 要素には最小限のスタイルを設定し、テキストコンテンツには基本的なフォントを設定します。


```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```


`subject` クラスのついた `<div>` には、`animation` クラスも指定されています。ここで `view-timeline-name` を設定し、名前付きビュー進行タイムラインを定義しています。また、同じ値で `animation-timeline` の名前を指定して、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。

最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。


```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  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 |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `animation-timeline`
* `timeline-scope` (en-US)
* `view-timeline-axis`, `view-timeline-name`
* CSS スクロール駆動アニメーション (en-US)