`<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 SVG-Element <animate> bietet eine Möglichkeit, ein Attribut eines Elements über die Zeit zu animieren.

Beispiel

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>

Verwendungshinweise

Dieses Element implementiert das Interface SVGAnimateElement.

Barrierefreiheit

Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen, wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS), problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

Überlegen Sie, ob Sie eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitstellen, sowie die Reduced Motion Media Query oder das entsprechende User Agent client hint Sec-CH-Prefers-Reduced-Motion, um eine ergänzende Erfahrung für Nutzer zu schaffen, die eine Vorliebe für unbewegte Erlebnisse geäußert haben.

Spezifikationen

Specification
SVG Animations Level 2
# AnimateElement

Browser-Kompatibilität

BCD tables only load in the browser