アニメーションの進行を時間ではなくスクロール位置に連動させるプロパティです（スクロール駆動アニメーション）。読了プログレスバーやパララックス、ビューポートに入ったら動き出す演出をJavaScriptなしで実装できます。
animation-timeline: auto | none | scroll([<scroller>] [<axis>]) | view([<axis>] [<inset>]).progress-bar {
transform-origin: left;
animation: grow linear;
animation-timeline: scroll();
}
@keyframes grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}ページのスクロール量に連動する読了プログレスバー
.card {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
@keyframes fade-in {
from { opacity: 0; translate: 0 40px; }
to { opacity: 1; translate: 0 0; }
}要素がビューポートに入る間だけ進行するフェードイン
スクロール駆動ではanimation-durationは意味を持たないためautoのままでOK。進行範囲はanimation-range（entry/exit/cover等）で細かく制御できます。JSのIntersectionObserver+scrollイベントの組み合わせを丸ごと置き換えられます。
animationショートハンドはanimation-timelineをリセットするため、必ずanimationより後にanimation-timelineを書きます。Firefox未対応（2026年7月時点）なので、動かなくても内容が読める設計（プログレッシブエンハンスメント）が前提です。
AIはスクロール連動の実装にscrollイベント+JSやIntersectionObserverを提案しがちですが、CSSのanimation-timelineで完結する場面が増えています。AI生成コードの最頻バグは「animationショートハンドの後にanimation-timelineを書かずリセットされる」順序ミスです。Firefox未対応（limited）という対応状況もAIの知識では古いことが多く、必ず現在の対応状況を確認してください。
ページ上部に読了プログレスバーをJSなし・animation-timeline: scroll()で実装して。Firefox非対応でも壊れないように
スクロールでカードが順にフェードインする演出を、IntersectionObserverではなくanimation-timeline: view()で書いて
このscrollイベントベースのパララックスをスクロール駆動アニメーションに移行できるか評価して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
Firefox未対応（2026年7月時点）。非対応環境では通常表示になる前提で使う