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

Das <animate> SVG-Element bietet eine Möglichkeit, ein Attribut eines Elements über die Zeit hinweg zu animieren.

Verwendungskontext

Kategorien	Animationselement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Beschreibende Elemente

Attribute

Dieses Element enthält nur globale Attribute.

DOM-Schnittstelle

Dieses Element implementiert die SVGAnimateElement-Schnittstelle.

Beispiel

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>

Blinkende und blitzende Animationen können problematisch für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Zudem können bestimmte Bewegungsarten Auslöser für Vestibuläre Störungen, Epilepsie, Migräne und Skotopisches Syndrom sein.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen, sowie die Verwendung der Reduced Motion Media Query oder eines entsprechenden User-Agent client hints Sec-CH-Prefers-Reduced-Motion, um ein ergänzendes Erlebnis für Nutzer zu schaffen, die eine Präferenz für keine animierten Erlebnisse geäußert haben.

Spezifikationen

Specification
SVG Animations Level 2 # AnimateElement