← Spell Book

transitions.dev

software

法術評分
🔮🔮🔮○○
價格
free
難度
beginner

最適合誰

需要前端微互動（card resize、modal 進出、notification badge、dropdown）但不想引入整套動畫框架的開發者。如果你一直在寫 transition: all 0.3s ease 然後覺得「差不多就好」，這個工具能讓你的 transition 品質直接跳一個等級，而且不需要安裝任何東西。另外，如果你正在 Claude Code 或 Cursor 裡嘗試 AI Agent Skill，也值得裝來看看效果。

我實際怎麼用

我把它當作 easing curve 參考庫和片段來源。需要某個互動模式的 transition 時，先到 transitions.dev 的 Playground 即時調參數，滿意後直接複製 CSS 片段貼進專案。每個片段都用語義化的 CSS custom property 命名（像 --t-card-duration、--t-modal-scale），不用讀實作細節就能調整。

我也在 Claude Code 裡透過 npx skills add Jakubantalik/transitions-dev 安裝了 AI Skill。產生 UI 元件時，agent 可以直接引用這些 transition 模式，省去手動指定 easing 值的來回溝通。實際效益取決於 LLM 對 skill 內容的理解程度，但確實減少了一些重複工作。

我不把它當成專案依賴。沒有 npm 套件，所以就是複製需要的部分，然後繼續工作。

真正強的地方

Easing curve 設計是專業水準。 這是最值得注意的部分。標準場景使用 fast-out-slow-in，需要物理回饋感的地方用 springy overshoot（cubic-bezier 的 Y 值超過 1），開啟與關閉使用不對稱的 duration。這些做法在 Google Material Motion 規範裡才看得到，這裡直接給你可複製的 CSS。

語義化 custom property 加 namespace 隔離。 每個可調參數都有語義命名，全部在 t-* namespace 下，不會跟你現有的 class 命名撞車。

無障礙內建。 所有片段自動尊重 prefers-reduced-motion，不需要自己加 media query。

AI Skill 包裝是前瞻做法。 把 CSS transition 片段包裝成 AI coding agent 能理解的 skill，目前幾乎沒有其他 CSS 工具庫在做這件事。

零框架依賴。 純 CSS 加上最少量的 vanilla JS。React、Vue、Svelte、純 HTML 都能用。

失敗模式與不該用的情境

showcase repo 沒有 LICENSE 檔。 Skill repo（transitions-dev）是 MIT 授權，但主要的展示用 repo（transitions.dev）沒有附授權檔案。如果直接從 showcase repo 複製程式碼，授權狀態不明確。商業專案使用前必須確認。

沒有 npm 套件。 無法做版本鎖定。如果作者改了某個片段的行為，你不會收到通知，也無法固定在特定版本。對團隊協作來說這是實際的缺口。

專案非常年輕。 2026-04-21 建立，約 575 stars。沒有維護紀錄、沒有 changelog、沒有 release 流程。作者是否會持續投入還不確定。

單一 HTML 檔架構。 12 個 transition 全部在一個檔案裡。作為展示沒問題，但隨著片段增加，維護壓力會上升，選擇性引入也只能靠手動。

涵蓋範圍有限。 12 個 transition 覆蓋了最常見的模式，但如果你需要 staggered list animation、route transition 或複雜的編排式動畫，仍然需要其他方案。

價格/上手門檻與風險

  • 價格：免費。Skill repo 為 MIT 授權。
  • 上手門檻：入門級。複製 CSS、貼進專案、調整 custom property 值。不需要建置步驟。
  • 風險：複製片段的風險低（複製後程式碼就是你的）。長期依賴 AI Skill 整合的風險中等，因為專案還太新。

結論

transitions.dev 是一組設計品質優良的 CSS transition 片段集，easing curve 的調校確實比多數同類工具好，AI Skill 整合也是有意義的嘗試。它不是框架，也不打算成為框架。主要價值在於學習它的 easing curve 設計、複製你需要的模式、然後繼續前進。在它推出 npm 套件、showcase repo 補上正式授權之前，我不會在工作流程中建立對它的依賴。評分 3：值得追蹤、值得從中複製，但還不到值得依賴的程度。

來源