網頁動畫工具箱

網頁動畫 API 瀏覽器支援表

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

新的 CSS 動畫功能大多能漸進增強：不支援的瀏覽器只是沒有動畫，不會壞掉。

功能語法Chrome/EdgeFirefoxSafari說明
CSS transition / animationtransition, @keyframes26169所有現代瀏覽器　Can I use：瀏覽器支援查詢
Web Animations APIelement.animate()847513.1可用 JS 控制暫停、倒轉、進度　MDN：Web Animations API
prefers-reduced-motion@media (prefers-reduced-motion: reduce)746310.1每個有動畫的網站都該處理　MDN：prefers-reduced-motion
linear() 緩動函式animation-timing-function: linear(...)11311217.2可做彈簧、回彈等 cubic-bezier 做不到的曲線　MDN：easing-function（含 linear()）
@starting-style@starting-style { ... }11712917.5讓 display:none 切換到顯示時也能有進場動畫　MDN：@starting-style
transition-behavior: allow-discretetransition-behavior11712917.4搭配 @starting-style 對 display、overlay 做轉場　Can I use：瀏覽器支援查詢
View Transitions（同頁）document.startViewTransition()11114418同一頁內的狀態切換轉場　MDN：View Transition API
View Transitions（跨頁）@view-transition { navigation: auto }126尚未預設支援18.2多頁網站換頁轉場，不支援的瀏覽器會直接換頁　MDN：View Transition API
捲動驅動動畫animation-timeline: scroll() / view()115尚未預設支援26不用 JS 做捲動視差、進度條；Firefox 需以 @supports 提供後備　MDN：CSS scroll-driven animations

漸進增強寫法

@supports (animation-timeline: view()) {
  .reveal {
    animation: fadeInUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

版本為預設開啟的第一個穩定版，整理於 2026-09-26；上線前以 MDN：CSS scroll-driven animations、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 的最新資料為準。

參考來源