View Transitions API Cheat Sheet

Syntax for document.startViewTransition, CSS pseudo-elements for customizing the crossfade, and the multi-page transition spec.

1 PageIntermediateMar 9, 2026

SPA View Transition

Wrap a DOM update in startViewTransition to get an automatic crossfade animation.

javascript

function updateContent(newHtml) {  if (!document.startViewTransition) {    document.getElementById('app').innerHTML = newHtml    return  }  document.startViewTransition(() => {    document.getElementById('app').innerHTML = newHtml  })}

Naming Elements for Shared-Element Transitions

Tag elements with view-transition-name so the browser morphs between their old/new states.

css

.product-hero-image {  view-transition-name: hero-image;}/* the browser automatically finds an element with the same   view-transition-name in the "after" DOM state and animates   a smooth morph between the two positions/sizes */

Customizing the Transition Animation

Override the default crossfade with your own keyframes via the ::view-transition pseudo-elements.

css

::view-transition-old(hero-image),::view-transition-new(hero-image) {  animation-duration: 0.4s;  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}::view-transition-old(root) {  animation: fade-out 0.3s ease-out;}::view-transition-new(root) {  animation: fade-in 0.3s ease-in;}@keyframes fade-out { to { opacity: 0; } }@keyframes fade-in { from { opacity: 0; } }

Cross-Document (MPA) Transitions

Opt full page navigations into transitions with a single CSS declaration on both pages.

css

/* add to both the source and destination page's CSS */@view-transition {  navigation: auto;}

View Transitions API Reference

Core objects and pseudo-elements.

document.startViewTransition(callback)- captures before/after screenshots and runs the DOM-mutating callback
ViewTransition.ready- promise resolves once pseudo-element tree is built, before animation starts
ViewTransition.finished- promise resolves when the transition animation completes
ViewTransition.skipTransition()- cancels the animation, applying the new DOM state instantly
view-transition-name- CSS property linking an element across old/new snapshots for shared-element morphing
::view-transition-group/-image-pair/-old/-new- pseudo-element tree you can target for custom animation

Pro Tip

Always feature-detect with `if (!document.startViewTransition)` and fall back to the plain DOM update — Safari and Firefox support lag Chrome, and an ungated call will throw in older engines.

Was this cheat sheet helpful?

CSS Container Queries Cheat Sheet

Deno Cheat Sheet