Page loads don’t have to be harsh.
CSS lets you add smooth transitions between pages with 1 line.
For a long time, animating between two pages required JavaScript tricks, frameworks, or SPA logic. Now? It’s built into the browser.
By adding this tiny CSS snippet, you can crossfade between pages automatically:
@view-transition {
navigation: auto;
}What it does: It tells the browser to animate between navigations, using a smooth crossfade.
Why it’s so cool:
- It works instantly, no JS needed
- If the browser doesn’t support it, nothing breaks
- It makes your site feel way more polished
This is progressive enhancement at its best. Old browsers ignore it (81% support currently). New ones reward you with smooth UX.
And that’s just the default behaviour. You can customise it to animate specific elements, trigger transitions manually, and more.
@view-transition can make page changes feel continuous instead of abrupt. Keep transitions short and meaningful, and ensure unsupported browsers still get stable navigation without visual glitches.
View transitions are best when they explain navigation changes, not when they add spectacle. Keep timings short and fallbacks clean for unsupported browsers.
Run interaction tests with rapid clicks and navigation changes. Input should stay responsive even while transitions are active.
For teams, @view-transition is easiest to maintain when it starts in one documented example before broader reuse. That rollout sequence preserves clarity and reduces regressions during future refactors.
Want to build modern interfaces with less JavaScript?
I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.
Learn more