:active-view-transition-type() CSS Pseudo Class

The :active-view-transition-type() pseudo-class is used to target elements while a View Transition of a specific type is currently active. It allows developers to conditionally apply styles during a named view transition, enabling fine-grained visual control over animations that occur when the DOM changes (such as page navigation, content swaps, or UI state updates).

This pseudo-class is part of the CSS View Transitions API and works in conjunction with JavaScript-triggered transitions (for example, using document.startViewTransition()).

What it does

The :active-view-transition-type() pseudo-class matches an element only while a view transition with a given type name is running. Once the transition finishes, the selector no longer applies.

This makes it useful for:

• Styling elements differently during navigation animations
• Adjusting layout or visibility during transitions
• Applying motion-aware visual feedback

The value inside the parentheses must match the transition type defined when the transition is started in JavaScript.

Example: Styling during a navigation transition

:active-view-transition-type(navigation) {
  cursor: progress;
}

This applies while a transition of type navigation is active.

Example with a specific element

main:active-view-transition-type(page-change) {
  opacity: 0.8;
}

Here, the <a href="/html-tags/tag-main.php">main</a> element is slightly faded while the page-change transition is running.

Using with view transition pseudo-elements

You can combine it with view transition pseudo-elements such as ::view-transition-group() to control how content animates during a transition:

:active-view-transition-type(theme-switch)
::view-transition-group(root) {
  animation-duration: 600ms;
}

This example adjusts animation timing only while the theme-switch transition is active.

Example with JavaScript trigger

document.startViewTransition(() => {
  document.body.classList.toggle("dark");
}, { types: ["theme-switch"] });

Then in CSS:

:active-view-transition-type(theme-switch) {
  background-color: black;
}

Common use cases

• Theme switching (light ↔ dark)
• Page navigation effects
• Modal or layout transitions
• SPA-style content replacement

Notes & limitations

• Only works while a view transition is actively running
• Requires browser support for the View Transitions API
• Does not persist styles after the transition ends
• Must match the exact transition type name

Related concepts

• View transition pseudo-elements such as ::view-transition-old() and ::view-transition-new()
• CSS animations using animation
• Transition timing via transition-duration