Click this card to trigger the transition animation
The View Transitions API is a modern browser API for creating smooth transition animations during page state changes. It automatically captures snapshots of old and new states and creates transitions through CSS animations without manual frame management.
document.startViewTransition(), triggered when updating DOM within the same page<meta name="view-transition" content="same-origin">, automatically triggered during cross-page navigation::view-transition - Transition root container::view-transition-group(name) - Transition group::view-transition-old(name) - Old state snapshot::view-transition-new(name) - New state snapshotChrome 111+ for SPA transitions, Chrome 126+ for MPA transitions. Firefox and Safari are in development.
View Transitions API is a native browser API for creating smooth transition animations during page state changes. It automatically captures snapshots of old and new states and creates transitions through CSS animations without manual frame management.
SPA transitions use document.startViewTransition() method, triggered when updating DOM within the same page. MPA transitions are enabled via meta tag and automatically triggered during page navigation. SPA transitions require manual API calls, while MPA transitions are handled automatically by the browser.
View Transitions API supports same-page transitions in Chrome 111+ and cross-page transitions in Chrome 126+. Firefox and Safari are in development. Feature detection and fallback are recommended.
Use ::view-transition-old and ::view-transition-new pseudo-elements to customize animations. Set animation-duration, animation-timing-function and other properties. Use view-transition-name to assign independent transition effects to specific elements.
Completely safe. All code generation happens locally in your browser. No data is sent to any server, and no information is stored. Data is automatically cleared when you close the page.