:active-view-transition CSS Pseudo Class

The :active-view-transition pseudo-class represents an element while it is actively participating in a View Transition animation, as defined by the View Transitions API. It allows you to apply temporary styles only during the moment a transition is running, making it useful for fine-tuning animations, suppressing layout shifts, or visually synchronizing UI changes when navigating or updating content.

What :active-view-transition does

The :active-view-transition pseudo-class becomes active only while a view transition is in progress - from the moment the transition starts until it finishes. Outside of that window, the selector does nothing.

It is typically used alongside the View Transitions API, especially when using document.startViewTransition() or when navigation triggers a transition automatically.

Unlike persistent selectors, this pseudo-class is ephemeral - it exists only during the animation lifecycle.

Common use cases

• Temporarily disabling animations during transitions
• Preventing layout shifts
• Adjusting opacity, visibility, or transforms during transitions
• Fine-tuning how elements behave while snapshots are animating

Basic syntax

:active-view-transition {
  /* styles applied only during the transition */
}

Example: Reducing motion during a transition

:active-view-transition {
  animation: none;
  transition: none;
}

This prevents nested animations from interfering with the view transition animation itself.

Example: Targeting elements during a transition

main:active-view-transition {
  opacity: 0.95;
}

Here, the <code><a href="/html-tags/tag-main.php">main</a></code> element slightly fades while the transition is active.

Using with View Transition pseudo-elements

You’ll often see :active-view-transition used together with view-transition pseudo-elements such as ::view-transition-group() or ::view-transition-old(). These allow styling of snapshots taken before and after DOM updates.

Example:

:active-view-transition ::view-transition-old(root) {
  opacity: 0;
}

:active-view-transition ::view-transition-new(root) {
  opacity: 1;
}

This creates a simple fade-in effect during the transition.

Example with JavaScript trigger

<button id="swap">Swap Content</button>
<div id="content">Hello</div>

:active-view-transition #content {
  filter: blur(2px);
}

document.getElementById("swap").onclick = () => {
  document.startViewTransition(() => {
    document.getElementById("content").textContent = "Goodbye";
  });
};

During the transition, the content blurs briefly, then resolves when the transition ends.

Related concepts

• Often paired with the view-transition-name property to control how elements map between states
• Commonly used alongside opacity, transform, and filter