View Transitions for Any Website
View Transitions are probably one of my favorite CSS features at the moment. You can enable them for any site today by adding the following code snippet into your CSS. This will immediately make the experience of using your website smoother by fundamentally changing the behavior of what happens when people navigate from one page to another:
@view-transition {
navigation: auto;
}Setting navigation: auto; ensures that any element that’s the same from one page to the next stays exactly in place. You can try it out yourself by navigating the pages on my website.
The difference with view transitions enabled is that the background and any repeating elements stay constant. And then anything that’s different, will be transitioned using a crossfade.
To further improve the example (especially if you’re building more complex transitions) you could wrap these styles inside prefers-reduced-motion media query:
@media screen and (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}This allows you to reduce motion for users with motion sensitivity while keeping the transitions for users who have not indicated their preference.
You can read more about the feature from the Webkit blog.
