别称 Clip-path circle expand, Theme toggle reveal
新视图在一个从点击位置向外扩展的圆形中显现。
适用场景
深色/浅色主题切换、页面切换
在[应用位置]添加“圆形显现”(Circular Reveal)过渡，也叫 clip-path circle expand 或 theme toggle reveal。
新视图在一个从被按下的控件处向外扩展的圆形中出现，直到覆盖整个区域：平滑、匀稳，起止都要缓和。
圆形要正好从按下控件的位置开始；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不用圆形，直接切换。别称 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
旧页面淡出的同时，新页面在同一区域淡入。
适用场景
默认的路由切换
在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。别称 Page wipe, Curtain reveal, Stripe transition, Staggered panels
实色面板扫过屏幕遮住旧页面，随后收回，露出新页面。
适用场景
作品集和设计公司网站的页面跳转
在[应用位置]添加“幕布擦除”(Curtain / Panel Wipe)页面过渡，也叫 page wipe 或 staggered panels。
实色面板依次扫入，遮住旧页面；页面在完全被遮住时切换，然后面板继续移出视野，露出新页面：大胆而流畅。
面板遮住旧页面之前绝不能露出新页面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。别称 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
旧内容先完全淡出，新内容再带着轻微缩放淡入。
适用场景
在互不相关的页面之间切换
在[应用位置]添加“淡出淡入”(Fade Through)页面过渡，也叫 fade-through transition 或 out-in route transition。
旧内容先快速、完全地淡出，然后新内容一边微微放大到位一边淡入。
两者绝不能重叠，新内容放大时布局也不能发生位移。别称 Splash screen, Intro loader
带有 Logo 或计数器的全屏开场层滑走或淡出，露出网站。
适用场景
网站首次加载
在[应用位置]添加“开屏加载揭幕”(Preloader Curtain Lift)，也叫 splash screen 或 intro loader。
全屏开场层在加载条填满期间保持不动，然后平滑地向上滑走，露出下方轻柔落定的网站。
只在首次加载时播放，停留时间绝不能超过实际加载所需；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接跳过。别称 Shared axis X/Y/Z
旧内容和新内容沿 X、Y 或 Z 轴一起移动并伴随淡入淡出，以表现空间关系。
适用场景
分步流程、同级导航、逐层深入
在[应用位置]添加“共享轴”(Shared Axis)页面过渡，也叫 shared axis X/Y/Z。
前进时，旧内容向一侧滑动一小段并快速淡出，新内容从另一侧滑入并紧随其后淡入；后退时方向相反。
位移要短，只需暗示方向；轴向要与导航对应：同级用横向，分步用纵向，逐层深入用纵深方向。别称 Hero transition, View Transition shared element, view-transition-name morph
对应的元素（例如缩略图）在页面之间变换位置和大小。
适用场景
从缩略图进入详情页
在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。别称 Push / pop, Directional slide, Slide-over route
新页面从一侧滑入，旧页面同时滑出，方向跟随导航层级。
适用场景
移动端风格的前进/返回导航
在[应用位置]添加“页面滑动过渡”(Slide Page Transition)，也叫 push / pop 或 directional slide。
前进时，新页面从侧边推入，旧页面从另一侧滑出；后退时两者反向移动：平滑，起止都要缓和。
方向要与导航层级对应，包括浏览器的返回按钮；滑动过程中页面不能出现横向滚动。别称 Scale transition, Zoom in / out
旧页面放大或缩小并淡出，新页面同时缩放到位。
适用场景
在层级中深入或返回
在[应用位置]添加“页面缩放过渡”(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入时，旧页面微微放大并淡出，新页面从稍小的尺寸放大到位；返回时反向缩小：平滑、迅速。
缩放幅度要含蓄，保证内容全程可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。