CSS View Transitions: Page Animations Without JavaScript

A blog author describes replacing the old jQuery/pjax-style navigation tricks with the browser's native cross-document view transitions feature. A single @view-transition CSS block animates real page navigations without any JavaScript router or fetch logic, and it's supported natively in Chrome, Edge, and Safari, while Firefox simply ignores it and navigates normally.

Using view-transition-name, the author names individual layout regions and sidebar widgets separately so the middle column slides while sidebar widgets crossfade independently, instead of the whole page doing one flat crossfade. Careful tuning of animation timing, z-index stacking, and mix-blend-mode keeps the transitions visually correct.

The piece also flags two subtle pitfalls: aspect-ratio failing to compute a height without an explicit width, and fr-based grid columns shifting slightly whenever sibling content changes, both of which cause a visible flash mid-transition. The key appeal is that the technique needs no fallback or feature detection — unsupported browsers just get a plain navigation, and it automatically respects prefers-reduced-motion.