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.
Quick 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;
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
Animation type
discrete
Values
nonematch-element 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.
Works in all modern browsers. May need a fallback for older browsers.
111+
144+
18+
111+