View transitions | Frontend Practical Guide

Overview

View transitions allow you to create animated visual transitions between different states of a document.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`view-transition-name`	111	111	144	18	111	18
DOM API
`startViewTransition` The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.	111	111	144	18	111	18
`startViewTransition (options parameter)` `options` parameter	125	125	147	18.2	125	18.2
`startViewTransition (options parameter types parameter)` `options.types` parameter	125	125	147	18.2	125	18.2
`startViewTransition (options parameter update parameter)` `options.update` parameter	125	125	147	18.2	125	18.2
`startViewTransition (updateCallback parameter)` `updateCallback` parameter	111	111	Preview	18	111	18
`PageRevealEvent` The PageRevealEvent event object is made available inside handler functions for the Window.pagereveal_event event.	123	123		18.2	123	18.2
`PageRevealEvent` The PageRevealEvent() constructor creates a new PageRevealEvent object instance.	128	128		18.2	128	18.2
`viewTransition` The viewTransition read-only property of the PageRevealEvent interface contains a ViewTransition object representing the active view transition for the cross-document navigation.	126	126		18.2	126	18.2
`PageSwapEvent` The PageSwapEvent event object is made available inside handler functions for the Window.pageswap_event event.	124	124		18.2	124	18.2
`activation` The activation read-only property of the PageSwapEvent interface contains a NavigationActivation object containing the navigation type and current and destination document history entries for a same-origin navigation.	124	124		18.2	124	18.2
`PageSwapEvent` The PageSwapEvent() constructor creates a new PageSwapEvent object instance.	128	128		18.2	128	18.2
`viewTransition` The viewTransition read-only property of the PageRevealEvent interface contains a ViewTransition object representing the active view transition for the cross-document navigation.	126	126		18.2	126	18.2
`ViewTransition` The ViewTransition interface of the View Transition API represents an active view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.	111	111	144	18	111	18
`finished` The finished read-only property of the ViewTransition interface is a Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.	111	111	144	18	111	18
`ready` The ready read-only property of the ViewTransition interface is a Promise that fulfills once the pseudo-element tree is created and the transition animation is about to start.	111	111	144	18	111	18
`skipTransition` The skipTransition() method of the ViewTransition interface skips the animation part of the view transition, but doesn't skip running the associated view update.	111	111	144	18	111	18
`updateCallbackDone` The updateCallbackDone read-only property of the ViewTransition interface is a Promise that fulfills when the promise returned by the Document.startViewTransition() method's callback fulfills, or rejects when it rejects.	111	111	144	18	111	18
`pagereveal_event` The pagereveal event is fired when a document is first rendered, either when loading a fresh document from the network or activating a document (either from back/forward cache (bfcache) or prerender).	123	123		18.2	123	18.2
`pageswap_event` The pageswap event is fired when you navigate across documents, when the previous document is about to unload.	124	124		18.2	124	18.2
CSS property
`match-element`	137	137	144	18.4	137	18.4
`none`	111	111	144	18	111	18
Other
`css.selectors.view-transition` `::view-transition`	109	109	144	18	109	18
`css.selectors.view-transition-group` `::view-transition-group()`	109	109	144	18	109	18
`css.selectors.view-transition-image-pair` `::view-transition-image-pair()`	109	109	144	18	109	18
`css.selectors.view-transition-new` `::view-transition-new()`	109	109	144	18	109	18
`css.selectors.view-transition-old` `::view-transition-old()`	109	109	144	18	109	18

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

document.startViewTransition(() => {
  updateDOMSomehow();
});

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

.hero-image {
  view-transition-name: hero;
}

Live demo

fu-dtransition

View Transitions API fu-dtransition demo.

PreviewFullscreen

hi-ro-transition

View Transitions API hi-ro-transition demo.

PreviewFullscreen

view-transition-name

View Transitions API View-transition-name demo.

PreviewFullscreen

Use cases

State transitions
Use View transitions to clarify UI changes such as opening, reordering, or page transitions.
Polished feedback
Add motion only where it reinforces direction, hierarchy, or system response.

Cautions

Motion features can quickly become distracting if they are applied too broadly.
Keep animation rules paired with sensible non-animated fallbacks.

Overview

Browser support

Syntax

Live demo

fu-dtransition

hi-ro-transition

view-transition-name

Use cases

State transitions

Polished feedback

Cautions

Accessibility

Related links