View transitionsBaseline · Newly available

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

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Oct 14, 2025.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–110Not supported

111+Supportedsince Mar 7, 2023

Current: 155

Edge

12–110Not supported

111+Supportedsince Mar 13, 2023

Current: 154

Firefox

1–143Not supported

144+Supportedsince Oct 14, 2025

Current: 157

Safari

1–17.6Not supported

18+Supportedsince Sep 16, 2024

Current: 27

MobileChrome Android

18–110Not supported

111+Supportedsince Mar 7, 2023

Current: 155

Firefox Android

4–143Not supported

144+Supportedsince Oct 14, 2025

Current: 157

Safari iOS

1–17.6Not supported

18+Supportedsince Sep 16, 2024

Current: 27

How to use

Every current browser supports this, but it only became Baseline on Oct 14, 2025. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

function updateView(render) {
  if (!document.startViewTransition) {
    render(); // fallback: update without animation
    return;
  }
  document.startViewTransition(() => render());
}

/* CSS: customise the default cross-fade */
/* ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; } */

Feature detection

JS · check before using

if ("ViewTransition" in globalThis) {
  // ViewTransition is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

drafts.csswg.org/css-view-transitions-1 ↗

Usage share

caniuse.com/view-transitions ↗

Sub-features

Support for each part of the feature (27). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
Document.startViewTransition	111	111	144	18	111	144	18
Document.startViewTransition.options_parameter	125	125	147	18.2	125	147	18.2
Document.startViewTransition.options_parameter.types_parameter	125	125	147	18.2	125	147	18.2
Document.startViewTransition.options_parameter.update_parameter	125	125	147	18.2	125	147	18.2
Document.startViewTransition.updateCallback_parameter	111	111	144	18	111	144	18
PageRevealEvent	123	123	✕	18.2	123	✕	18.2
PageRevealEvent.PageRevealEvent	128	128	✕	18.2	128	✕	18.2
PageRevealEvent.viewTransition	126	126	✕	18.2	126	✕	18.2
PageSwapEvent	124	124	✕	18.2	124	✕	18.2
PageSwapEvent.PageSwapEvent	128	128	✕	18.2	128	✕	18.2
PageSwapEvent.activation	124	124	✕	18.2	124	✕	18.2
PageSwapEvent.viewTransition	126	126	✕	18.2	126	✕	18.2
ViewTransition	111	111	144	18	111	144	18
ViewTransition.finished	111	111	144	18	111	144	18
ViewTransition.ready	111	111	144	18	111	144	18
ViewTransition.skipTransition	111	111	144	18	111	144	18
ViewTransition.updateCallbackDone	111	111	144	18	111	144	18
Window.pagereveal_event	123	123	✕	18.2	123	✕	18.2
Window.pageswap_event	124	124	✕	✕	124	✕	✕
view-transition-name	111	111	144	18	111	144	18

Show 7 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
view-transition-name.match-element	137	137	144	18.4	137	144	18.4
view-transition-name.none	111	111	144	18	111	144	18
view-transition	109	109	144	18	109	144	18
view-transition-group	109	109	144	18	109	144	18
view-transition-image-pair	109	109	144	18	109	144	18
view-transition-new	109	109	144	18	109	144	18
view-transition-old	109	109	144	18	109	144	18