CSS View Transitions Generator

Same-document View Transitions let you animate between two DOM states with one call to document.startViewTransition(). Match elements across states with view-transition-name and customize the cross-fade with the ::view-transition-old(name) and ::view-transition-new(name) pseudo-elements. Build a transition below and run it in a live sandbox.

Transition preset

Presets configure the two demo states plus the ::view-transition-old/new keyframes. Tweak below.

Named element

Two elements (one in each state) sharing this view-transition-name are matched and morph as a pair. Names must be unique on the page at any moment.

Duration

old (seconds)

new (seconds)

Timing function

Reduced motion fallback

Wraps the keyframe rules in @media (prefers-reduced-motion: no-preference) so motion-sensitive users get a calmer change.

Live previewchecking…

Click Run transition inside the preview to swap states with startViewTransition(). The transition uses the CSS below.

Generated CSS

JS — start the transition

Support: Same-document View Transitions shipped in Chrome 111 (March 2023), Edge 111, and Safari 18 (Sep 2024). Firefox 134+ behind dom.viewTransitions.enabled. Unsupported browsers run the callback synchronously without animation — feature-detect with 'startViewTransition' in document.

How view transitions work

One callback, two snapshots. document.startViewTransition(updateDOM) screenshots the page, runs updateDOM, screenshots again, and animates between snapshots.
Names match elements across states. Set view-transition-name: hero on the source and on the destination element. The browser ties them into a single pair (called a group) and animates position + size automatically.
Customize per name. Target ::view-transition-old(name) and ::view-transition-new(name) to override the default cross-fade — slide, flip, zoom, anything CSS animations can do.
Names must be unique at any moment. Two elements sharing a name in the same state break the transition. Use contain: layout if the element jumps around layout.
Respect prefers-reduced-motion. Wrap your custom keyframes in a motion-safe media query so vestibular users get the default fade (or no animation) instead.