スタッフブログ

CSSでスクロール同期アニメーションを実現する

2025年01月17日（金）

こんにちは。田村です。

CSSアニメーションの機能でスクロール位置とCSSアニメーションを同期させることが可能になるのをご存知でしょうか。
view-timeline と animation-timelineのプロパティを使うと、スクロール位置とCSSアニメーションを同期させることが可能になります。
今回は、view-timeline と animation-timeline の基本的な使い方を解説します！

※2025年1月時点では、Google Chrome、Edgeは対応していますが、Firefox、Safariは対応していません。

view-timeline と animation-timeline とは？

view-timelineとは？

view-timeline は、スクロール領域（ビューポート）に基づいたタイムラインを定義するためのプロパティです。
これにより、特定の要素がビューポート内にどの程度見えているかを計算し、その進捗をタイムラインとして利用できます。

animation-timelineとは？

animation-timeline は、アニメーションの進行をタイムラインに同期させるためのプロパティです。
通常のアニメーションは時間（animation-duration）で進みますが、animation-timeline を使うとスクロール量やタイムラインの進行によってアニメーションをコントロールできます。

どんな場面で使えるのか？

スクロール連動アニメーション
スクロールに合わせて要素がフェードイン・スライドインする
パララックス効果
進捗バーのアニメーション
ページのスクロール量に応じてプログレスバーを伸ばす

基本的な使い方

view-timeline を定義

要素にスクロール軸に沿ったタイムラインを指定します。

.scroll-container {
    view-timeline-name: scroll-timeline; /* タイムライン名 */
    view-timeline-axis: block;          /* 縦方向のスクロールを使用 */
}

view-timeline-name - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

view-timeline-name は CSS のプロパティで、スクロール可能な要素（スクローラー）内の要素（主体要素として呼ばれる）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインの...

"view-timeline-name" | Can I use... Support tables for HTML5, CSS3, etc

caniuse

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

view-timeline-axis - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

view-timeline-axis は CSS のプロパティで、スクロール可能な要素（スクローラー）内の要素（主体要素）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインのアニメーション...

"view-timeline-axis" | Can I use... Support tables for HTML5, CSS3, etc

caniuse

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

アニメーションに animation-timeline を設定

アニメーションをタイムラインに同期させます。

.animated-element {
    animation: fade-in 1s linear both;   /* アニメーション基本設定 */
    animation-timeline: scroll-timeline; /* タイムラインと同期 */
    animation-range: contain 0% contain 100%; /* タイムラインの範囲 */
}

animation-timeline - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

animation-timeline は CSS のプロパティで、 CSS アニメーションの進行を制御するのに使われるタイムラインを指定します。

"animation-timeline" | Can I use... Support tables for HTML5, CSS3, etc

caniuse

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

animation-range - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

animation-range は CSS の一括指定プロパティで、タイムラインに沿ったアニメーションの適用範囲の先頭と末尾を設定します。つまり、タイムラインのどこでアニメーションが始まり、どこで終...

"animation-range" | Can I use... Support tables for HTML5, CSS3, etc

caniuse

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.