<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,
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>

使用上のメモ

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

アクセシビリティの考慮

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

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

仕様書

Specification
SVG Animations Level 2 # AnimateElement

ブラウザーの互換性

BCD tables only load in the browser