Skip to content

How to add simple view transitions to a website

View transitions are a lightweight way to create smooth animations between page states, thanks to the View Transitions API. Until recently, this was the quickest way to add fade transitions between pages on a website:

<!-- Don't use this, it's been deprecated -->
<meta name="view-transition" content="same-origin" />

However, this meta tag has been deprecated. Now, in order to implement the same behaviour, you need to add this on the top level of your main stylesheet:

@view-transition {
  navigation: auto;
}

/* ...other CSS rules... */

As of November 2024, this feature is supported only in Chrome-based browsers, with Safari lagging behind, offering it in its Technology Preview version.

References & further reading