CSS スクロール駆動アニメーション

CSS スクロール駆動アニメーションモジュールは、CSS アニメーションモジュールとウェブアニメーション APIの上に構築する機能を提供します。これは、既定の時間ベースによる文書タイムラインの代わりに、スクロールベースのタイムラインに沿った進行に基づいてプロパティ値をアニメーションすることができます。つまり、時間の経過だけでなく、スクロール可能な要素をスクロールすることで、要素をアニメーションすることができます。

スクロールベースのタイムラインには 2 種類あります。

• スクロール進行タイムライン: このタイムラインは、スクロール可能な要素（スクローラー）を上から下（または左から右）にスクロールしたり戻したりすることで進行させます。スクロール範囲の位置はパーセント値に変換されます。先頭が 0%、末尾が 100% です。
• ビュー進行タイムライン: このタイムラインは、スクローラー内の要素（主体）の可視性の変化に基づいて進行します。スクローラー内の主体の可視性は、進行のパーセント値として追跡されます。既定では、進行タイムラインはサブジェクトがスクローラーの一方の端に最初に表示された時に 0% になり、反対側の端に達したときに 100% になります。

これら 2 つのタイムラインのいずれかがアニメーションする要素に適用されると、アニメーションは既定の時間ベースのタイムラインに従うのではなく、そのタイムラインに沿って進行します。

アニメーションの実効位置をスクロール進行とビュー進行タイムラインに沿って調整することが可能です、つまり、アニメーションの開始位置と終了位置を定義することができます。これにはいくつかの方法があります。

• アニメーションの開始と終了の値をアニメーションに適用することで、アニメーションの開始位置と終了位置をタイムラインに沿って調整できます。
• ビュー進行タイムラインには、主体要素が表示されているとみなされるスクロールポート（詳細は Scroll container を参照）の位置を調整するために、開始と終了のインセット（またはアウトセット）を適用することができます。別の言い方をすれば、タイムライン自体の位置をずらす開始や終了のインセット（またはアウトセット）の値を指定することができます。