Nov 27, 2025

View Transitions

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

@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:

@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.