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.
It is documented as part of the CSS View Transitions specification.
Syntax
/* Usage 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;
}
/* Syntax */
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;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.
125+
144+
18.2+
125+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more