CSS View Transitions API 完整教學：用原生 CSS 打造絲滑頁面過渡動畫

如果你跟我一樣，曾經為了實現頁面切換動畫而引入一整個動畫函式庫，那你一定會愛上 View Transitions API。這個瀏覽器原生的 API 讓你只用幾行 CSS 就能做出以前需要 GSAP 或 Framer Motion 才能實現的效果。我第一次在專案中用它的時候，整個團隊都驚呆了——「等等，這不需要 JavaScript？」

這篇 CSS View Transitions API 教學會帶你從基礎概念到實戰應用，完整掌握這個 2026 年前端必學的新技術。

什麼是 View Transitions API？

View Transitions API 是瀏覽器提供的一種機制，用來在頁面狀態變化時自動建立平滑的過渡動畫。它的運作原理很簡單：瀏覽器先對當前狀態截圖，接著你更新 DOM，瀏覽器再對新狀態截圖，然後在兩張截圖之間用 CSS 動畫來過渡。

這表示你不需要手動管理動畫的時序、元素的進出場——瀏覽器幫你搞定了。而且因為是在 GPU 上合成偽元素，效能比用 JavaScript 操作 DOM 好得多。

SPA 單頁應用過渡

在 SPA 中使用 View Transitions 超級簡單。只要把你的 DOM 更新包在 document.startViewTransition() 裡面就好：

document.startViewTransition(() => {
  // 更新 DOM
  container.innerHTML = newContent;
});

就這樣，瀏覽器會自動在新舊內容之間加上淡入淡出的過渡效果。不需要額外的 CSS，不需要計算動畫時間。當然你也可以自訂動畫效果，我們等一下會講到。

MPA 多頁應用過渡（跨頁面導航）

2026 年 View Transitions 最令人興奮的進展就是支援 MPA 了。你只需要在 CSS 中加一行：

@view-transition {
  navigation: auto;
}

沒錯，不需要 JavaScript。只要兩個頁面都加了這個 CSS 規則，瀏覽器就會在同源頁面導航時自動建立過渡動畫。這對用 Next.js 或其他框架的 SSR/SSG 頁面來說簡直是天賜之物。在我們之前的 CSS Scroll-Driven Animations 教學中也提到過類似的原生 CSS 動畫能力。

view-transition-name：指定元素動畫

View Transitions 真正強大的地方在於你可以為特定元素命名，讓瀏覽器在新舊頁面中「連結」這些元素，產生位置、大小、透明度的過渡動畫。

.card-image {
  view-transition-name: hero-image;
}

.detail-image {
  view-transition-name: hero-image;
}

當你從列表頁點進詳情頁時，圖片會像 iOS 的照片 App 一樣，從卡片的位置平滑地「飛」到詳情頁的位置。不需要 keyframes，瀏覽器自動計算中間的過渡狀態。

要注意一個重要規則：同一頁面上 view-transition-name 必須是唯一的。如果兩個元素用了同樣的名稱，過渡動畫會失效。

自訂過渡動畫

不喜歡預設的淡入淡出？你可以用 CSS 偽元素來完全自訂動畫：

::view-transition-old(hero-image) {
  animation: slide-out 0.3s ease-in;
}

::view-transition-new(hero-image) {
  animation: slide-in 0.3s ease-out;
}

@keyframes slide-out {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
}

有兩個偽元素可以用：::view-transition-old(name) 代表舊狀態的截圖，::view-transition-new(name) 代表新狀態的截圖。你可以分別對它們套用不同的動畫。搭配 CSS Container Queries 甚至可以根據容器大小使用不同的過渡效果。

效能優化技巧

雖然 View Transitions 的效能很好，但還是有一些需要注意的點：

• 過渡時間控制在 200-400ms：太長的過渡會讓記憶體中保留截圖太久
• 限制命名元素數量：每個 view-transition-name 都會建立一對截圖。50 個命名元素意味著 100 張光柵圖在記憶體中
• 避免在低階設備上過度使用：可以用 prefers-reduced-motion 媒體查詢來為偏好減少動畫的使用者提供簡化版本
• 配合 CSS :has() 選擇器：可以根據父元素狀態條件性地觸發不同的過渡效果

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0.01ms;
  }
}

2026 年瀏覽器支援

好消息是，到了 2026 年，View Transitions API 在主流瀏覽器中的支援已經相當完善：

• Chrome / Edge：完整支援 SPA + MPA
• Safari：支援 SPA，MPA 支援進行中
• Firefox：SPA 支援已推出，MPA 在 Nightly 版本中

對於不支援的瀏覽器，API 會優雅降級——動畫不會出現，但頁面切換仍然正常運作，不會有任何錯誤。

實戰範例：產品卡片到詳情頁

讓我用一個完整的範例來示範。假設你有一個產品列表，點擊產品卡片會展開成詳情頁：

/* 列表頁 */
.product-card {
  view-transition-name: product-hero;
}

.product-card h3 {
  view-transition-name: product-title;
}

/* 詳情頁 */
.product-detail-image {
  view-transition-name: product-hero;
}

.product-detail h1 {
  view-transition-name: product-title;
}

/* 自訂動畫 */
::view-transition-group(product-hero) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

這樣就完成了！圖片和標題都會有平滑的過渡效果。如果你正在用 Tailwind CSS v4，可以直接在 utility class 中使用 view-transition-name。

View Transitions vs FLIP 技術

你可能聽過 FLIP（First, Last, Invert, Play）這個動畫技術。在 2026 年，我建議新專案直接用 View Transitions，只在以下情況使用 FLIP：

• 需要在不支援 View Transitions 的瀏覽器上運作
• 需要逐幀精細控制動畫
• 需要在同一頁面內做複雜的佈局動畫（不涉及頁面導航）

想了解更多前端設計的最新實踐，歡迎閱讀我們的 Tailwind CSS 響應式設計實戰指南。

總結

View Transitions API 代表了前端動畫的一個重要轉折——從依賴 JavaScript 函式庫到使用瀏覽器原生能力。它讓以前需要幾百行程式碼的頁面過渡效果，變成只需要幾行 CSS。如果你正在做任何涉及頁面導航的前端專案，現在就是學習它的最好時機。