transitions-dev

Transitions.dev

提供 21 種可隨插即用的 CSS 轉場效果，每一種都封裝在 t-* 選擇器下，並搭配具語意化的 CSS 自訂屬性（Custom Properties）。使用方式非常簡單：複製程式碼片段、綁定文件說明的 HTML 鉤子（Hooks）即可完成。完全無前端框架依賴、不含特定 Demo 的冗餘標記，且每個片段均內建 prefers-reduced-motion 減載動畫機制。

快速參考

轉場效果	適用時機	參考文件
卡片尺寸調整	當容器的版面配置狀態變更時，平滑補間動畫調整其寬度或高度。	01-card-resize.md
數字彈出動畫	當數字更新時，每個數字帶有模糊與滑動效果重新進場。	02-number-pop-in.md
通知標籤	將小型標籤滑入觸發元件上，並彈出紅點。	03-notification-badge.md
文字狀態切換	以原地的模糊上下滑動效果切換文字。	04-text-states-swap.md
下拉選單	開啟具感知來源位置的下拉選單，從其觸發元件處展開。	05-menu-dropdown.md
彈出視窗開啟/關閉	開啟時放大彈出視窗，關閉時以較柔和的縮小效果消失。	06-modal.md
面板滑出	搭配淡入淡出模糊效果，將面板滑入指定區域。	07-panel-reveal.md
雙頁並排轉場	在兩個並排頁面之間滑動切換（清單 ↔ 詳細資訊、步驟 1 ↔ 步驟 2）。	08-page-side-by-side.md
圖示切換	在同一位置以淡入淡出、模糊與縮放效果切換兩個圖示。	09-icon-swap.md
成功打勾動畫	結合淡入 + 旋轉 + Y 軸跳動 + 路徑繪製動畫，慶祝操作完成。	10-success-check.md
頭像組懸停	一排項目隨距離衰減向上抬升，移開時帶有彈性回彈效果。	11-avatar-group-hover.md
錯誤狀態震動	具分段 cubic-bezier 曲線的震動效果，並自動復原邊框與訊息。	12-error-state-shake.md
輸入框清除與消散	清除文字欄位時，文字向外飛出並逐字消散。	13-input-clear-dissolve.md
骨架屏載入與呈現	先呈現預設位置的脈衝效果，載入完成後淡入淡出模糊切換至真實內容。	14-skeleton-reveal.md
流光文字	在暗淡文字上循環掃過一道亮光帶（純 CSS 實現）。	15-shimmer-text.md
滑動頁籤	在分段控制器（Segmented Control）中將目前選取的膠囊塊滑動至目標頁籤。	16-tabs-sliding.md
工具提示開啟/關閉	延遲淡入與放大進入，瞬間離開消失（純 CSS 實現）。	17-tooltip.md
文字交錯顯現	多行堆疊文字交錯模糊上升顯現，並靜默淡出。	18-texts-reveal.md
卡片懸停傾斜	卡片在 3D 空間中朝游標方向傾斜，並帶有游標追蹤的高光閃爍。	19-card-tilt.md
加號變形選單	將圓形觸發按鈕變形為其開啟的選單或面板。	20-plus-menu-morph.md
手風琴折疊展開	透過 grid-rows 動態伸展/縮小面板，並伴隨 V 型箭頭（Chevron）翻轉。	21-accordion.md
Toast 吐司訊息開啟/關閉	Toast 從下方升起，伴隨淡入與淡化模糊，進場速度慢於出場。	22-toast.md
點讚按鈕	點讚時以彈出與粒子爆發效果填滿愛心。	23-like-button.md
了解更多懸停	懸停時滑動 V 型箭頭並將兩臂展開為完整箭頭。	24-learn-more-hover.md
核取方塊勾選	填滿方塊，隨後繪製勾選符號。	25-checkbox-check.md
旋轉計數器	像老虎機一樣垂直運動模糊旋轉數字滾輪。	26-spinning-counter.md
切換開關	開關按鈕移動時帶有雙重彈跳過衝（Overshoot）效果。	27-toggle.md

