The :active-view-transition CSS pseudo-class matches the root element of a document when a view transition is in progress (active) and stops matching once the transition has completed.

Syntax

:root:active-view-transition ... {
  /* ... */
}

Examples

Styling an active view transition

This example extends on the same-document view transition example on the startViewTransition page.

<main>
  <section class="color">
    <h2>Color is changing!</h2>
  </section>
  <button id="change-color">Change Color</button>
</main>

A <h2> element initially has a display: none style, and this is overwritten using the :active-view-transition pseudo-class setting the <h2> style to display: block. The button is hidden using visibility: hidden, when the view transition is in progress:

h2 {
  display: none;
  color: white;
}
:root:active-view-transition h2 {
  display: block;
}
:root:active-view-transition button {
  visibility: hidden;
}

Specifications

Browser compatibility

See also

• :active-view-transition-type() pseudo-class
• startViewTransition method