Two lines of Cross-Document View Transitions code you can use on every website today

Arguably, the most profound thing about the web is the ability to link one page to another. Click or tap a link, and another webpage opens in the browser window. Click again, and there’s another web page. In 2025, this is so completely obvious, it feels like nothing. But back in the 1980s when the web was conceived, the idea of navigating from one page to another through a link was revolutionary.

If you surfed the early web, you probably remember how very long it would take for a page to load. You were on a webpage, then you’d click a navigation link, and wait… wait… wait… The first page disappeared completely, leaving you starting at a blank white browser window (originally gray). Then slowly the next page started to load, from top to bottom. Bit by bit.

Over the years, internet connections sped up, and page loading got faster and faster. But for a long time you could still see a flash of white between pages. First page. Blank white flash. Next page. Even if a large portion of the second page was the same as the first — the same header, the same sidebar, same layout — it was clear that everything was being dumped and repainted.

Now days, the flash of white (or off-black in dark mode) is rarely seen. Sometimes headers and sidebars will repaint, but often, they do persist across the transition. Yet, earlier times still shape the way many people experience the web.

But now, you can add two lines of code to your website and fundamentally change the behavior of what happens when people navigate from one page to another on your site.

@view-transition {
  navigation: auto;
}

This activates cross-document View Transitions. It ensures any element that’s the same from one page to the next stays exactly in place. It keeps the background color of the site constant. And then anything that’s different — new elements appearing, old elements disappearing, page background changing to a different color — by default, all of these changes happen in a crossfade.

Yes, a crossfade, like a dissolve. The website fades the changes in content between the old page and the new page. Here’s what it looks like.

Notice how the header is present all of the time. It never blinks or moves. And notice how the image and other main content fades in and fades out as we switch from one web page to another. In some ways, it doesn’t feel like we’ve navigated to another web page at all.

Some people think of this as a way to make their website feel “more app like”. Others will simply marvel about how different the web in 2025 is from the web in 1995. And how just two lines of CSS fundamentally changes the behavior of what happens when people navigate from one page to another on your site. The crossfade replaces the cut to blankness and cut to new content that happens without it.

Anytime you are introducing animation to your web page, you should consider whether the animation could be problematic for users with motion sensitivity. Use a prefers-reduced-motion media query to determine whether to modify or stop motion triggers like parallax effects, dimensionality, or depth simulations like zooming/scaling.

But in this case, the dissolve animation doesn’t introduce motion. Simple crossfades are not known to cause adverse effects in those with motion sensitivity. Of course, you should make your own assessment about which motion-driven animations should be reduced — but simply removing 100% of animation on the web in the name of accessibility does not yield truly helpful results. Think through the type of motion you are introducing, and what the overall experience is like using our devices. It’s certain kinds of motion, or degrees of motion that start to cause problems for some users, not simply the presence of any animation. Learn much more about when to use prefers-reduce-motion by reading our article, Responsive Design for Motion.

What about browser support? Cross-document View Transitions are supported in Safari 18.2, Chrome 126, and Edge 126. Which means about 85% of users globally are using a browser with support. You can use View Transitions for this purpose with absolute confidence today, since the fallback behavior is to simply do nothing. Browsers without support act exactly the same as if you did not use this code. So why not use it? It will do something for the majority of your users, while the rest see no change at all.

You can do much more with View Transitions. It’s a very powerful and complex API. But doing more will take more than two lines of code. And more than 800 words to explain. So, for this coffee-break/snack-sized article, we’ll stop here.

Oh, do you want to know more? Well… you can switch from a simple dissolve to something else, like a slide animation. Or you can use same-document View Transitions to easily animate something from one place on the page to another. Dive into the power of View Transitions reading MDN Web Docs.