Newly available Useful when view-transition-class improves perceived continuity or state change, but motion should remain optional and purposeful.

view-transition-class

The view-transition-class CSS property provides the selected elements with an identifying class (a <custom-ident>), providing an additional method of styling the view transitions for those elements.

Animation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
view-transition-class
125
125
144
18.2
125
18.2
none
125
125
144
18.2
125
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.card {
  view-transition-class: card-transition;
}
::view-transition-group(*.card-transition) {
  animation-duration: 0.3s;
}

Live demo

cardtransitionclass

CSS cardtransitionclass demo.

PreviewFullscreen

sameclass. by card

CSS sameclass. by card demo.

PreviewFullscreen

grouptransition

CSS grouptransition demo.

PreviewFullscreen

Use cases

  • State transitions

    Use view-transition-class to clarify UI changes such as opening, reordering, or page transitions.

  • Polished feedback

    Add motion only where it reinforces direction, hierarchy, or system response.

Cautions

  • Motion features can quickly become distracting if they are applied too broadly.
  • Keep animation rules paired with sensible non-animated fallbacks.

Accessibility

  • Respect reduced-motion preferences and keep essential information available without animation.
  • Motion should support understanding, not become a barrier to interaction.

Related links