::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.
Syntax
/* Usage 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.
109+
144+
18+
109+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more