Skip page fades unless they help

Use View Transitions only where the animation helps people follow a change, and check that it doesn't slow down clicks.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

If you add @view-transition { navigation: auto; }, keep the animation short. Measure the time from click to paint with and without it.

Example

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

How to check

Lab click times with and without the transition.

Measured

On a reference site, a 180 ms cross-fade added 33 to 58 ms to every click in Chrome. That is the time to first paint of the next page.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/view-transitions.