CSS Reference

animation-timeline

アニメーションで使用されるタイムラインを定義する

animation-timeline プロパティは、アニメーションで使用されるタイムラインを定義します。これによって、アニメーションを、ページやその他、スクロール可能な領域のスクロール量に応じて、アニメーションを動作させることが可能になります。

簡単にいえば、スクロール量に応じて要素がフェードイン表示されたりするといった、所謂パララックスと呼ばれるような視覚的エフェクトをCSSのみで実装することが可能です。

animation-timeline プロパティに指定できる値は下記の通りです。

auto アニメーションのタイムラインは DocumentTimeline となります。つまり、既定のドキュメントタイムラインが使われます。
none アニメーションはタイムラインと関連付けられていません。
<dashed-ident> この要素に対して、スコープ内に名前付きの「Scroll Progress Timeline（スクロール進行タイムライン）」、または「View Progress Timeline（ビュー進行タイムライン）」が存在する場合、そのタイムラインを参照します。それ以外の場合、アニメーションはタイムラインと関連付けられません。
scroll() scroll() 関数で指定されたスクロール進行タイムラインを使用します。
view() view() 関数で指定されたビュー進行タイムラインを使用します。

例えば、下記のキーフレームが定義されていたとします。

@keyframes fadeAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

このアニメーションを、下記のHTMLにおける、#target に、ページのスクロール進行タイムラインとして関連付けます。

<body>
  <div style="height: 100vh">
    <!-- スクロールを発生させるため高さを指定 -->
  </div>
  <div id="target"></div>
  <div style="height: 80vh">
    <!-- スクロールを発生させるため高さを指定 -->
  </div>
</body>

html {
  scroll-timeline-name: --scrollTimeline;
  scroll-timeline-axis: block;
}

#target {
  background-color: red;
  width: 6.25rem;
  height: 6.25rem;
  margin-top: 3.125rem;
  animation-name: fadeAnimation;
  animation-duration: 1ms;
  animation-timeline: --scrollTimeline;
}

これにより、ページをスクロールし始めると、#target の opacity が 0 から徐々に 1 に向かって変化していき、ページ下端までスクロールし終わると、opacity は 1 となります。

scroll() 関数

scroll() 関数を使用して、無名のスクロール進行タイムラインを関連付けることもできます。

scroll() 関数の基本的な構文は下記のような記述になります。

<scroll()> = scroll( [ <scroller> || <axis> ]? )
<axis> = block | inline | x | y
<scroller> = root | nearest | self

<scroller>

<scroller> は、スクロール進行タイムラインを提供するスクロールコンテナを指定します。

指定できる値は下記の通りです。

nearest 最も近い祖先のスクロールコンテナを使うように指定します。（既定値）
root スクロールコンテナとしてルート要素（つまり、html 要素）を使うように指定します。
self 要素自身のプリンシパル・ボックス（Principal Box / 主ボックス）をスクロールコンテナとして使うように指定します。 主ボックスがスクロールコンテナでない場合、スクロール進行タイムラインは非アクティブになります。

<axis>

<axis> は、スクロール進行タイムラインの軸を指定します。簡単に言えば、関連付けられたスクロール進行タイムラインを、縦（垂直）、横（水平）どちらの方向のスクロールに対して動作させたいかを指定するものです。

指定できる値は下記の通りです。

block スクロールコンテナのブロック方向の軸を指定します。書字方向が横書きの場合は縦方向、かつ y と同じになり、縦書きの場合は横方向、かつ x と同じになります。（既定値）
inline スクロールコンテナのインライン方向の軸を指定します。書字方向が横書きの場合は横方向、かつ x と同じになり、縦書きの場合は縦方向、かつ y と同じになります。
y スクロールコンテナの垂直方向の軸を指定します。
x スクロールコンテナの水平方向の軸を指定します。

例えば、下記のキーフレームが定義されていたとします。

@keyframes fadeAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

このアニメーションを、下記のHTMLにおける、#target に、ページ（ルート要素）のスクロール進行タイムラインとして関連付けます。

<body>
  <div style="height: 100vh">
    <!-- スクロールを発生させるため高さを指定 -->
  </div>
  <div id="target"></div>
  <div style="height: 80vh">
    <!-- スクロールを発生させるため高さを指定 -->
  </div>
</body>

