A smoother transition?
Okay, this is kind of like magic, but I like it! We are talking about view transitions. In its simplest form, it opts in the current and destination documents to undergo a smooth transition between pages. With this one-liner in the base of our CSS, we can get a nicer feel when navigating the web on multi-page applications (MPA). When a user clicks a link, the click triggers the view transition, and we can see a nice cross-fade.
@view-transition {
navigation: auto;
}So easy! You can, of course, combine this with keyframes and animations if you want to customize it. But more on that another time. The browser support isn’t widespread yet, but it currently works in Chrome, Edge, and Safari Technology Preview, with more support to come.
