Back to MPA demo
View Transition Features
The @view-transition CSS at-rule unlocks these capabilities:
Zero JavaScript
Transitions happen automatically on navigation — no code needed.
Shared Elements
Match elements by view-transition-name to morph between pages.
CSS Control
Customize timing, easing, and animations with pseudo-elements.
Works Everywhere
Any page navigation — links, form submissions, even back/forward.
Tip: Use
::view-transition-old(root) and ::view-transition-new(root) to customize the default crossfade.