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。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。