View-Transition CSS: Smooth Transitions When Changing Pages

▶

We can add a smooth transition between each page, such as between the list view and the detail view, which is what we have here. This helps make the change less aggressive or abrupt, but much more fluid and visually pleasing.

To achieve this, we can use the view-transition API in CSS, which allows us to implement smooth transitions between pages. With this tool, we could also add animations so that the content appears from the side, from below, with scaling, or other visual effects.

All we need to do is add the following to our CSS stylesheet:

@view-transition {
 navigation: auto;
}

And that's pretty much it. With just these lines, we already achieve a smoother visual transition between pages.

Compatibility and support

Support is quite broad. Virtually all modern browsers support it, so we can use it without any problems. If the browser doesn't support this property, simply ignore it and browsing will continue to work as before, without errors or interruptions:

https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition

Once applied, you'll notice that the transitions between views now have a smooth fade or blur effect. We'll explain this more in the next lesson, but for now, you can see that the change isn't as abrupt as before, which is exactly what we were looking for.