Visually configure CSS View Transitions API animations with live preview and copy-ready code
The CSS View Transitions API is a browser-native page transition animation API (supported in Chrome 111+). It allows developers to create smooth visual transitions when DOM state changes, without manually managing animation frames. Triggered via document.startViewTransition(), the browser automatically screenshots the old state, renders the new state, and creates an animation between them.
Chrome 111+ and Edge 111+ fully support it. Safari 18+ has partial support. Firefox does not support it yet but is developing it. For unsupported browsers, the API gracefully degrades — when startViewTransition doesn't exist, the callback executes directly without errors.
view-transition-name is a CSS property that assigns a unique identifier to an element, allowing it to animate independently during a view transition. Elements without this property transition as a group. Elements with the same name create independent cross-fade animations between old and new states.
Use feature detection: const transition = document.startViewTransition ? document.startViewTransition(callback) : callback(). In unsupported browsers, the callback executes directly, updating content normally without animation.
SPA uses document.startViewTransition() API to manually trigger transitions, updating DOM in the callback. MPA enables same-origin cross-page transitions via meta tag. Both use the same CSS pseudo-elements to customize animation effects.