CSS :active-view-transition Pseudo-Class

CSS :active-view-transition Pseudo-Class

The CSS :active-view-transition pseudo-class matches the root element of a document while a view transition is active. It allows you to apply temporary styles during animated changes between page states or documents.

:active-view-transition Syntax

:root:active-view-transition {
  property: value;
}

The :active-view-transition pseudo-class has no arguments. It matches the document's root element while a view transition is active.

The :root selector is commonly included to make the target explicit. In an HTML document, the root element is <html>.

Example Syntax

:root:active-view-transition .status {
  color: #0056b3;
}

This rule changes the text color of an element with the class status while a view transition is active.

How :active-view-transition Works

View transitions allow browsers to animate between two visual states. A transition can occur when JavaScript updates content in the current document or when navigating between eligible documents.

When a view transition becomes active, the root element matches :active-view-transition. The pseudo-class stops matching when the transition is no longer active.

This makes it possible to change styles temporarily without manually adding and removing a CSS class.

Important Characteristics

• The pseudo-class matches the document root, not every element participating in the transition.
• Descendant selectors can style elements inside the document while the transition is active.
• The selector does not start a view transition by itself.
• It works independently of the transition's type. Use :active-view-transition-type() to match particular types.
• Its matching state is temporary and depends on the active view transition lifecycle.

Starting a View Transition

For changes within the same document, JavaScript can start a view transition using the document.startViewTransition() method.

JavaScript

const button = document.querySelector("#change-button");
const panel = document.querySelector("#color-panel");

button.addEventListener("click", () => {
  const update = () => {
    panel.classList.toggle("alternate");
  };
  if (document.startViewTransition) {
    document.startViewTransition(update);
  } else {
    update();
  }
});

When the button is clicked, the browser starts a view transition around the class change. If the API is unavailable, the class still changes without the view transition.

For cross-document navigation, eligible same-origin pages can opt in using the @view-transition at-rule. This is a separate mechanism from calling document.startViewTransition().

Cross-Document Opt-In

@view-transition {
  navigation: auto;
}

The navigation rule must be included in the participating documents, and the navigation must meet the browser's requirements for cross-document view transitions.

Styling Elements During a Transition

Because :active-view-transition matches the root element, it can be combined with a descendant selector to change the appearance of controls, labels, or other content during a transition.

CSS

.transition-status {
  color: #555;
}
:root:active-view-transition .transition-status {
  color: #0066cc;
}
:root:active-view-transition .change-button {
  visibility: hidden;
}

In this example, the status text changes color and the button becomes hidden while a transition is active.

Using visibility: hidden preserves the button's layout space. However, controls should not be hidden unnecessarily, especially when users may need to interact with them during longer transitions.

Styling the Transition Animation

The view transition pseudo-elements control the animated snapshots. They are separate from the :active-view-transition pseudo-class.

::view-transition-group(root) {
  animation-duration: 0.6s;
}

This rule changes the duration of the root view transition animation. The :active-view-transition selector can be used alongside these pseudo-elements to style ordinary document content.

Related View Transition Features

Several CSS features and JavaScript APIs work together to create and style view transitions.

Use :active-view-transition when the same styling should apply to every active view transition, regardless of its type.

Best Practices

• Use :root:active-view-transition to clearly target the document root during a transition.
• Keep temporary styling focused on elements that benefit from visual feedback.
• Provide a fallback for browsers without document.startViewTransition().
• Avoid hiding essential controls or information during long transitions.
• Respect reduced-motion preferences when creating custom animations.
• Test same-document and cross-document transitions separately because their setup requirements differ.

:active-view-transition Example

The following example changes a panel's background color using the View Transition API. During the transition, the status text changes color through the :active-view-transition pseudo-class.

HTML

<div class="color-panel" id="color-panel">
  <p>View Transition Example</p>
</div>
<p class="transition-status">Transition status</p>
<button class="change-button" id="change-button" type="button">Change Color</button>

CSS

.color-panel {
  padding: 20px;
  background-color: #0066cc;
  color: #fff;
  text-align: center;
}
.color-panel.alternate {
  background-color: #008060;
}
.transition-status {
  color: #555;
}
:root:active-view-transition .transition-status {
  color: #0066cc;
}
::view-transition-group(root) {
  animation-duration: 1.5s;
}

JavaScript

const button = document.querySelector("#change-button");
const panel = document.querySelector("#color-panel");

button.addEventListener("click", () => {
  const update = () => {
    panel.classList.toggle("alternate");
  };
  if (document.startViewTransition) {
    document.startViewTransition(update);
  } else {
    update();
  }
});

Browser Result

Click the button to switch the panel's background color. In supporting browsers, the panel changes through a view transition. The status text uses its active-transition style temporarily.

Play in Editor

Browser Support

The :active-view-transition pseudo-class is newly available across modern browsers. Older browser versions may not support it. For compatibility information, visit Can I Use? and search for active view transition.

Specifications

The :active-view-transition pseudo-class is defined in CSS View Transitions Module Level 2.

CSS View Transitions Module Level 2 - The :active-view-transition Pseudo-Class