Scroll · Moves as you scroll
View transition视图转场
- holistic
- native
- economical
The browser snapshots the view before and after a change and automatically fills the difference between the two snapshots with an animation.
When to use it
Use it when a whole page or several blocks change at once and you do not want to hand-animate each element; for precise control of one element, use “Shared element transition”.
Parameters
view-transition-name · ::view-transition-old / new · 300ms ease-in-out
Recipe
View transition → 300ms ease-in-outView transition → ::view-transition-old / new
One sentence for your AI
Use the View Transitions API for this page change: give key elements a view-transition-name and set 300ms ease-in-out on ::view-transition-old and ::view-transition-new.