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.
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!