view-transition-class
Allows you to apply names or 'classes' to specific view transitions. This makes it easier to target groups of elements with the same transition effects, rather than having to define them individually for every single element.
Quick example
.product-card {
/* Assigns a class name to this specific transition group */
view-transition-class: product-fade;
}
::view-transition-group(.product-fade) {
animation-duration: 0.5s;
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
Animation type
discrete
Values
none view-transition-class Browser Support
Newly available Since 2025 84% global usage
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
125+
144+
18.2+
125+