此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<animate>

基线
广泛可用

自 2020年1月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

<animate> SVG 元素用于随时间对元素的某个属性做动画。

使用上下文

类别动画元素
允许的内容任意数量、任意顺序的下列元素:
描述性元素

属性

此元素仅包含全局属性。

DOM 接口

该元素实现了 SVGAnimateElement 接口。

示例

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))的人可能造成困扰。此外,某些运动可能诱发前庭障碍、癫痫、偏头痛和暗点敏感性。

考虑提供一种暂停或禁用动画的机制,并使用减少动画媒体查询或等效的用户代理客户端提示 Sec-CH-Prefers-Reduced-Motion,为已表明希望没有动画体验的用户提供互补体验。

规范

规范
SVG Animations Level 2
# AnimateElement

浏览器兼容性