This content originally appeared on Ariel Salminen and was authored by Ariel Salminen
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.
This content originally appeared on Ariel Salminen and was authored by Ariel Salminen
Ariel Salminen | Sciencx (2025-05-26T00:00:00+00:00) View Transitions for Any Website. Retrieved from https://www.scien.cx/2025/05/26/view-transitions-for-any-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.