view-transition-class | Frontend Practical Guide

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

Overview

The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS cardtransitionclass demo.

CSS sameclass. by card demo.

CSS grouptransition demo.

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.