Adding a cross-document view transition

We're going to start with a cross-document view transition, mostly because it's incredibly easy to do!

We simply need to add this to our CSS file.

@view-transition {
  navigation: auto;
}

And just like that, we have a cross-fade animation when changing from one page to another.

This is the default behavior, though you are able to customize it as well.

For example, we could do this:

::view-transition-group(root) {
  transition-duration: 3s;
}

Please don't slow them down like that though 😆.

Earlier implementations used a meta tag in the HTML. This has been replaced with the @view-transition.