Shared Axis (共享軸轉場)
別稱 Shared axis X/Y/Z
舊內容和新內容沿 X、Y 或 Z 軸一起移動並伴隨淡入淡出，以表現空間關係。
適用情境
分步流程、同層導覽、逐層深入
變體
- X axis
- Y axis
- Z axis
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「共享軸轉場」(Shared Axis) 頁面轉場，也叫 shared axis X/Y/Z。
前進時，舊內容向一側滑動一小段並快速淡出，新內容從另一側滑入並緊接著淡入；返回時方向相反。
位移要短，只需暗示方向；軸向要與導覽對應：同層用橫向，分步用縱向，逐層深入用縱深方向。相似的動效
A
B
點擊試試
Slide Page Transition (滑動轉場)
別稱 Push / pop, Directional slide, Slide-over route
新頁面從一側滑入，舊頁面同時滑出，方向跟隨導覽層級。
適用情境
行動 App 風格的前進/返回導覽
在[套用位置]加入「滑動轉場」(Slide Page Transition)，也叫 push / pop 或 directional slide。
前進時，新頁面從側邊推入，舊頁面從另一側滑出；返回時兩者反向移動：平順，起止都要和緩。
方向要與導覽層級對應，包括瀏覽器的上一頁按鈕；滑動過程中頁面不能出現橫向捲動。A
B
點擊試試
Zoom Page Transition (縮放轉場)
別稱 Scale transition, Zoom in / out
舊頁面放大或縮小並淡出，新頁面同時縮放到位。
適用情境
在層級中深入或返回
在[套用位置]加入「縮放轉場」(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入時，舊頁面微微放大並淡出，新頁面從稍小的尺寸放大到位；返回時反向縮小：平順、快速。
縮放幅度要含蓄，確保內容全程可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。A
B
點擊試試
Crossfade Page Transition (交叉淡化轉場)
別稱 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。
切換頁面時，舊頁面淡出，新頁面同時在同一區域淡入：柔和，而且相當快。
讓兩個頁面保持在同一位置，淡化過程中不能有任何位移；切換後把焦點移到新頁面的主標題上。A
B
點擊試試
Fade Through (淡出再淡入)
別稱 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
舊內容先完全淡出，新內容再帶著輕微縮放淡入。
適用情境
在彼此無關的頁面之間切換
在[套用位置]加入「淡出再淡入」(Fade Through) 頁面轉場，也叫 fade-through transition 或 out-in route transition。
舊內容先快速、完全地淡出，接著新內容一邊微微放大到位一邊淡入。
兩者絕不能重疊，新內容放大時版面也不能位移。Page Transition 中的其他動效
BC
A
點擊試試
Shared Element Transition (共享元素轉場)
別稱 Hero transition, View Transition shared element, view-transition-name morph
對應的元素（例如縮圖）在頁面之間變換位置和大小。
適用情境
從縮圖進入詳細頁
在[套用位置]加入「共享元素轉場」(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。