Single-Page App (SPA) transitions use document.startViewTransition(callback), where JavaScript dynamically mutates the DOM within the same document while the browser animates between old and new state snapshots. Multi-Page App (MPA) transitions (View Transitions Level 2) allow seamless visual transitions between separate HTML page navigations without single-page app frameworks, activated simply via @view-transition { navigation: auto; } and coordinated via pageswap and pagereveal events.

During a transition, the browser captures bitmap snapshots of elements assigned a view-transition-name. It constructs an overlay tree: ::view-transition contains ::view-transition-group(name), which holds an ::view-transition-image-pair(name) with the old snapshot (::view-transition-old) and the new live render (::view-transition-new). The browser smoothly interpolates size, position (using transform), and opacity.

If two distinct elements share the same view-transition-name simultaneously, the browser cannot determine which element corresponds to the snapshot, causing the view transition to fail and fall back to an instant jump. Developers dynamically assign view-transition-name right before navigation (in pageswap) and clear it after transition completion.

Because view transitions animate snapshots using the GPU Compositor thread (via transform and opacity), the animations run off the main JavaScript thread. Even during heavy page loads, DOM hydration, or script execution, the hero morph and cross-fade effects glide smoothly at the display's native refresh rate without layout recalculations.