判定規則

當使用者要求新增轉場效果時，請先匹配可見的 UI 元素，再匹配動作動詞：

• 觸發元件 + 上方浮動的小圓點 → 通知標籤 (notification badge)。
• 觸發元件 + 從其延伸展開的表面 → 下拉選單 (dropdown，具定位錨點與感知來源位置) 或彈出視窗 (modal，置中，無定位錨點)。
• 滑入頁面特定區域的表面 → 面板滑出 (panel reveal)。
• 雙畫面，清單 ↔ 詳細資訊或步驟 1 ↔ 步驟 2 → 雙頁並排轉場 (page side-by-side)。
• 元素變更寬度或高度 → 卡片尺寸調整 (card resize)。
• 元素的文字內容原地位移變更 → 文字狀態切換 (text states swap)。
• 同一位置的兩個圖示 → 圖示切換 (icon swap)。
• 數字更新 → 數字彈出動畫 (number pop-in)。
• 確認 / 成功 / "完成" 時刻（勾選符號、付款處理成功、檔案已上傳）→ 成功打勾動畫 (success check)。
• 懸停橫向堆疊中的項目（頭像、標籤切換塊、分段按鈕、標籤膠囊）→ 頭像組懸停 (avatar group hover)。
• 表單驗證錯誤 / "輸入有誤" 的回饋（無效欄位、PIN 碼錯誤、重複名稱）→ 錯誤狀態震動 (error state shake)。
• 清除文字欄位（搜尋框 × 按鈕、篩選器重設）→ 輸入框清除與消散 (input clear with dissolve)。
• 先載入預設位置再切換為真實內容（清單行、卡片、個人資料頁首）→ 骨架屏載入與呈現 (skeleton loader and reveal)。
• 進行中 / "處理中" 且需要生動感的文字（載入中標籤、串流狀態）→ 流光文字 (shimmer text)。
• 具動態高光的橫向互斥選項集（檢視切換器、分段控制器、篩選頁籤）→ 滑動頁籤 (tabs sliding)。
• 出現在觸發元件上方/附近的懸停/焦點提示（圖示工具提示、資訊氣泡）→ 工具提示開啟/關閉 (tooltip open / close)。
• 堆疊的大標題 + 輔助文字帶節奏感地進入（Hero 文案、空白狀態、導覽步驟）→ 文字交錯顯現 (texts reveal)。
• 懸停時需對游標產生 3D 反應的卡片 / 區塊（商品卡片、封面圖、會員卡，無論是否帶有游標追蹤高光）→ 卡片懸停傾斜 (card hover tilt)。
• 圓形觸發按鈕變形為其開啟的表面（+ 號 FAB 按鈕擴展為選單/面板、撰寫按鈕展開）→ 加號變形選單 (plus → menu morph)。若該表面是獨立的 Popover 且僅從觸發按鈕伸展，請改用下拉選單 (menu dropdown)。
• 帶有可折疊內容且高度會伸展/縮小的標題列（設定群組、FAQ、篩選區塊、"顯示更多"、展開/收合）→ 手風琴折疊展開 (accordion expand)。
• 無明確匹配 → 退回使用 transitions reveal 並讓使用者自行選擇。切勿憑空推測。

如果兩種轉場效果皆適用，除非設計明確要求更重型的介面，否則優先選擇開銷較低者（卡片尺寸調整優於面板滑出、下拉選單優於彈出視窗、成功打勾動畫優於全螢幕彈出慶祝）。成功打勾動畫僅為純動畫——若您還需要從載入圖示（Spinner）切換為打勾，請與圖示切換 (icon swap) 搭配使用。

指令

除了直接的轉場需求外，本 Skill 還提供四個具命名空間的指令供 Agent 識別。每個指令均以 transitions 開頭，確保呼叫時不會與同一專案中安裝的其他 Skill 指令產生衝突。

