Run it in your browser
Four probes and three demos. Nothing here reads a user-agent string, every badge below is a live feature test of the browser you are using right now.
- animatable zoom testing
- linear() easing testing
- animation-timeline: view() testing
- :playing pseudo-class testing
Does the layout move, or only the pixels?
Same target size, two properties. Watch the two cards either side of
the middle one: zoom reflows and shoves them along,
transform: scale() paints over them and never touches the
grid.
Press play. Sibling offset is measured live.
A curve with more than one hump
The solid runner uses the linear() point list below. The
ghost runner behind it uses the closest cubic-bezier() a
single curve can manage. Edit the points and both replay.
Solid: linear(). Dashed: cubic-bezier(0.22, 1, 0.36, 1).
Top: cubic-bezier. Bottom: linear().
Scroll the box, not the page
The cards below animate against animation-timeline: view()
inside their own scroller. If your engine has not shipped it, they sit
there fully readable, which is exactly the fallback the article argues
for.
Keep scrolling.
That is the whole feature.
Your system asks for reduced motion, so every demo above holds at its end state instead of animating. That is the same guard the CSS ships with.