view-transition-name
The core property for enabling view transitions on specific elements. By giving an element a 'view-transition-name', the browser will automatically track its position and size across page changes and animate the difference.
It is documented as part of the CSS View Transitions specification.
Syntax
/* Usage Example */
.card-thumbnail {
/* Tells the browser this element is the same one that appears on the product detail page */
view-transition-name: product-thumb-123;
}
/* Syntax */
view-transition-name: none;
view-transition-name: match-element;
/* Global values */
view-transition-name: inherit;
view-transition-name: initial;
view-transition-name: revert;
view-transition-name: revert-layer;
view-transition-name: unset;view-transition-name Browser support
Newly available
Since
2025 89% global usage
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
111+
144+
18+
111+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more