scroll-timelineとは？CSSだけでスクロール連動アニメーションを作る方法

3月 26, 2025 5月 16, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

近年のWebデザインでは、スクロールに応じて動くアニメーションが人気です！
これまではJavaScriptを使って制御するのが一般的でしたが、最新のCSSでは「scroll-timeline」というプロパティを使うことで CSSだけでスクロール連動アニメーションを実装できるようになりました。

今回は、「scroll-timeline」の使い方と具体的な実装例を詳しく解説します！

scroll-timelineとは？

scroll-timelineの基本

「scroll-timeline」は、要素のスクロール量をアニメーションのタイムラインとして扱うことができるCSSの新しいプロパティです。今まではJavaScriptのScrollイベントを使ってアニメーションを制御するのが一般的でしたが、このプロパティを使えば CSSだけで簡単にスクロール連動のアニメーションを作成できます。

scroll-timelineの主な特徴

JavaScriptを使わずにスクロールアニメーションを制御できる
CSSの @keyframes と組み合わせて簡単にアニメーションを作成
パフォーマンスが向上し、スムーズな動作が可能

scroll-timelineの基本的な使い方

scroll-timelineの基本構文

まずは、 @scroll-timeline を定義し、アニメーションに適用する方法を見てみましょう。

@scroll-timeline my-timeline {
 source: selector(#scroll-container); 
 orientation: block;
 } 
@keyframes fade-in { 
 from { opacity: 0; } to { opacity: 1; } 
} 
.target-element {
 animation: fade-in linear forwards; animation-timeline: my-timeline;
 }

コードの解説

@scroll-timeline my-timeline でスクロールのタイムラインを作成
source: selector(#scroll-container);で対象のスクロール要素を指定
animation-timeline: my-timeline; でアニメーションに適用

scroll-timelineの実践例

スクロールでフェードインするアニメーション

以下の例では、スクロールに応じて要素がフェードインするアニメーションを作成します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

実装ポイント

#scroll-container のスクロールをトリガーにしてtarget-element の opacity を変化
CSSだけでスクロールに連動したフェードインを実現
JavaScript不要で軽量なアニメーション

scroll-timelineのメリットとデメリット

メリット

JavaScript不要で簡単にスクロール連動アニメーションを実装できる
ブラウザの最適化が効きやすく、スムーズな動作が可能
CSSのみで制御できるため、コードの管理がしやすい

デメリット

まだすべてのブラウザでサポートされていない
JavaScriptに比べてカスタマイズの自由度が低い

まとめ

CSSだけでスクロール連動アニメーションが可能に！

「scroll-timeline」を活用すれば、CSSだけでスクロールに応じたアニメーションを実装できます。
特に軽量でパフォーマンスの高いアニメーションを作りたい場合に最適です。
「Webサイトにスクロールアニメーションを導入したい」「Web制作を相談したい」という方は、静岡県浜松市の「satokotadesign」にお気軽にご相談ください！