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

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

The CSS :active-view-transition-type() pseudo-class matches the document's root element when a view transition with a specified type is active. It allows you to apply different styles and animations depending on the kind of transition taking place.

:active-view-transition-type() Syntax

:root:active-view-transition-type(type-name) {
  property: value;
}

The pseudo-class accepts one or more comma-separated custom identifiers that represent view transition types. These names are chosen by the developer and must match the types assigned to the active transition.

Syntax Examples

:root:active-view-transition-type(forwards) {
  background-color: #eef5ff;
}
:root:active-view-transition-type(backwards) {
  background-color: #fff3e6;
}

The first rule matches a transition with the type forwards. The second matches one with the type backwards.

Names such as forwards, backwards, slide, and fade are examples of developer-defined types, not special built-in transition modes.

How :active-view-transition-type() Works

A view transition can have one or more types assigned to it. The :active-view-transition-type() pseudo-class checks those types while the transition is active.

The pseudo-class matches the root element of the document only when at least one of its specified type names is present in the active transition's type set.

Unlike :active-view-transition, which matches any active view transition, this functional pseudo-class allows CSS to distinguish between different transition purposes.

Important Characteristics

• It matches the document root, normally the <html> element.
• It requires an active view transition with at least one matching type.
• The type names are custom identifiers chosen by the developer.
• It does not start a view transition or automatically create an animation.
• It can be combined with other selectors and view transition pseudo-elements.
• It stops matching when the transition is no longer active.

Assigning Transition Types

For same-document view transitions, use the types option of document.startViewTransition() to assign one or more names.

JavaScript

document.startViewTransition({
  update: () => {
    panel.classList.toggle("alternate");
  },
  types: ["forwards"]
});

This starts a view transition with the type forwards. During the transition, CSS rules using :active-view-transition-type(forwards) can match.

Another action can use a different type without changing the selector structure.

document.startViewTransition({
  update: () => {
    panel.classList.toggle("alternate");
  },
  types: ["backwards"]
});

The type name describes the transition's purpose. It does not automatically determine the animation direction. CSS must define the desired visual effect.

Changing Active Types

The ViewTransition object provides a types property that can be used to inspect or modify the active type set.

const transition = document.startViewTransition({
  update: () => {
    panel.classList.toggle("alternate");
  },
  types: ["forwards"]
});
transition.types.add("highlight");

This adds highlight to the transition's type set. CSS can then match either forwards or highlight while those types remain active.

Matching Multiple Types

The pseudo-class supports multiple type names in a comma-separated list. The selector matches if at least one of the specified types is active.

Matching Either Type

:root:active-view-transition-type(forwards, backwards) .status {
  color: #0066cc;
}

This rule matches when the active transition has the type forwards, backwards, or both. The comma-separated arguments work like an OR condition.

Requiring Both Types

:root:active-view-transition-type(slide):active-view-transition-type(forwards) .status {
  font-weight: bold;
}

Chaining the pseudo-class requires both slide and forwards to be present in the active type set. This works like an AND condition.

Cross-Document Transitions

For eligible cross-document transitions, the @view-transition at-rule can enable navigation transitions and assign transition types.

CSS

@view-transition {
  navigation: auto;
  types: slide;
}
:root:active-view-transition-type(slide) {
  background-color: #eef5ff;
}

When a qualifying same-origin navigation uses the slide type, the selector can apply the matching style during the transition.

Both participating documents must satisfy the browser's requirements for cross-document view transitions. The type configuration can also be managed through JavaScript for more advanced navigation behavior.

Unlike the JavaScript types array, the @view-transition descriptor uses space-separated identifiers when assigning multiple types.

Best Practices

• Choose descriptive type names such as forwards, backwards, or highlight.
• Use :active-view-transition for styles shared by all transitions and :active-view-transition-type() for type-specific styles.
• Remember that assigning a type does not automatically create a particular animation.
• Use named view transition pseudo-elements when different content needs separate animation effects.
• Provide a fallback when the View Transition API or transition types are unsupported.
• Respect prefers-reduced-motion when defining custom animations.
• Test type matching and transition behavior in the browsers your site supports.

:active-view-transition-type() Example

This example demonstrates two buttons that start view transitions with different types. The panel changes color, while CSS uses the active type to determine the animation direction.

HTML

<div class="color-panel" id="color-panel">
  <p>Transition Type Example</p>
</div>
<button id="forward-button" type="button">Forward</button>
<button id="back-button" type="button">Backward</button>

CSS

.color-panel {
  padding: 20px;
  background-color: #0066cc;
  color: #fff;
  text-align: center;
  view-transition-name: demo-panel;
}
.color-panel.alternate {
  background-color: #008060;
}
:root:active-view-transition-type(forwards)::view-transition-new(demo-panel) {
  animation: slide-in-right 0.8s ease both;
}
:root:active-view-transition-type(backwards)::view-transition-new(demo-panel) {
  animation: slide-in-left 0.8s ease both;
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

JavaScript

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

function changePanel(type) {
  const update = () => {
    panel.classList.toggle("alternate");
  };
  if (document.startViewTransition) {
    document.startViewTransition({
      update,
      types: [type]
    });
  } else {
    update();
  }
}
document.querySelector("#forward-button").addEventListener("click", () =&t; {
  changePanel("forwards");
});
document.querySelector("#back-button").addEventListener("click", () => {
  changePanel("backwards");
});

Browser Result

Click Forward or Backward to change the panel color. In supporting browsers, the new panel slides in from the corresponding direction. Browsers without transition-type support may show the default transition or an immediate color change.

Play in Editor

Browser Support

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

Specifications

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

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