view-transition-class CSS property

Syntax

/* <custom-ident> value examples */
view-transition-class: card;

/* Keyword value */
view-transition-class: none;

/* Global values */
view-transition-class: inherit;
view-transition-class: initial;
view-transition-class: revert;
view-transition-class: revert-layer;
view-transition-class: unset;

Values

<custom-ident>

An identifying name that causes the selected element to participate in a separate view transition from the root view transition. The identifier must be unique. If two rendered elements have the same view-transition-name at the same time, ViewTransition.ready will reject and the transition will be skipped.

none

No class would apply to the named view transition pseudo-elements generated for this element.

Description

The view-transition-class value provides a styling hook, similar to a CSS class name, which can be used to apply the same styles to multiple view transition pseudo-elements. It does not mark an element for capturing. Each individual element still needs its own unique view-transition-name; the view-transition-class is only used as an additional way to style elements that already have a view-transition-name. Support for determining the view-transition-name automatically is being discussed in the CSS View Transitions Module Level 2 spec.

The view-transition-class apply styles using the view transition pseudo-elements, including ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), and ::view-transition-new(). This is different from the view-transition-name, which matches view transitions between the element in the old state with its corresponding element in the new state.

Until the view-transition-class property is fully supported in all browsers supporting view transitions, include a custom ::view-transition-group() for each element.

Formal definition

Formal syntax

view-transition-class = 
  none             |
  <custom-ident>+  

Examples

::view-transition-group(.fast-card-slide) {
  animation-duration: 3s;
}

.product {
  view-transition-class: fast-card-slide;
}

.product#card1 {
  view-transition-name: show-card;
}

.product#card2 {
  view-transition-name: hide-card;
}

Specifications

Browser compatibility

See also

• view-transition-name
• Using the View Transition API guide
• View Transition API
• Smooth transitions with the View Transition API