Page Transition

新畫面在一個從點擊位置向外擴展的圓形中顯現。

在[套用位置]加入「圓形顯現」(Circular Reveal) 轉場，也叫 clip-path circle expand 或 theme toggle reveal。
新畫面在一個從被按下的控制項處向外擴展的圓形中出現，直到覆蓋整個區域：平順、穩定，起止都要和緩。
圓形要正好從按下控制項的位置開始；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不用圓形、直接切換。

舊頁面淡出的同時，新頁面在同一區域淡入。

在[套用位置]加入「交叉淡化轉場」(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
切換頁面時，舊頁面淡出，新頁面同時在同一區域淡入：柔和，而且相當快。
讓兩個頁面保持在同一位置，淡化過程中不能有任何位移；切換後把焦點移到新頁面的主標題上。

實色面板掃過螢幕遮住舊頁面，隨後收回，露出新頁面。

在[套用位置]加入「布幕擦除轉場」(Curtain / Panel Wipe) 頁面轉場，也叫 page wipe 或 staggered panels。
實色面板依序掃入，遮住舊頁面；頁面在完全被遮住時切換，接著面板繼續移出畫面，露出新頁面：大膽而流暢。
面板遮住舊頁面之前絕不能露出新頁面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。

舊內容先完全淡出，新內容再帶著輕微縮放淡入。

在[套用位置]加入「淡出再淡入」(Fade Through) 頁面轉場，也叫 fade-through transition 或 out-in route transition。
舊內容先快速、完全地淡出，接著新內容一邊微微放大到位一邊淡入。
兩者絕不能重疊，新內容放大時版面也不能位移。

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

新頁面從一側滑入，舊頁面同時滑出，方向跟隨導覽層級。

在[套用位置]加入「滑動轉場」(Slide Page Transition)，也叫 push / pop 或 directional slide。
前進時，新頁面從側邊推入，舊頁面從另一側滑出；返回時兩者反向移動：平順，起止都要和緩。
方向要與導覽層級對應，包括瀏覽器的上一頁按鈕；滑動過程中頁面不能出現橫向捲動。

舊頁面放大或縮小並淡出，新頁面同時縮放到位。

在[套用位置]加入「縮放轉場」(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入時，舊頁面微微放大並淡出，新頁面從稍小的尺寸放大到位；返回時反向縮小：平順、快速。
縮放幅度要含蓄，確保內容全程可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。