::view-transition-new
Targets the 'new' state's snapshot in a view transition. This is the image of how the element looks AFTER the change, allowing you to specifically animate how it fades in.
Quick example
::view-transition-new(main-header) {
/* Makes the new header slide in from the top instead of just fading in */
animation: slide-down 0.5s ease-out;
}::view-transition-new Browser Support
Newly available Since 2025 91% 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.
109+
144+
18+
109+