CSS-only View Transitions in 60 secondsIt's just two steps. Seriously. 5/25/2023
- Use Chrome or Arc browser with the
view-transition-on-navigationflag enabled (go to chrome://flags to check)
- Add this tag to the
<head>of the HTML pages you want to transition between:
<meta name="view-transition" content="same-origin" />
By default, the browser will crossfade between pages on navigation.
To get fancier, start adding
view-transition-name properties to elements on each page. If an element has the same
view-transition-name between pages, the browser will try to ease between them, morphing its height, width, color, etc. to produce a decently convincing effect.
But that explanation is for another time.