Drawer Slide (抽屜滑動)
別稱 Off-canvas, Side sheet, Slide-over, Navigation drawer
側邊面板從左、右或頂部邊緣滑入，推開或覆蓋頁面內容。
適用情境
行動版導覽、設定面板、購物車
變體
- overlay
- push content
- left / right / top edge
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「抽屜滑動」(Drawer Slide)，也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方，同時後方頁面變暗，速度快、平順減速；關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面，可以用 Escape 鍵或點擊變暗區域關閉，關閉後把焦點還給開啟它的按鈕。相似的動效
A
Bottom Sheet Slide-Up (底部面板上滑)
別稱 Bottom drawer, Sheet
面板從底部邊緣向上滑出，通常可以拖曳，並吸附到幾個固定高度。
適用情境
行動版操作、分享選單、篩選
在[套用位置]加入「底部面板上滑」(Bottom Sheet Slide-Up)，也叫底部抽屜 (bottom drawer) 或面板 (sheet)。
面板從底部邊緣向上滑出，同時後方頁面變暗，平順減速停到定位，不要回彈。
每次開啟面板都播放一次，關閉時再滑回下方；面板開啟期間，鍵盤焦點要留在面板內。A
Slide In (滑入)
別稱 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素從容器邊緣之外滑入到停靠位置，不帶淡入效果。
適用情境
抽屜、側邊面板、橫幅
在[套用位置]加入「滑入」(Slide In) 進場動畫，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素從容器邊緣之外滑到停靠位置，全程保持完全不透明：快速，平順減速，不要回彈。
在容器邊緣處裁切，避免它在外面時蓋住相鄰元素或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示。A
B
點擊試試
Slide Page Transition (滑動轉場)
別稱 Push / pop, Directional slide, Slide-over route
新頁面從一側滑入，舊頁面同時滑出，方向跟隨導覽層級。
適用情境
行動 App 風格的前進/返回導覽
在[套用位置]加入「滑動轉場」(Slide Page Transition)，也叫 push / pop 或 directional slide。
前進時，新頁面從側邊推入，舊頁面從另一側滑出；返回時兩者反向移動：平順，起止都要和緩。
方向要與導覽層級對應，包括瀏覽器的上一頁按鈕；滑動過程中頁面不能出現橫向捲動。A
Backdrop Scrim Fade (背景遮罩淡入)
別稱 Overlay fade, Scrim
一層半透明的深色遮罩在浮層後方淡入，讓頁面變暗。
適用情境
對話框、抽屜、底部面板的背後
在[套用位置]加入「背景遮罩淡入」(Backdrop Scrim Fade)，也叫浮層淡入 (overlay fade) 或遮罩 (scrim)。
浮層開啟時，一層半透明的深色遮罩在後方頁面上柔和地淡入，比浮層本身稍慢一點；關閉時再淡出。
不論淺色或深色主題，遮罩都維持深色；遮罩顯示期間，後方頁面不能捲動，也不能接收點擊。Component & Layout 中的其他動效
- 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)，就直接切換到新版面。- A
- B
- C
- D
點擊試試
List Item Enter/Exit (清單項目進出場)
別稱 AnimatePresence, TransitionGroup, Animated list
清單項目新增時淡入並滑入，刪除時以動畫退場，相鄰項目隨之補上空位。
適用情境
待辦清單、通知、購物車商品
在[套用位置]加入「清單項目進出場」(List Item Enter/Exit) 動畫，也叫動畫清單 (animated list)。
新項目先撐開自己的空間，再淡入並滑入；被刪除的項目先淡出，再收合高度，讓相鄰項目平順地補上空位。
被刪除的項目要等退場動畫結束後才移除，這樣新增或刪除項目時清單才不會跳動。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (跑馬燈)
別稱 Ticker, Infinite Scroll Text
一行內容橫向無縫地無限循環捲動。
適用情境
Logo 牆、公告列、關鍵字橫幅和新聞跑馬燈
在[套用位置]加入「跑馬燈」(Marquee)，也就是水平方向無限捲動的橫條，也叫 ticker。
內容由右往左以緩慢、等速的速度捲動，無縫循環，銜接處不能出現跳動。
滑鼠移上去時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止捲動。