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

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

**`view-timeline-inset`** は CSS のプロパティで、ビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされるスクロールポート（詳細はスクロールコンテナーを参照）の位置の調整を表す 1 つまたは 2 つの値を指定するために使用します。別の言い方をすると、これはタイムラインの位置をオフセットする開始値や終了値のインセット（またはアウトセット）を指定することができます。

 これは `animation-range` とその個別指定プロパティと組み合わせたり、その代わりに使用したりすることができ、タイムラインに沿ってアニメーションの適用範囲を設定することができます。
 詳細は CSS スクロール駆動アニメーション (en-US)を参照してください。

構文
--


```css
/\* Single value \*/
view-timeline-inset: auto;
view-timeline-inset: 200px;
view-timeline-inset: 20%;

/\* Two values \*/
view-timeline-inset: 20% auto;
view-timeline-inset: auto 200px;
view-timeline-inset: 20% 200px;
```

### 値

`view-timeline-inset` に指定できる値は以下の通りです。

`auto`

設定されている場合、スクロールポートの端に対応する `scroll-padding` （または同等の個別指定値）が使用されます。これが設定されていない場合（または `auto` に設定されている場合）、通常は 0 が使用されますが、ユーザーエージェントによっては調査結果を使用して異なる既定値を使用する場合もあります。

`<length-percentage>`

有効な `<length-percentage>` 値であれば、インセット/アウトセットの値として受け入れられます。

* 値が正の値の場合、アニメーションの開始/終了位置は、指定した長さまたはパーセント分だけスクロールポートの内側に移動されます。
* 値が負の場合、アニメーションの開始/終了位置は、指定した長さまたはパーセントだけスクロールポートの外に移動します。つまり、スクロールポートに現れる前にアニメーションを開始したり、スクロールポートを出た後にアニメーションを終了したりします。

2 つの値が指定された場合、最初の値は関連する軸の開始インセット/アウトセット（アニメーションが始まる場所）を表し、 2 つ目の値は終了インセット/アウトセット（アニメーションが終わる場所）を表します。値が 1 つだけ指定された場合、開始と終了のインセット/アウトセットは両方とも同じ値に設定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 関連するスクロールポートの対応する寸法との相対値 |
| 計算値 | リストで、それぞれの項目は 'auto' または長さのパーセント値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

view-timeline-inset =   
  [ [ auto | <length-percentage> ]{1,2} ]#    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### インセットを含む名前付きビュー進行タイムラインの作成

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

`view-timeline-inset` 宣言も設定することで、アニメーションを予想より遅く始め、早く終わらせることができます。

#### 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` を設定し、名前付きビュー進行タイムラインを定義しています。また、アニメーションが予想よりも遅く始まり、早く完了するように `view-timeline-inset` 宣言も指定します。また、同じ値で `animation-timeline` の名前を指定して、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。

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


```css
.animation {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  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-inset |

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

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

関連情報
----

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