The View Transitions API lets the browser cross-fade, slide or morph between two visual states, and in modern browsers it does it across full page loads with one CSS line and one HTML attribute. No animation library is in sight, which is exactly what makes this recipe gacor.

Turn it on and name the pieces

@view-transition { navigation: auto; }
<img src="/img/card-1.webp" style="view-transition-name: featured-photo" />

Now the same photo on two pages is treated as the same thing. The browser moves it in place between them. Add your own timing:

::view-transition-old(root) { animation-duration: 220ms; }
::view-transition-new(root) { animation-duration: 220ms; }

Where to stop

  • Give view-transition-name only to at most a handful of elements. Every named element is a coordination cost.
  • Never name a scrolling container. It will jump, and its jump will be beautiful in the worst way.
  • Interactions that push a URL should animate. Interactions that save data should not. Transitions are not relevant to what a user needs to wait for.
The browser knew how to make a transition smoother than the DOM ever could.

Supported in 92.9 percent of browsers today, including Firefox. In the rest, nothing renders, and nothing breaks — pages load exactly like they always did, which is exactly what a good progressive enhancement does.