CSS SCROLL-DRIVEN ANIMATION

animation-range を目で理解する

view() のどの区間をアニメーションに使うかを決めるのが animation-range。 entry / cover / contain / exit を並べて見ると、かなり整理しやすいです。

Try scrolling 同じ要素でも、使う区間で動き方が変わる

entry cover contain exit

Viewport この枠を通過する区間を見る

entry

入り始めを使う

要素が表示領域に入ってくる区間で、早めに反応させたい時に。

animation-range: entry 0% entry 100%;

cover

重なっている全体を使う

要素が表示領域と重なっている全体を、ゆっくり使いたい時に。

animation-range: cover 0% cover 100%;

contain

収まっている区間を使う

要素が見えている状態を中心に、変化を見せたい時に。

animation-range: contain 0% contain 100%;

exit

出ていく区間を使う

要素が表示領域から出ていくタイミングで変化させたい時に。

animation-range: exit 0% exit 100%;

.range-card {
  view-timeline-name: --range-card;
}

.meter {
  animation-timeline: --range-card;
  animation-range: cover 0% cover 100%;
  animation-fill-mode: both;
}

Point

animation-range は、view() の進捗の「どの区間」をアニメーションに使うかを決める指定です。