Shared Element Transition (共享元素轉場)
別稱 Hero transition, View Transition shared element, view-transition-name morph
對應的元素（例如縮圖）在頁面之間變換位置和大小。
適用情境
從縮圖進入詳細頁
變體
- same-document
- cross-document
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「共享元素轉場」(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。相似的動效
BC
A
A
點擊試試
Container Transform (容器轉換)
別稱 Card expand to detail, Expandable card, Morph card to page
卡片展開成完整的詳細畫面，始終是同一個可見容器在改變形狀並顯示新內容。
適用情境
清單卡片到詳細頁、浮動按鈕到面板
在[套用位置]加入「容器轉換」(Container Transform) 轉場，也叫卡片展開到詳細頁 (card expand to detail) 或可展開卡片 (expandable card)。
開啟卡片時，同一個容器平順地擴展成完整的詳細畫面：舊內容迅速淡出，容器快要展開完時新內容再淡入；關閉時反向播放。
始終維持一個連續的容器，而不是在兩個獨立的方框之間交叉淡化；開啟後把焦點移到詳細畫面裡。ACB
點擊試試
Shared Layout Animation (共享版面動畫)
別稱 layoutId, Shared element (in-page)
元素彷彿移動並縮放到新位置上對應的元素，看起來是同一個物件。
適用情境
選取反白、縮圖到展開檢視
在[套用位置]加入「共享版面動畫」(Shared Layout Animation)，也叫頁面內共享元素 (in-page shared element)。
選取項目改變時，元素要從舊位置平順地移動並縮放到新位置，輕柔地就定位，讓人看出這是同一個物件而不是兩個。
任何時刻只顯示一份，移動過程中不要讓周圍版面跳動。A
B
C
點擊試試
Lightbox Zoom (燈箱縮放)
別稱 Image zoom overlay, Medium-style zoom
縮圖從原位置放大，在變暗的背景上置中顯示為大圖。
適用情境
圖庫、文章
在[套用位置]加入「燈箱縮放」(Lightbox Zoom)，也叫 image zoom overlay 或 Medium-style zoom。
點擊縮圖時，它從原位置平順放大成置中的大圖，背後的頁面隨之變暗退後；關閉時再縮回原本的位置。
支援按 Esc 或點擊背景關閉；開啟期間把焦點移到大圖檢視內，關閉後把焦點還給縮圖。- A
- B
- C
- D
- E
- F
點擊試試
FLIP Layout Animation (FLIP 版面動畫)
別稱 Layout animation, First-Last-Invert-Play
版面變動後，元素平順地移動到新的位置和尺寸。
適用情境
篩選網格、重新排列的清單
在[套用位置]加入「FLIP 版面動畫」(FLIP Layout Animation)，也叫版面動畫 (layout animation) 或 First-Last-Invert-Play。
版面變動時，每個元素從舊位置平順移動到新位置，而不是直接跳過去：一開始快，最後輕柔地定位。
只用 transform 做動畫，避免頁面每一格都重新排版；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換到新版面。Page Transition 中的其他動效
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
點擊試試
Circular Reveal (圓形顯現)
別稱 Clip-path circle expand, Theme toggle reveal
新畫面在一個從點擊位置向外擴展的圓形中顯現。
適用情境
深色/淺色主題切換、頁面切換
在[套用位置]加入「圓形顯現」(Circular Reveal) 轉場，也叫 clip-path circle expand 或 theme toggle reveal。
新畫面在一個從被按下的控制項處向外擴展的圓形中出現，直到覆蓋整個區域：平順、穩定，起止都要和緩。
圓形要正好從按下控制項的位置開始；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不用圓形、直接切換。