Cross-document transitions
Learn multi-page transitions.
Same-document and cross-document
Transitions inside the same document (for example in a single-page application) are called same-document transitions; they are started by calling document.startViewTransition() in JavaScript. But in a multi-page site each page is a separate HTML document; here you need a cross-document transition.
Cross-document transitions need no JavaScript. The browser intercepts page navigations and applies the transition you describe with CSS. This brings smooth transitions even to classic multi-page sites.
Using @view-transition
To enable transitions in a multi-page site, you add a @view-transition block in CSS. Inside, writing navigation: auto tells the browser to draw transitions automatically on same-origin navigations.
This block must appear in the stylesheet of every page. Otherwise that page will not join the transition. The ::view-transition-old(root) and ::view-transition-new(root) selectors still work for the old and new page; the same root structure is used.
Exercise Enable multi-page transitions and set a duration
Write two blocks. The first is @view-transition with the declaration navigation: auto in its block. The second is the ::view-transition-old(root) selector with the declaration animation-duration: 0.5s in its block.
Show example solution
/* multi-page transition and root duration */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation-duration: 0.5s;
}Test yourself
-
When is a cross-document transition used?
- When switching tabs in a single-page application
- When navigating between pages in a multi-page site
- To clear fields when a form is submitted
- To minify CSS files
Show answer
When navigating between pages in a multi-page site — Correct. Cross-document transition is for moving between pages in multi-page sites.
-
Complete the navigation value
/* multi-page transition */ @view-transition { navigation: ____; }Show answer
/* multi-page transition */ @view-transition { navigation: auto; } -
Match transition types to their tools
- same-document
- DOM change in a single page
- cross-document
- Multi-page navigation
- startViewTransition()
- JS for single-page transition
- @view-transition
- CSS for multi-page transition