CSS View Transition 產生器
在瀏覽器直接視覺化編輯與預覽 View Transition API。
輕鬆客製化舊與新狀態的動畫，並匯出完整程式碼。
選擇預設樣式
預覽區
產生器設定
※ 設定退出狀態 (::view-transition-old) 的最終樣貌 (To)
※ 設定進入狀態 (::view-transition-new) 的初始樣貌 (From)
產生的程式碼
功能概要
「CSS View Transition 產生器」是一款完全免費且專為前端開發者設計的工具。它能讓您直接在瀏覽器中視覺化建立、編輯並預覽基於次世代「View Transition API」的網頁轉場動畫。
過去在網頁（特別是 SPA 單頁應用程式）中要實作流暢的畫面切換，通常需要依賴複雜的 JavaScript 動畫函式庫。現在，您可以只利用原生的瀏覽器 API 加上純 CSS 來輕鬆達成。本工具支援分別調整「退出中元素 (Old)」與「進入中元素 (New)」的位移、縮放、旋轉及透明度動畫，並一鍵匯出適用於 SPA (JS) 及 MPA (HTML) 的程式碼。
所有的運算與預覽都在您的瀏覽器端完成，確保您的隱私與安全，不會有任何資料被傳送至外部伺服器。
使用方法
選擇預設樣式或基礎設定
從上方選擇如「淡入淡出」或「向左滑動」等預設樣板快速開始。您也可以在輸入框自訂專屬的 `view-transition-name`。
預覽與調整動畫參數
點擊「播放 / 切換狀態」按鈕以即時預覽。接著在「Old (舊狀態)」與「New (新狀態)」面板中微調透明度與變形參數來設計您的動畫。
複製並套用程式碼
切換底部的分頁，將產生的 CSS 及適用於您架構 (SPA 或 MPA) 的程式碼片段複製下來，直接貼入您的專案即可生效。
名詞解釋
- View Transition API
- 一種由瀏覽器原生提供的機制。它會在 DOM 改變前 (舊狀態) 與改變後 (新狀態) 自動截取畫面，並在兩者之間進行平滑過場。最大優勢是不需依賴龐大的 JavaScript 動畫庫，就能實現媲美原生 App 的轉場體驗。
- view-transition-name
- CSS 屬性，用來標記及關聯需要製作轉場動畫的元素。如果在舊畫面與新畫面中，有兩個元素擁有相同的名稱，瀏覽器就會對它們進行變形補間。注意：同一時間畫面上必須只能有「唯一」的一個名稱存在。
- ::view-transition-old / new
- `old` 是一個包含「舊狀態」截圖的虛擬元素，負責控制元素退出的動畫；`new` 則是包含「新狀態」的虛擬元素，負責控制元素進入的動畫。您可以對這些虛擬元素套用自訂的 CSS @keyframes。
- Cross-document View Transitions (跨文件轉場)
- 此規範的延伸應用，允許在傳統的多頁式網站 (MPA) 之間進行轉場動畫。只要在不同頁面加上特定的 meta 標籤，點擊連結載入新頁面的過程就能擁有順暢的動畫，大幅提升傳統網站的使用體驗。
常見問題
- Q.我的資料會被傳送到伺服器嗎？
- 不會，這個工具完全在您的瀏覽器端執行。您輸入的設定或產生的程式碼皆不會傳送到任何外部伺服器，即使離線也能安全使用。
- Q.View Transition 動畫支援所有的瀏覽器嗎？
- 目前在 Chrome 111+、Edge 111+ 及 Safari 18+ 等現代瀏覽器中已有支援。對於不支援的瀏覽器（例如較舊版本的 Firefox），它將會安全地退回一般的無動畫切換，這是一種漸進式增強 (Progressive Enhancement) 的做法，不會破壞您網站的原有功能。
- Q.我可以用在傳統的多頁式應用 (MPA) 嗎？
- 可以的，只要是在同一個網域 (Same-origin) 下的 MPA 即可。只要在 HTML 的 `<head>` 中加入 `<meta name="view-transition" content="same-origin" />`，並在 CSS 中為對應的元素指定相同的 `view-transition-name`，不需要撰寫任何 JavaScript 就能實現轉場動畫。
- Q.我該怎麼命名 view-transition-name？
- 請指定一個在同個頁面中「絕對唯一」的字串（例如：`main-content`, `hero-image`, `card-123`）。如果同一個時間點 DOM 中有多個元素擁有相同的名稱，動畫將會失敗。對於列表項目，建議動態結合不重複的 ID 來命名。
使用場景
以下是幾種非常適合使用 View Transition API 來提升體驗的情境：
電商網站的商品詳情
使用者在商品列表中點擊圖片時，圖片能平滑放大並飛入到商品詳情頁的位置中。這種視覺引導能顯著提升網頁質感與使用者停留率。
類原生 App 的介面滑動
可以輕鬆實作出如同手機 App 般，點擊選單後畫面從右側滑入，或是返回時向右退出的效果。非常適合用於 PWA (漸進式網路應用程式) 開發。
深色模式 (Dark Mode) 切換
利用圓形遮罩或特殊動畫取代生硬的黑白瞬間切換。例如點擊按鈕時，深色背景從按鈕處像水波紋一樣向外擴散覆蓋全螢幕。
列表的排序與過濾
當對待辦事項或商品列表進行條件過濾時，被移除的項目會淡出，而保留下來的項目會順滑地滑動到新的排列位置，讓 UI 變動一目了然。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.