---
title: "Skip page fades unless they help · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/view-transitions
updated: 2026-10-20
licence: "All rights reserved"
---

# Skip page fades unless they help

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Optional
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Use View Transitions only where the animation helps people follow a change, and check that it doesn't slow down clicks.
- How: Add a transition only when it shows where something moved, such as a list item opening into its page. Cross-page transitions work in Chrome and Safari, and other browsers simply skip them. Keep the animation at 200 ms or less, and turn it off for reduced motion.
- Check: A lab test times click to first paint of the next page, with and without the rule. The result and the decision are written down next to the rule in your stylesheet.
- 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.

Example:

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

**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`.

- Previous: [Animate on scroll with CSS](https://agentwranglers.se/playbook/website/interface/scroll-driven-animations)
- [Interface](https://agentwranglers.se/playbook/website/interface)