Intersection Observer API とは

Intersection Observer APIは、一言でいうと「特定の要素が画面に入ったかどうかを監視する」ためのブラウザ標準機能です。
この機能を使用することで、下記のようなことが実現できます。

• ・スクロールアニメーション（スクロールに合わせて要素を表示する等）
• ・無限スクロール（スクロールに従いコンテンツを次々と読み込む）
• ・画像や動画などの遅延読み込み（ロード時間の短縮及び初期表示の向上）

今回実装する無限スクロールですが、以下のデモで動作確認ができます。
（一番下までスクロールしたら、追加のコンテンツを読み込むことでこのような挙動を再現できます。）

ブラウザの対応状況に関して、ChromeやEdgeなどの主要ブラウザでサポートされていますが、一部機能がサポートされていないブラウザもあるようです。
Intersection Observer APIのブラウザサポートについて

View Transitions API とは

次に、View Transitions APIですが、ページ遷移アニメーションを簡単に作成するための機能を提供します。
この機能を使用すると、WEBページの変更前と変更後を滑らかにつないでくれるので、モバイルアプリなどでよくある、「ヌルヌル動くような体験」を提供できます。

こちらに関しても、デモを用意したので見てもらうと違いが分かると思います。
（同じページで表示しているように見えますが、ページ遷移を行っています。）

こちらのブラウザ対応に関しても、ChromeやEdgeなどの主要ブラウザでサポートされていますが、Firefoxにて一部機能がサポートされていないようです。
View Transitions APIのブラウザサポートについて

無限スクロールとページ遷移アニメーションを組み合わせる

それでは、無限スクロールとページ遷移アニメーションを組み合わせてみたいと思います。
こちらもデモを作成してみましたので、ご覧ください。