View Transitions: animated changes between states

When you call `document.startViewTransition()`, the browser builds a special layer for the transition. Two of the most important pieces are `::view-transition-old(root)` and `::view-transition-new(root)`.

The first one is the visual snapshot of the previous state. The second one represents the incoming state. By default they cross-fade, but you can replace that motion with your own keyframes.

You can assign different animations to the outgoing and incoming pseudo-elements. A slide, a scale, a push or a softer layered motion can all be expressed with normal CSS animations.

For more precise continuity, assign `view-transition-name` to a specific element such as a thumbnail, avatar or hero image. That element can then transition independently from the rest of the page.