An illustration with the text: Fancy Fancy

View Transitions


I just learned that you can activate view transitions in multi-page applications using only this in your stylesheet:

View Transitions
@view-transition {
  navigation: auto;
}

And if you want to make sure that your view transitions are accessible, you can wrap it in a prefers-reduced-motion media query:

Reduced Motion
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
}

Note: it is not supported by firefox yet, but it works in chromium- and webkit-based browsers.