Chrome 145でscroll-triggered animations機能がリリースされ、スクロール時に特定の位置でトリガーされる時間ベースアニメーションが可能になりました。これまでIntersectionObserver APIで実装していた効果を、CSSだけで宣言的に記述できます。

Animation Timeline APIの対応状況は現在約85%に達しており、Firefoxでも完全実装済みでフラグ付きで利用可能です。この新機能により、従来のanimation-timelineプロパティに加えてanimation-triggerプロパティが利用でき、アニメーション実行のタイミングをスクロールイベントで制御する仕組みが標準化されます。

設定方法は直感的で、通常のCSS animationにanimation-trigger: --t play-forwards play-backwardsを追加し、timeline-triggerプロパティでトリガー名と参照するtimelineを定義します。これまでのscroll-driven animationがスクロール量に応じて進行割合が変化する連続的なアニメーションだったのに対し、scroll-triggered animationは特定のスクロール位置で開始・終了する従来型のアニメーションです。

制作現場に与える実用的変化

これまでGSAPやScrollMagicのような大型ライブラリが必要だった複雑なスクロール連動インタラクションが、ネイティブCSSだけで実現可能になります。パフォーマンスが向上するだけでなく、スタイル処理がスタイルシートに集約されることで開発体験も改善されます。

CSSベースの実装により処理がコンポジタースレッドに移行され、メインスレッドでの重い処理によるレイアウト計算の影響を受けずにスムーズなアニメーションが維持できます。JavaScriptのscrollイベントリスナーで頻発していた「カクつき」問題が根本的に解決される点は、ウェブサイトの体感品質向上に直結します。

さらに、animation-rangeプロパティにより、エントリー、退出、カバーなどのキーワードとパーセンテージオフセットを組み合わせて、要素がビューポートの特定位置に達したタイミングを精密に制御できます。これにより映画的な演出表現や複雑なストーリーテリングが実装しやすくなります。

制作現場では、従来のJavaScript依存から脱却しCSS中心のワークフローに移行することで、デザイナーとエンジニアの協業がよりスムーズになることも期待されます。現時点でサポートしていないブラウザ向けには、IntersectionObserverを使用したフォールバック実装を併用することで段階的な導入が可能です。