Circular Reveal (圓形顯現)
別稱 Clip-path circle expand, Theme toggle reveal
新畫面在一個從點擊位置向外擴展的圓形中顯現。
適用情境
深色/淺色主題切換、頁面切換
變體
- expand from click
- expand from center
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「圓形顯現」(Circular Reveal) 轉場，也叫 clip-path circle expand 或 theme toggle reveal。
新畫面在一個從被按下的控制項處向外擴展的圓形中出現，直到覆蓋整個區域：平順、穩定，起止都要和緩。
圓形要正好從按下控制項的位置開始；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不用圓形、直接切換。相似的動效
A
將滑鼠移到上面
Radial Fill (圓形填充)
別稱 Circle expand
游標懸停時一個彩色圓形從中心放大或往中心收縮，填滿元素。
適用情境
按鈕
在[套用位置]加入「圓形填充」(Radial Fill) 懸停效果，也叫 circle expand。
新顏色的圓形從中心流暢地放大到填滿元素，游標移開後再縮回中心，同時文字顏色隨之切換，保持清楚易讀。
圓形要裁切在元素形狀之內，文字位在它上方；鍵盤聚焦時也顯示同樣的效果。點擊試試
Ripple (漣漪效果)
別稱 Material ripple, Touch ripple, Ripple Button, Ink ripple
圓形漣漪從點擊或輕觸的確切位置擴散開並淡出。
適用情境
按鈕、清單項目
在[套用位置]加入「漣漪效果」(Ripple)，也叫 material ripple 或 ink ripple。
每次點擊或輕觸時，一圈柔和的圓形漣漪從按下的確切位置向外擴散，直到覆蓋整個元素，邊擴散邊淡出：快速、輕盈。
漣漪要依元素的形狀裁切，快速連續按下時每次都產生新的漣漪，用鍵盤按下時從中心開始擴散。A
Clip Reveal (裁切顯現)
別稱 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path 或遮罩從邊緣或某一點展開，逐步露出圖片或文字。
適用情境
圖片和標題的顯現
在[套用位置]加入「裁切顯現」(Clip Reveal) 進場效果，也叫 mask reveal、wipe reveal 或 image reveal。
讓裁切邊緣由左往右掃過，內容保持不動、逐步顯露出來：流暢，開始和結束都要柔和。
從一開始就為元素保留空間，避免版面移動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接完整顯示。Page Transition 中的其他動效
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
點擊試試
Curtain / Panel Wipe (布幕擦除轉場)
別稱 Page wipe, Curtain reveal, Stripe transition, Staggered panels
實色面板掃過螢幕遮住舊頁面，隨後收回，露出新頁面。
適用情境
作品集和設計公司網站的頁面切換
在[套用位置]加入「布幕擦除轉場」(Curtain / Panel Wipe) 頁面轉場，也叫 page wipe 或 staggered panels。
實色面板依序掃入，遮住舊頁面；頁面在完全被遮住時切換，接著面板繼續移出畫面，露出新頁面：大膽而流暢。
面板遮住舊頁面之前絕不能露出新頁面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。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。
舊內容先快速、完全地淡出，接著新內容一邊微微放大到位一邊淡入。
兩者絕不能重疊，新內容放大時版面也不能位移。