Fade In / Fade Out (淡入/淡出)
別稱 Fade
元素在原位從完全透明變為完全不透明，離開時則反過來。
適用情境
彈出視窗、快顯通知和頁面內容的出現
變體
- in
- out
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「淡入/淡出」(Fade In / Fade Out) 動畫，也叫 fade。
元素出現時在原位從完全透明變為完全可見，離開時以同樣方式淡出：柔和，不要位移或縮放。
淡出後要確保它無法再被點擊或用鍵盤聚焦；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就瞬間切換。相似的動效
ABCD
Blur In (模糊入場)
別稱 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素從嚴重模糊的狀態逐漸變清晰，常伴隨滑入或淡入。
適用情境
標題和首頁主視覺文字的顯現
在[套用位置]加入「模糊入場」(Blur In) 進場動畫，也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始，在原地逐漸變清晰：柔和、偏慢，沒有位移。
只播放一次；如果使用者開啟了「減少動態效果」(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。
舊內容先快速、完全地淡出，接著新內容一邊微微放大到位一邊淡入。
兩者絕不能重疊，新內容放大時版面也不能位移。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。
切換頁面時，舊頁面淡出，新頁面同時在同一區域淡入：柔和，而且相當快。
讓兩個頁面保持在同一位置，淡化過程中不能有任何位移；切換後把焦點移到新頁面的主標題上。Fade Up (上浮淡入)
別稱 Fade In Up, Reveal on Scroll
元素在淡入的同時向上移動一小段距離，彷彿落到自己的位置上。
適用情境
捲動時出現的章節標題、卡片和圖片
在[套用位置]加入「上浮淡入」(Fade Up) 進場動畫，也叫 fade-in-up 或捲動顯現 (reveal on scroll)。
元素第一次捲動進入畫面時，一邊輕微上移一邊淡入：要含蓄、快速，不要有彈跳感。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。Entrance & Exit 中的其他動效
A
Fade In Directional (方向淡入)
別稱 Fade In Down, Fade In Left, Fade In Right
元素從一側移動一小段距離到最終位置，同時淡入。
適用情境
載入或捲動時出現的區塊和卡片
在[套用位置]加入「方向淡入」(Fade In Directional) 進場動畫，也叫 fade in left、fade in right 或 fade in down。
元素從一側移動一小段距離到最終位置，同時淡入：快速流暢，到位時減速，不要彈跳。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。A
Fade Out Directional (方向淡出)
別稱 Fade Out Up, Fade Out Down
元素朝一個方向移開，同時淡出。
適用情境
關閉通知和卡片
在[套用位置]加入「方向淡出」(Fade Out Directional) 退場動畫，也叫 fade out up 或 fade out down。
元素朝一個方向移動一小段距離並淡出：快速，離開時逐漸加速。
等淡出結束後再將它從版面中移除，避免相鄰內容提前跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。