Basic Multi-Page View Transition

Avatar of Geoff Graham
Geoff Graham on (Updated on )
@view-transition {
  navigation: auto;
}

That goes right in your stylesheet and it’s the most basic of basic view transitions. The effect is a cross-fade between two pages.

The Chrome team had initially released a meta tag we could plop into the <head> to opt into view transitions:

<meta name="view-transition" content="same-origin" />

That was a temporary way to access view transitions, but then the Chrome team shipped an update in May 2024 that enables multi-page view transitions by default and only requires us to opt into them with the CSS snippet above.