What are view transitions?
Learn page transitions with the View Transitions API.
What are view transitions?
The View Transitions API draws a smooth visual transition between two states of a page. The browser first takes a snapshot of the old look, then updates the DOM, takes a snapshot of the new look, and plays an automatic animation between the two snapshots.
This makes page changes, tab switches, or list reorderings seamless in single-page applications. To start a transition you call document.startViewTransition() in JavaScript; the transition's look is styled with CSS.
The ::view-transition root
When a transition runs, the browser places a layer tree on top of the page. The root of this tree is the ::view-transition pseudo-element; it holds all transition snapshots and sits at the very top.
Below it sit ::view-transition-group(root), ::view-transition-image-pair(root), ::view-transition-old(root), and ::view-transition-new(root). The name root is reserved for the whole page; the default transition is drawn in this tree.
Two snapshots
During a transition the browser creates two snapshots: the old look before the DOM update, and the new look after it. Both snapshots cover the whole page.
The old snapshot sits on ::view-transition-old(root), the new one on ::view-transition-new(root). The default transition fades out the old image and fades in the new one; this cross-fade is drawn automatically by the browser.
Exercise Set a duration on the root transition
Write a block for the ::view-transition-old(root) selector. The block must contain the declaration animation-duration: 0.4s.
Show example solution
/* root transition duration */
::view-transition-old(root) {
animation-duration: 0.4s;
}Test yourself
-
What does the View Transitions API do?
- It shortens the page's HTTP response time
- It draws a visual transition animation between two page states
- It automatically minifies CSS files
- It blocks form submissions
Show answer
It draws a visual transition animation between two page states — Correct. The API draws an automatic transition animation between the old and the new look.
-
Write the root pseudo-element
/* root transition layer */ ::____ { background: navy; }Show answer
/* root transition layer */ ::view-transition { background: navy; }