こんにちは。田村です。
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.
animation-rangeの動きは理解するのが難しいですので、View Timeline Ranges Visualizerツールを使うと視覚的に理解しやすいです。
確認してみてください。
View Progress Timeline: Ranges and Animation Progress Visualizer
scroll-driven-animations
注意点とブラウザ対応状況
2025年1月時点では、
Google Chrome、Edgeは対応していますが、Firefox、Safariは対応していません。
実際に使用する場合は、ブラウザの要件など確認して使用してください。
関連するタグ
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
