<animate>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<animate>SVG の要素で、時間の経過に応じて要素の属性を変化させる方法を提供します。

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>

使用上のメモ

この要素は SVGAnimateElement インターフェイスを実装しています。

アクセシビリティの考慮

点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。

アニメーションを一時停止したり無効にしたりする仕組みを提供したり、動き軽減メディアクエリーまたは同様のユーザーエージェントクライアントヒントである Sec-CH-Prefers-Reduced-Motion を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。

仕様書

Specification
SVG Animations Level 2
# AnimateElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animate
attributeName
attributeType
dur
fill
from
href
repeatCount
systemLanguage
to

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support