CSS Reference

@scroll-timeline

スクロール量に応じたアニメーションタイムラインを定義する

@scroll-timeline 規則はスクロールコンテナ （スクロールさせることができる領域） 内における、スクロールのオフセットに関連付けられたアニメーションタイムラインを定義します。

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

基本的な記述例

@scroll-timeline timeline-name {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

定義したアニメーションタイムラインは、下記のように animation-timeline プロパティを用いてアニメーションと関連付けることができます。

#rotate-animation-elm {
  background-color: red;
  width: 100px;
  height: 100px;
  animation-name: rotate-animation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: timeline-name;
}

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

詳細説明

<custom-ident>

定義したアニメーションタイムラインを識別する名前 （識別子） です。この名前は animation-timeline プロパティで要素に関連付けるアニメーションタイムラインを指定する際に使用されます。

source プロパティ

そのスクロール量によってアニメーションを実行する、スクロール可能な要素 （スクロールコンテナ） を指定します。下記の値が使用できます。

値 意味
auto Window オブジェクト、つまり html 要素が指定されます （初期値）
selector() 関数 source: selector(#target-elm); のように、スクロールコンテナとなる要素の id 属性値を指定することができます。任意の要素を指定したい場合に使用しますが、id セレクタのみ使用可能なことに注意してください
none スクロールコンテナを指定しません

orientation プロパティ

スクロールによってアニメーションを実行する、スクロールの方向を指定します。下記の値が使用できます。

値 意味
auto この値が指定された場合は CSS の書字方向に準じたブロック方向、つまり、横書きでは垂直方向、縦書きでは水平方向が指定されたものとして扱われます （初期値）
block CSS の書字方向に準じたブロック方向、つまり、横書きでは垂直方向、縦書きでは水平方向を指定します
inline CSS の書字方向に準じたインライン方向、つまり、横書きでは水平方向、縦書きでは垂直方向を指定します
horizontal CSS の書字方向に関係なく、水平方向を指定します
vertical CSS の書字方向に関係なく、垂直方向を指定します

scroll-offsets プロパティ

scroll-offset プロパティは、スクロール内のどこでアニメーションを発生させるかを決定します。下記の 3 つの方法があります。

値 意味
none スクロールオフセットを指定しません （初期値）
auto スクロールコンテナに応じて自動でスクロールオフセットが設定されます
<length-percentage> 後述
<element-offset> 後述
<length-percentage>

<length-percentage> の値、つまり、100px や 30vh、50% といった値をカンマ（,）で区切って指定します。各値は animation-duration に対してマッピングされます。

スクロールコンテナに対して最初に書いた値のスクロール位置からアニメーションが開始し、最後に書いた値のスクロール位置でアニメーションが終了します。

例えば、animation-duration の値が 2s であり、scroll-offsets: 0px、30px、100px と指定した場合、スクロールコンテナを 30px スクロールした時点で、アニメーションの開始から 1s の段階となります。スムーズなスクロールアニメーションを実現するために通常は、0px, 100px のように 2 つの値を使用します。

<element-offset>

特定の要素を指定し、その要素のスクロールポート （スクロールコンテナ内で実際に視覚的に表示されている部分） に対する位置に応じてアニメーションを実行します。

要素の指定には、selector() 関数を使用し、id セレクタを記述します。

さらに、スクロールポートの端 （エッジ）、つまり縦方向のスクロールであればスクロールポートの上端、あるいは下端の辺をそれぞれ start または end キーワードを使用して指定できるほか、オプションで 0.0 ～ 1.0 の間のしきい値 （指定しない場合は 「0」 が指定されたものとして扱われます） を使用して、スクロールポートの端からどの程度スクロールが進んだ時点でアニメーションするかを指定できます。

scroll-offsets: selector(#target-elm) end 0.2, selector(#target-elm) start 0.6;

<element-offset> については下記の画像も参考にしてください （画像は Scroll-linked Animations 仕様書の図版を元に作図）。

図版：要素ベースのオフセットの概念図
スクロールポートのエッジキーワードと要素の関係性。

図版：要素ベースのオフセットの概念図（しきい値の例）
スクロールポートのエッジキーワード、およびしきい値と要素の関係性の例。

@scroll-timelineのサンプルソース

@scroll-timeline timeline-name {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

#rotate-animation-elm {
  position: absolute;
  top: 200px;
  background-color: red;
  width: 100px;
  height: 100px;
  animation-name: rotate-animation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: timeline-name;
}

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@scroll-timeline image-in-scrollport {
  source: auto;
  scroll-offsets: selector(#target-elm) end 0.2, selector(#target-elm) start 0.6;
}

#target-elm {
  animation-name: fade-in;
  animation-timeline: image-in-scrollport;
  animation-duration: 0.5s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ×#enable-experimental-web-platform-features
Chrome ×#enable-experimental-web-platform-features
Firefox ○+97
Safari ×
iOS Safari ×
Android Chrome ×

関連する@-規則

仕様書

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

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

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

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

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