Chrome 146でスクロールトリガーアニメーション機能が正式に追加され、スクロール位置に基づいてアニメーションの再生、停止、リセットを制御できるようになりました。この機能により、これまでJavaScriptで煩雑に処理していたスクロール連動エフェクトを、純粋なCSSで宣言的に記述できるようになります。

ウェブページでは、特定のスクロール位置に到達したときにアニメーションを開始するのが一般的なパターンです。従来、開発者はJavaScriptを使って要素がスクロールコンテナのビューポート内にあるかどうかを手動で検出し、対応するアニメーション（要素をビューにスライドインさせるなど）を開始していました。

この新機能では、多くの用途が宣言的に提供される情報に依存していることに注目し、CSSでそうしたインタラクションを宣言的に作成できるようになっています。これにより、ブラウザがインタラクションをワーカースレッドにオフロードできるようになります。つまり、メインスレッドをブロックすることなく、滑らかなスクロールアニメーションが実現されます。

基本的な設定は従来のCSSアニメーションから始まります。例えば、0.35秒で実行され、ページロード後に自動的にトリガーされるアニメーションがあったとしましょう。これをスクロールベースに変更するには、新しい`animation-trigger`CSSプロパティを使用します。

スクロールトリガーアニメーションでは、スクロール進行タイムラインまたはビュー進行タイムラインをソースとする「タイムライントリガー」を使用します。タイムライントリガーを定義するには、`timeline-trigger`プロパティ（または関連するロングハンド）を使用し、例えばビュータイムラインをソースとするトリガーを作成できます。

この技術は、制作現場で重宝されているIntersectionObserverやスクロールイベントリスナーを使った実装を代替できる可能性があります。CSSスクロールアニメーションはメインJavaScriptスレッドではなくコンポジタースレッドで実行されるため、スクロールイベント中のアニメーションのジャンクを防ぎ、Intersection Observer のポーリングを不要にしてCPU使用率を削減します。

Chrome 146ベータ版は2026年2月11日にWindows、Mac、Linux、ChromeOS、Android向けにリリースされ、安定版は3月に提供予定となっています。現在はChrome系ブラウザのみの対応ですが、パフォーマンスとメンテナンスの面から考えると、制作現場にとって待望の機能と言えるでしょう。従来のJavaScriptによる実装と比較して、宣言的なCSS記述によってよりシンプルで高性能なスクロール連動エフェクトが実現できるようになりました。