// live demo
View Transitions
Twelve uses of the native View Transitions API. Each button swaps
the stage between Scene A and Scene B using a different animation —
all driven by a single document.startViewTransition()
call and CSS keyframes on the ::view-transition-old /
::view-transition-new pseudo-elements.
- View Transitions API
- CSS keyframes
- Zero deps
- Progressive enhancement
// pick a transition
Click any button above. The stage will swap scenes using that animation. Click the same button (or any other) to swap back.
Implementation: a single shared
view-transition-name: vt-morph is assigned in JavaScript to
whichever scene is visible at the moment startViewTransition()
runs, then swapped onto the new scene inside the callback. A
vt-style-<id> class on <html> picks
which keyframe set runs. View-transition pseudo-elements live outside
Astro's scoped DOM, so the keyframes ship in a <style is:global> block.