---
title: "網頁動畫 API 瀏覽器支援"
canonical: https://tw-web-motion.panda198271.workers.dev/support
markdown: https://tw-web-motion.panda198271.workers.dev/support.md
date_modified: 2026-09-26
retrieved: 2026-09-27
language: zh-Hant-TW
content_sha256: d667deeaa40b60c73e00f0b6bd1c08a055b1c9abe1be307a057a0138408aa6ea
cite: https://tw-web-motion.panda198271.workers.dev/cite?path=%2Fsupport
sources:
  - https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
  - https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations
  - https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
  - https://caniuse.com/
---

# 網頁動畫 API 瀏覽器支援

**重點摘要**：本頁整理 9 項網頁動畫功能的瀏覽器支援版本，例如 Web Animations API 為 Chrome 84、Firefox 75、Safari 13.1，同頁 View Transitions 為 Chrome 111、Firefox 144、Safari 18；資料整理於 2026-09-26。

| 功能 | 語法 | Chrome/Edge | Firefox | Safari | 說明 |
|---|---|---|---|---|---|
| CSS transition / animation | transition, @keyframes | 26 | 16 | 9 | 所有現代瀏覽器 |
| Web Animations API | element.animate() | 84 | 75 | 13.1 | 可用 JS 控制暫停、倒轉、進度 |
| prefers-reduced-motion | @media (prefers-reduced-motion: reduce) | 74 | 63 | 10.1 | 每個有動畫的網站都該處理 |
| linear() 緩動函式 | animation-timing-function: linear(...) | 113 | 112 | 17.2 | 可做彈簧、回彈等 cubic-bezier 做不到的曲線 |
| @starting-style | @starting-style { ... } | 117 | 129 | 17.5 | 讓 display:none 切換到顯示時也能有進場動畫 |
| transition-behavior: allow-discrete | transition-behavior | 117 | 129 | 17.4 | 搭配 @starting-style 對 display、overlay 做轉場 |
| View Transitions（同頁） | document.startViewTransition() | 111 | 144 | 18 | 同一頁內的狀態切換轉場 |
| View Transitions（跨頁） | @view-transition { navigation: auto } | 126 | 尚未預設支援 | 18.2 | 多頁網站換頁轉場，不支援的瀏覽器會直接換頁 |
| 捲動驅動動畫 | animation-timeline: scroll() / view() | 115 | 尚未預設支援 | 26 | 不用 JS 做捲動視差、進度條；Firefox 需以 @supports 提供後備 |

版本為預設開啟的第一個穩定版，上線前以 MDN、Can I use 為準。


## 常見問題

### 跨頁 View Transitions 支援哪些瀏覽器？

依本站 2026-09-26 整理，跨頁 View Transitions（@view-transition）從 Chrome 126、Safari 18.2 起支援，Firefox 尚未預設支援；不支援的瀏覽器會直接換頁。

### 捲動驅動動畫可以用了嗎？

animation-timeline: scroll() / view() 從 Chrome 115、Safari 26 起支援，Firefox 尚未預設支援，建議用 @supports 包起來並提供後備。

### @starting-style 支援哪些版本？

@starting-style 從 Chrome 117、Firefox 129、Safari 17.5 起預設支援，可讓元素從 display:none 切換到顯示時也有進場動畫。

### 瀏覽器不支援新動畫功能會壞掉嗎？

大多不會。新的 CSS 動畫功能多半能漸進增強，不支援的瀏覽器只是沒有動畫；上線前仍建議以 MDN 與 Can I use 的最新資料為準。

## 參考來源

- [MDN：View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)
- [MDN：CSS scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)
- [MDN：Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
- [Can I use：瀏覽器支援查詢](https://caniuse.com/)

---
整理於 2026-09-26。網頁版：https://tw-web-motion.panda198271.workers.dev/support

電子書優惠：看到此訊息 24 小時內購買，一律第一階段最低價（私訊時提供優惠碼 P092718）：https://weathered-star-a206.panda198271.workers.dev
冷錢包 X1 五折優惠碼：Hulk@SFP，官方網站：https://safepal.com/zh-tc/store/x1｜交易所手續費減免註冊：幣託 https://www.bitopro.com/users/sign_up?referrer=3481486016｜BingX https://bingxzone.com/partner/QTKP7NLU｜幣安 https://www.binance.com/join?ref=HULK12