スクロールに連動して要素がフェードインする演出を、JavaScriptなしのanimation-timeline: view()で実装します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
animation-timeline: view()は「要素がスクロールコンテナ内に見えている割合」をアニメーションの進行度にします。時間ではなくスクロール位置が進行度なので、ゆっくりスクロールすればゆっくり現れます。animation-rangeのentry 0%〜90%は「見え始めから9割見えるまで」の区間で再生する指定です。従来のIntersectionObserver+クラス付替えを完全に置き換えられます。
Firefoxは2026年7月時点で未対応です。animationショートハンドの後にanimation-timelineを書かないとリセットされる点にも注意（AI生成コードの定番バグ）。
スクロールで画面に入った要素がフェードインするアニメーションを、JS（IntersectionObserver）なしで実装して。animation-timeline: view()を使って。
scroll-driven animationsが非対応のブラウザでは要素が普通に表示されるようにして。@supportsでガードして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。