// live demo
View Transitions
Twenty-four 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
// guided cycle starting
The demo will play every transition in order and highlight the active control. Click any button to stop the guided cycle and take over.
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.