<animate>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

<animate> SVG 元素提供了一種隨時間推移為元素屬性設定動畫的方法。

使用語境

分類	動畫元素
允許內容	可包含任意數量、任意順序的下列元素描述性元素

屬性

此元素僅包含全域性屬性。

DOM 介面

此元素實現了 SVGAnimateElement 介面。

示例

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

可訪問性考慮

閃爍和閃光動畫可能會對患有認知障礙（如注意力缺陷多動障礙 (ADHD)）的人造成困擾。此外，某些型別的運動可能會誘發前庭障礙、癲癇和偏頭痛以及視網膜敏感性。

請考慮提供一種暫停或停用動畫的機制，以及使用 Reduced Motion Media Query 或等效的使用者代理客戶端提示 Sec-CH-Prefers-Reduced-Motion，為那些偏好無動畫體驗的使用者建立互補的體驗。

規範

規範
SVG 動畫級別 2 # AnimateElement

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年6月6日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的潛在問題