List Item Enter/Exit (清單項目進出場)
別稱 AnimatePresence, TransitionGroup, Animated list
清單項目新增時淡入並滑入，刪除時以動畫退場，相鄰項目隨之補上空位。
適用情境
待辦清單、通知、購物車商品
變體
- fade + slide
- height collapse
- staggered entrance
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「清單項目進出場」(List Item Enter/Exit) 動畫，也叫動畫清單 (animated list)。
新項目先撐開自己的空間，再淡入並滑入；被刪除的項目先淡出，再收合高度，讓相鄰項目平順地補上空位。
被刪除的項目要等退場動畫結束後才移除，這樣新增或刪除項目時清單才不會跳動。相似的動效
- 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
- E
- F
- G
- H
點擊試試
Masonry / Grid Shuffle (網格重排)
別稱 Isotope filter, Filterable grid animation
套用篩選或排序時，網格中的方塊重新排列、淡出或滑到新的位置。
適用情境
作品集篩選、圖庫
在[套用位置]加入「網格重排」(Masonry / Grid Shuffle) 效果，也叫可篩選網格動畫 (filterable grid animation)。
套用篩選時，不再符合的方塊在原地縮小並淡出，其餘方塊平順地滑到新位置；清除篩選時反向播放。
網格高度變化時不要讓周圍頁面跳動；篩選控制項要用真正的按鈕，並標示目前選取的是哪個篩選。Stagger (交錯動畫)
別稱 Staggered Animation, Cascade
一組元素依序以微小的時間差播放動畫，形成波浪般的效果，而不是同時出現。
適用情境
清單、網格、導覽選單和搜尋結果
在[套用位置]加入「交錯動畫」(Stagger)，也叫 staggered animation 或級聯 (cascade)。
讓各項以短而均勻的間隔依序上浮出現，整體看起來像一道快速的波浪，而不是同時出現。
即使清單很長也要讓整個過程保持簡短；捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。拖曳試試
Swipe to Delete (滑動刪除)
別稱 Swipe actions, Swipe to reveal
橫向滑動清單列，露出刪除或封存等操作按鈕。
適用情境
郵件清單、待辦清單
在[套用位置]加入「滑動刪除」(Swipe to Delete) 互動，也叫 swipe actions 或 swipe to reveal。
橫向拖曳某一列時，它直接跟著手指移動，露出後方的封存、刪除等操作按鈕，按鈕完全露出後停住；放開後平順地滑到定位，不要回彈。
橫向滑動時仍要確保垂直捲動可用，並讓鍵盤和螢幕閱讀器使用者不必滑動也能執行相同操作。Component & Layout 中的其他動效
- 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)，就停止捲動。A
Modal Scale-Fade In (對話框縮放淡入)
別稱 Dialog open animation, Zoom-fade dialog
對話框在變暗的頁面上方，從中心稍微放大並淡入。
適用情境
確認對話框、浮層中的表單
在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫，也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時，對話框從中心稍微放大並淡入：快速、含蓄，不要回彈。
每次開啟對話框都播放一次，把焦點移進對話框並留在裡面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，只用簡單的淡入。