最先端 CSS scroll-timeline · animation-timeline

Scroll-Driven / CSSだけで進行

JSなし、CSS scroll-timeline だけでスクロール連動アニメ。2026年 Chrome/Firefox stable。

— SCROLL-DRIVEN ANIMATION / CSSだけで進行 · animation-timeline: scroll()

スクロール連動ネイティブは Chrome 115+ / Firefox 131+ が必要です — 静的表示中
Scroll-Driven Animations require Chrome 115+ or Firefox 131+ — static fallback shown.

↓ SCROLL / スクロールしてください

01 / 03 — Scene 1 — The Dawn of Departure

冒険者が荷を背に門を出る。空はまだ薄紫で、街は静まり返っている。CSS scroll-timeline はスクロール位置を animation に変換し、JS なしで位置連動を実現する。

02 / 03 — Scene 2 — Depth of the Forest

木漏れ日が揺れ、足元には苔が広がる。animation-timeline: scroll() で要素がビューポートに入るたびにフェードインする。スクロール進行がそのまま animaton-delay に変換される。

03 / 03 — Scene 3 — Stars at Camp

たき火を囲み、旅の記録を綴る。animation-range を指定すると "entry" "exit" など、視差の開始・終了タイミングを細かく制御できる。これはすべて CSS の宣言のみ。