@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 | × |