Transitions.dev

關於 Transitions.dev

收集可直接 copy/paste 到專案中的常用 web app 轉場範例，涵蓋卡片縮放、數字翻轉、通知 badge、modal、panel、page transition、tooltip 與 3D tilt 等，適合補強產品介面的動態細節。

分類：設計靈感、互動 / 動效

前往 Transitions.dev 官網或原始資源

相關與類似資源

CSS Loaders Dots — 點狀 loading 動效範例集合，適合設計載入狀態、按鈕回饋與微互動節奏。
Design Spells — 探索網頁與 App 的微互動、復活節彩蛋和其他看似多餘的設計細節。
MotionSites — 聚焦動態 Hero 與網站 prompt 的靈感庫，適合研究首屏動態、轉場節奏與可交給 AI 生成器的網頁視覺提示方向。
Whirl — CSS loading 動畫靈感庫，適合找輕量、可直接參考的等待狀態與互動細節。
21st.dev — 利用受 shadcn/ui 啟發的即用型 React Tailwind 元件，更快地交付精美的使用者介面。
404s — 錯誤 404 頁面設計靈感圖庫

精選工具

Batch Export Frames — 創作邦製作的 Figma 外掛，可批量輸出 Frame，並支援快速定位與整理需要輸出的畫面，適合設計交付、作品整理與大量素材輸出。
ChatGPT — 適合寫作、企劃、研究、圖片生成、資料整理與日常工作輔助。
Claude — Anthropic 的 AI 助手，協助寫作、整理資料、分析文件與程式開發。
Codex — OpenAI Codex 現在可支援 GPT Image 2 / Image 2 工作流，適合讓 AI 代理協助整理需求、生成提示詞並串接圖片生成流程。

新工具與資源

Codex — OpenAI 的 AI 代理，協助理解專案、修改程式、檢查程式碼與執行開發任務。
Grok Bot — 以雲端電腦與多個 AI 助手處理跨網站、應用程式與工具的工作。
獅尾骨頭黑體 Swei Bone Sans — 思源黑體的筆畫頭尾加寬，起筆收筆像一節節骨頭，再去掉拔腳的短線。七種字重，大標小標都清楚，適合想要一點個性的版面，OFL 授權可免費商用。
Ezgif — 線上 GIF 工具箱，影片轉 GIF、裁切、調速、加字、壓縮都在同一站。做社群動圖或簡報裡的小動畫不用裝軟體，完全免費。

新文章

創作邦重新讀取中