Success Checkmark (成功打勾)
別稱 Animated success tick
圓圈和勾號自行畫出，確認操作已成功。
適用情境
表單送出、付款完成
變體
- SVG stroke draw
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「成功打勾」(Success Checkmark) 動畫，也叫 animated success tick。
先用一筆流暢的線條畫出圓圈，接著在圓圈內畫出勾號，整個圖示再輕輕彈一下：沉穩、篤定。
操作成功時只播放一次，搭配螢幕閱讀器能唸出的文字訊息；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的圖示。相似的動效
點擊試試
Checkbox Check Draw (核取方塊打勾)
別稱 Animated checkbox, Checkmark draw
勾選時，方塊內的勾號一筆一筆地畫出來。
適用情境
表單、待辦清單
在[套用位置]加入「核取方塊打勾」(Checkbox Check Draw) 動畫，也叫動畫核取方塊 (animated checkbox) 或勾號繪製 (checkmark draw)。
勾選時，方塊填滿顏色，勾號以一筆快速流暢的線條自己畫出來；取消勾選時以同樣方式擦除。
保持它是帶有勾選狀態的真正核取方塊，可以用鍵盤操作，並有清楚可見的焦點框。Line Drawing (線條繪製)
別稱 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
透過替虛線偏移加上動畫，讓 SVG 描邊看起來沿著路徑被畫出來。
適用情境
圖示、Logo 和插畫
在[套用位置]加入「線條繪製」(Line Drawing) 動畫，也叫路徑繪製 (path drawing) 或自繪 SVG (self-drawing SVG)。
每條描邊看起來沿著路徑從起點到終點流暢地自己畫出來，第二條描邊（例如勾號）緊接在第一條之後。
進入畫面時只播放一次，不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的線條。點擊試試
Copy-to-Clipboard Feedback (複製回饋)
別稱 Copied state, Copy icon to checkmark
複製圖示變成勾號，標籤短暫顯示「已複製」。
適用情境
程式碼區塊、分享連結
在[套用位置]加入「複製回饋」(Copy-to-Clipboard Feedback) 動畫，也叫已複製狀態 (copied state) 或複製圖示變勾號 (copy icon to checkmark)。
按下複製按鈕時，複製圖示快速縮小消失，同時畫出一個勾號，標籤變為「已複製」，片刻之後一切平順地恢復原狀。
切換過程中保持按鈕尺寸不變，不讓任何東西位移，並把已複製狀態告知螢幕閱讀器。Progress Ring (環形進度條)
別稱 Circular progress, Radial progress, Animated Circular Progress Bar
圓弧沿著圓環延伸，顯示完成的百分比。
適用情境
檔案上傳、目標、計時器
在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。Micro-interaction 中的其他動效
拖曳試試
Swipe to Delete (滑動刪除)
別稱 Swipe actions, Swipe to reveal
橫向滑動清單列，露出刪除或封存等操作按鈕。
適用情境
郵件清單、待辦清單
在[套用位置]加入「滑動刪除」(Swipe to Delete) 互動，也叫 swipe actions 或 swipe to reveal。
橫向拖曳某一列時，它直接跟著手指移動，露出後方的封存、刪除等操作按鈕，按鈕完全露出後停住；放開後平順地滑到定位，不要回彈。
橫向滑動時仍要確保垂直捲動可用，並讓鍵盤和螢幕閱讀器使用者不必滑動也能執行相同操作。點擊試試
Toggle Switch (切換開關)
別稱 Switch, Switch Thumb Slide
圓形滑塊沿軌道滑動，軌道顏色在關和開之間切換。
適用情境
設定、深色模式
在[套用位置]加入「切換開關」(Toggle Switch) 動畫，也叫 switch。
開啟或關閉時，圓形滑塊平順地滑到軌道另一端，同時軌道顏色跟著改變：快速、俐落，不要彈跳。
做成真正符合無障礙的開關 (帶有 checked 狀態的 role="switch")，並且支援鍵盤操作。A
1
點擊試試
Add to Cart Fly (飛入購物車)
別稱 Fly to cart, Add-to-cart animation
商品圖片一邊縮小一邊沿弧線飛進購物車圖示。
適用情境
電商
在[套用位置]加入「飛入購物車」(Add to Cart Fly) 動畫，也叫 fly to cart 或加入購物車動畫 (add-to-cart animation)。
按下加入按鈕時，商品圖片的一個小複本一邊縮小，一邊沿一條流暢而快速的弧線飛進購物車圖示，購物車在數量更新時輕輕彈一下。
每次按下只播放一次，不要移動原本的商品卡片；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就省略飛行動畫，但照常更新購物車。