#target {
  background-color: red;
  width: 6.25rem;
  height: 6.25rem;
  margin-top: 3.125rem;
  animation-name: fadeAnimation;
  animation-duration: 1ms;
  animation-timeline: scroll(block root);
}

これにより、ページをスクロールし始めると、#target の opacity が 0 から徐々に 1 に向かって変化していき、ページ下端までスクロールし終わると、opacity は 1 となります。

上記の例の場合、#target の最も近い祖先に該当するスクロールコンテナは、body 要素になりますが、

animation-timeline: scroll(block nearest);

と指定しても、結果は同じになります。

view() 関数

view() 関数を使用して、無名のビュー進行タイムラインを関連付けることもできます。

view() 関数の基本的な構文は下記のような記述になります。

<view()> = view( [ <axis> || <'view-timeline-inset'> ]? )

<axis>

<axis> は、ビュー進行タイムラインの軸を指定します。簡単に言えば、関連付けられたビュー進行タイムラインを、縦（垂直）、横（水平）どちらの方向のスクロールに対して動作させたいかを指定するものです。

指定できる値は下記の通りです。

block スクロールコンテナのブロック方向の軸を指定します。書字方向が横書きの場合は縦方向、かつ y と同じになり、縦書きの場合は横方向、かつ x と同じになります。（既定値）
inline スクロールコンテナのインライン方向の軸を指定します。書字方向が横書きの場合は横方向、かつ x と同じになり、縦書きの場合は縦方向、かつ y と同じになります。
y スクロールコンテナの垂直方向の軸を指定します。
x スクロールコンテナの水平方向の軸を指定します。

<'view-timeline-inset'>

<'view-timeline-inset'> に指定可能な値は下記のように定義されています。

[ [ auto | <length-percentage> ]{1,2} ]#

つまり、auto、もしくは、<length-percentage> 値を最大2つまで、空白で区切って指定可能です。

この指定は、要素がビュー内にあるかどうかを判断する際の、スクロールポート（スクロールコンテナの見えている部分）のインセット（正）またはアウトセット（負）の調整を行います。

2つの値を指定した場合、最初の値は、関連する軸の開始（縦スクロールの場合はスクロールポートの上端）インセットを表し、2番目の値は終了（縦スクロールの場合はスクロールポートの下端）インセットを表します。1つのみ値が指定された場合、2番目の値が省略されたと解釈され、1番目の値が設定されます。

例えば下記のように指定した場合、スクロールポートの下端から 10% 内側のラインと、要素の上端が重なった時点でアニメーションがスタートし、スクロールポートの上端から 50% 内側のラインと、要素の下端が重なった時点でアニメーションが完了することになります。

animation-timeline: view(block 40% 10%);

animation-timelineの仕様

初期値
  • auto
対象となる要素
  • すべての要素
継承
  • なし

詳細説明

Scroll Progress Timeline（スクロール進行タイムライン）

スクロール進行タイムライン（Scroll Progress Timeline）とは、ユーザーがスクロールコンテナ （スクロールさせることができる領域） 、例えばページをスクロールした量や位置に応じて、アニメーションを制御する仕組みのことです。この仕組みを使用することにより、ページをスクロールしたときに特定のアニメーションが動作したり、ある要素内のスクロールに合わせてアニメーションが進行するような効果を作成できます。

スクロールコンテナの開始位置が 0%、終了位置が 100% という形で、スクロール進行のパーセント値に変換されます。

View Progress Timeline（ビュー進行タイムライン）

ビュー進行タイムライン（View Progress Timeline）は、特定の要素がユーザーのビューポート（表示領域）内に入ったとき、その要素がどのように表示されているかの割合（進行度）に基づいてアニメーションを制御する仕組みです。簡単に言うと、要素が画面に表示され始めてから完全に表示されるまでの進行状況に応じて、アニメーションを操作するためのタイムラインです。

例えば、ページを上から下にスクロールしていったとき、ある要素の上端がビューポートの下端と重なった時点が 0%、そのまま要素全体がビューポートに表示され、要素の下端がビューポートの上端と重なった（要するにビューポート外に出た瞬間）が 100% という形で、スクロール進行のパーセント値に変換されます。

ただし、ビューポートのサイズと要素のサイズによっては、100% までスクロールできない場合もあります。

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome