Scroll-driven Animations のフォールバック例

Scroll-driven に対応しているブラウザでは、スクロール位置に合わせて カードが右からスライドしながらフェードインします。
対応していないブラウザでは、Intersection Observer を使って ビューポートに入ったタイミングで一度だけアニメーションします。

セクション 1

Scroll-driven 対応ブラウザでは、スクロールに応じてスライド+フェードインします。

セクション 2

非対応ブラウザでは、Intersection Observer で「入ってきたときに一度だけ」再生します。

セクション 3

非対応ブラウザでは、アニメーションさせない(静止)