animation-range を cover にすると、ページの末尾で完走しない

最初はこう書いていました。

animation-timeline: view();
animation-range: entry 0% cover 28%;   /* ← ページの末尾で完走しない */

3つあるページのうち、いちばん短いページで気づきました。最後の節が画面いっぱいに見えているのに、薄いままなのです。計算値を拾うとこうでした。

端末画像   0.63
見出し     0.59
箇条書き   0.47   ← 画面に入りきっているのに半分以下

手前の節   0.93 / 0.88   （下へ行くほど薄い）

cover は、要素が画面を通り過ぎていく量で進みます。ということは、ページのいちばん下にある要素には、その量ぶんのスクロールが残っていません。 下へ行くほど薄くなるのはそのためです。

長いページでは目立ちません。ページが短いほど、そして要素が下にあるほど強く出ます。

animation-timeline: view();
animation-range: entry 0% entry 100%;  /* 全体が画面に入りきったら完了 */

entry 100% は「要素の下端が画面の下端に達する」、つまり全体が画面に入りきった時点です。行き過ぎる量に依存しないので、ページの末尾にあっても必ず完走します。

「画面に入りきったものは必ず不透明」という、読み手の側から見て素直な約束にもなりました。

ここがいちばんの落とし穴でした。window.scrollTo() では検証できません。animation-timeline: view() の値が更新されず、常に 1 に見えます。