View Transition

Date: May 2025
Reading time: 2 minutes

Brief notes and insights on the View Transitions API, focused on practical use and behavior.

Resources

What is it?

"The View Transition API gives you the power to create seamless visual transitions between different views on your website. This creates a more visually engaging user experience for users as they navigate your site, regardless of whether it's built as a multi-page application (MPA) or a single-page application (SPA)."
Source: chrome for developers

Traditionally, seamless transitions between pages were nearly impossible—especially in MPAs, because each navigation loads a new HTML file with its own styles and layout context. The View Transition API solves this by enabling transitions across page boundaries with minimal effort.

How to use it

For a basic transition, include the following CSS in both the current and destination documents:

@view-transition {
    navigation: auto;
}

From the @view-transition at-rule to pseudo-elements and the JavaScript API, the View Transition API offers multiple ways to enhance navigation. For details, refer to the resources above.

Use cases

thumbnail image transitioning into a full-size image
transition between pages on navigation
link text transforming into the headline when opening it
...

Instead of complex transitions, subtle microanimations often provide a smoother, more natural user experience.

Under the hood

Here is how the View Transition API works:

Start transition
Triggering document.startViewTransition() starts the process
Capture old state
Browser snapshots the current DOM before any changes
Update the DOM
DOM is modified inside the transition callback
Capture new state
Browser takes second snapshot of the updated DOM
Animate transition
Animate between the old and new snapshots using CSS (::view-transition-old and ::view-transition-new)
Cleanup
Remove temporary snapshots

A11y

With view transitions, the DOM of the target site is immediately active after a click, preventing accessibility issues.
However, overusing animations - especially long ones - can confuse users. For example, if an element transforms during the transition, users might try to interact with the original element, unaware that it has already been replaced.
When implemented properly, with short, non-discruptive animations and reduced-motion disabled for users who prefer it, there are no significant accessibility concerns.

Performance

View transitions are designed for efficiency, but their performance depends on proper usage and optimization.

Browser support

Currently, there is no Firefox support: https://caniuse.com/?search=view%20transition (opens in a new tab)
But when implemented correctly, users on supported browsers benefit from smooth transitions, while Firefox users experience no negative impact.