【CSS Modules】view-timeline-nameプロパティの使い方

view-timeline-nameプロパティは、CSSのスクロール駆動アニメーション機能において、特定のビューポートに対するタイムラインに名前を保持するプロパティです。このプロパティは、Webページ上でのスクロールの動きに合わせて要素がアニメーションする「スクロール駆動アニメーション」を実現するために用いられます。

具体的には、ある要素がビューポート（画面の表示領域）に入ったり出たりする際の進行度合いを時間軸に見立てた「ビュータイムライン」に、開発者が任意の識別子（名前）を割り当てる役割を持ちます。この名前を付けることで、複数のビュータイムラインが定義されている場合でも、どのアニメーションがどのタイムラインを参照し、同期して動くのかを明確に指定できます。

view-timeline-nameで定義されたタイムラインは、animation-timelineプロパティから参照されます。これにより、要素の表示領域内での位置の変化（例えば、画面に入り始めた時点から画面を完全に通り過ぎるまでの間）に基づいて、アニメーションが正確に制御され進行します。

このプロパティは通常、スクロール可能なコンテナ要素や、その中のアニメーション対象となる子要素に適用されます。開発者はこの機能を利用することで、要素の透明度、拡大縮小、移動、回転など、様々な視覚効果をスクロール位置と連動させて、より高度でインタラクティブなユーザー体験を構築することが可能になります。スクロール駆動アニメーションは、パフォーマンスに優れ、ユーザーの操作に即座に反応する現代的なWebデザイン手法の一つです。

Copy
1element {
2  view-timeline-name: section-animation-timeline;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません