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.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!