transitions reveal — 列出所有轉場效果

觸發短語： transitions reveal、"reveal the transitions"、"list all transitions"、"what transitions are in this skill"、"show the transitions catalog"。

行為： 以帶編號的純文字清單印出 21 種轉場效果——名稱、單行摘要及對應的參考檔名。直接複用上方 ## 快速參考 中的資料，請勿自創文案。不進行專案存取。

transitions review — 審查專案匹配度

觸發短語： transitions review、"review my project"、"audit my animations"、"where would transitions.dev help"、"find places to use this skill"。

行為：

1. 搜尋工作區中的相關特徵：transition: 宣告、@keyframes、樣式檔中硬編碼的 ms / s 動畫時長，以及符合判定規則模式的元件（彈出視窗、下拉選單、標籤、搜尋輸入框、骨架屏、頁籤、工具提示……）。
2. 針對每個搜尋結果，依據判定規則進行匹配，並挑選最適合的單一轉場效果。
3. 依檔案分組輸出帶編號的清單：
   • path/to/Component.tsx:L42 — 看起來像是下拉選單開啟，建議使用 menu-dropdown (05-menu-dropdown.md)。
   • 跳過已使用 t-* 類別的自訂轉場。
4. 切勿修改任何程式碼。結尾附上："在任意行執行 transitions apply 即可套用建議的轉場效果。"

transitions apply — 套用最適合的轉場效果

觸發短語： transitions apply、"apply a transition here"、"add the right transition"、"install transitions-dev here"、"fix the animation on this element"。

行為：

1. 讀取上下文：目前開啟的檔案、游標最近的元素、周圍的 CSS / JSX。若使用者已明確指定轉場效果（例如 transitions apply menu-dropdown），則直接使用該效果。
2. 對該上下文執行 ## 判定規則 並挑選一種轉場效果。若有兩種皆適用，優先選擇開銷較低者（與現有規則相同的平局裁決機制）。
3. 提出單行提案："我建議在此套用 menu-dropdown，因為該元素是從觸發按鈕開啟且帶有定位錨點。是否確認安裝？"。
4. 獲得確認後，逐字照做 ## 輸出格式 中的現有五步驟流程（根區塊、程式碼片段、鉤子、減載動畫防護、必要的 JS 協調邏輯）。
5. 若 Agent 無法充滿信心選擇單一轉場效果，請退回使用 transitions reveal 並請使用者自行選擇。

transitions refine — 將自訂動畫替換為動態標記

觸發短語： transitions refine、"refine my transitions"、"scan for ad-hoc transitions"、"replace hardcoded durations with motion tokens"、"tokenize my animations"、"tune the durations / easing"、"audit my custom keyframes"、"make the timing consistent"、"align to the motion tokens"。

行為：

1. 掃描整個專案（不限於專用樣式表——亦包含行內 style= / CSS-in-JS、styled-components、<style> 區塊、Tailwind 自訂值如 duration-[300ms]）尋找自訂動態：transition / animation 的簡寫與完整寫法、自訂 @keyframes 區塊、硬編碼的時長（…ms / …s）、緩動函數（cubic-bezier(...) 或關鍵字）、位移距離（px）、scale(...) 與 blur(...)。
2. 針對每個數值，從周圍選擇器 / 元件以及 ## 判定規則 推導出該動態的作用（彈出視窗關閉、下拉選單開啟、工具提示、標籤顯現、文字顯現、頁面滑動、震動……）。若為 @keyframes 區塊，請讀取驅動它的 animation 並判斷 keyframes 本身的時長與緩動。
3. 關鍵的決策依據是用途，而非原始數字。 在 ## 動態標記 中查閱推導出的用途，且僅在用途符合時，建議使用其對應的標記。例如 300ms 的彈出視窗關閉會映射到 --duration-quick，因為兩者的用途皆為 "彈出視窗關閉"，即使數字不同亦然。若數值的用途無法匹配任何標記的用途

<!-- truncated for translation batch; full body continues in source -->