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;
}

Next lesson: ::view-transition

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies