<animate>

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das SVG-Element <animate> bietet eine Möglichkeit, ein Attribut eines Elements im Laufe der Zeit 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 Schnittstelle SVGAnimateElement.

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 flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen wie einer Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Außerdem können bestimmte Bewegungsarten vestibuläre Störungen, Epilepsie, Migräne und skotopische Sensibilität auslösen.

Ziehen Sie in Betracht, einen Mechanismus zum Anhalten oder Deaktivieren von Animationen bereitzustellen. Verwenden Sie außerdem die Reduced Motion Media Query oder den entsprechenden User-Agent-Client-Hint Sec-CH-Prefers-Reduced-Motion, um eine ergänzende Erfahrung für Nutzer zu schaffen, die eine Präferenz für nicht animierte Erfahrungen angegeben haben.

Spezifikationen

Spezifikation
SVG Animations Level 2 # AnimateElement

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden