demo · v144

Range Gallery

Animation range is a piece of the spec authors miss until they need it. Each row below ties a fade-in animation to a different named range — cover, contain, entry, exit — with the same keyframes. Scroll and watch each fire at a different point in the box’s journey through the viewport.

view() timeline + animation-range: checking…

Choose a range to scroll that row into the trigger zone.
scroll down to start

animation-range: cover

animation plays across the full journey — entry, contain, exit. covers everything.

keep scrolling

animation-range: contain

animation plays only while the element is fully inside the viewport. Big elements may never reach it.

more scrolling

animation-range: entry

animation plays as the element enters the viewport, finishes once it’s fully visible.

almost there

animation-range: exit

animation plays as the element leaves the viewport. Pair with reverse keyframes to fade out.

end

the API

.fade {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry;       /* cover | contain | entry | exit | <length> */
}

@keyframes appear {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

see also