Content

以下のコードでは、 subject クラスを持つ <div> に animation クラスが指定されています。アニメーション grow は subject 要素を大きくしたり小さくしたりします。 animation-timeline: view(block 50% 10%) を設定することで、スクロールする祖先（この場合は文書内のルート要素）が指定された進行タイムラインに沿ってアニメーションすることを宣言します。

起動画面よりスクロールしている間(下方向へにスクロールバーが移動している間)、50% 10% のインセット値によってアニメーションが下から 10%(72px) で始まり、上から 50%(360px) で完了することに注意してください。アニメーションがタイムラインに沿って移動するにつれて、 subject は成長していきます。逆に、起動画面へ戻すスクロールをする間(上方向へスクロールバーが移動すると)、アニメーションは逆方向へ進み、上から 50% で始まり、アニメーションを逆方向へ移動し、下から 10% で終わります。つまり、アニメーションが逆方向に進むにつれて、 subject は縮小していきます。

覚えておくべき重要な点は、アニメーションは subject 要素が 50% 10% インセット値を使用してオフセットされるように設定されたビューにある限り続くということです。