Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages.

MDN Blog is a platform or publication associated with Mozilla Developer Network (MDN), offering articles, updates, and resources for web developers. Readers can find tutorials, documentation, and best practices for web development technologies such as HTML, CSS, JavaScript, and web APIs. With contributions from experts and community members, MDN Blog provides  insights and guidance to help developers build better web experiences.

MDN Blog

The View Transition API enables smooth animated navigation between pages in multi-page applications using just CSS. With the @view-transition at-rule, developers can create seamless page transitions that were previously only possible in single-page applications. The guide demonstrates how to implement basic cross-fade transitions with one line of CSS, then extends to custom slide animations using pseudo-elements like ::view-transition-old and ::view-transition-new. Currently supported in Chrome 126+, Edge 126+, and Safari 18.2+, with Firefox support coming soon.

A beginner-friendly guide to view transitions in CSS