Fade Through (淡出淡入)

旧页面淡出的同时，新页面在同一区域淡入。

在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。

幻灯片停在原处，彼此交叉淡化切换，而不是滑动。

在[应用位置]添加“轮播交叉淡化”(Carousel Crossfade)，也叫淡入淡出幻灯片(fade slideshow)或轮播淡化(carousel fade)。
幻灯片停在原处，缓慢地交叉淡化：旧的一张淡出的同时，下一张淡入，然后停留几秒再切换到下一张。
无缝循环回到第一张，鼠标悬停或获得焦点时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，不要自动切换。

元素在原位从完全透明变为完全不透明，离开时则反过来。

在[应用位置]添加“淡入淡出”(Fade In / Fade Out)动画，也叫 fade。
元素出现时在原位从完全透明变为完全可见，离开时以同样方式淡出：柔和，不要位移或缩放。
淡出后要确保它无法再被点击或通过键盘聚焦；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则瞬间切换。

旧页面放大或缩小并淡出，新页面同时缩放到位。

在[应用位置]添加“页面缩放过渡”(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入时，旧页面微微放大并淡出，新页面从稍小的尺寸放大到位；返回时反向缩小：平滑、迅速。
缩放幅度要含蓄，保证内容全程可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

带有 Logo 或计数器的全屏开场层滑走或淡出，露出网站。

在[应用位置]添加“开屏加载揭幕”(Preloader Curtain Lift)，也叫 splash screen 或 intro loader。
全屏开场层在加载条填满期间保持不动，然后平滑地向上滑走，露出下方轻柔落定的网站。
只在首次加载时播放，停留时间绝不能超过实际加载所需；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接跳过。

旧内容和新内容沿 X、Y 或 Z 轴一起移动并伴随淡入淡出，以表现空间关系。

在[应用位置]添加“共享轴”(Shared Axis)页面过渡，也叫 shared axis X/Y/Z。
前进时，旧内容向一侧滑动一小段并快速淡出，新内容从另一侧滑入并紧随其后淡入；后退时方向相反。
位移要短，只需暗示方向；轴向要与导航对应：同级用横向，分步用纵向，逐层深入用纵深方向。

对应的元素（例如缩略图）在页面之间变换位置和大小。

在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。