スクロールに連動して要素がフェードインする演出を、JavaScriptなしのanimation-timeline: view()で実装します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
animation-timeline: view()は「要素がスクロールコンテナ内に見えている割合」をアニメーションの進行度にします。時間ではなくスクロール位置が進行度なので、ゆっくりスクロールすればゆっくり現れます。animation-rangeのentry 0%〜90%は「見え始めから9割見えるまで」の区間で再生する指定です。従来のIntersectionObserver+クラス付替えを完全に置き換えられます。
Firefoxは2026年7月時点で未対応です。animationショートハンドの後にanimation-timelineを書かないとリセットされる点にも注意（AI生成コードの定番バグ）。