<animate>

Das <animate> SVG-Element bietet eine Möglichkeit, ein Attribut eines Elements im Laufe der Zeit zu animieren.

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>

Verwendungshinweise

Dieses Element implementiert die SVGAnimateElement-Schnittstelle.

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

Es sollte in Betracht gezogen werden, eine Möglichkeit zum Anhalten oder Deaktivieren der Animation bereitzustellen, sowie die Reduced Motion Media Query oder den entsprechenden User Agent Client Hint Sec-CH-Prefers-Reduced-Motion zu verwenden, um ein alternatives Erlebnis für Nutzer zu schaffen, die eine Präferenz für nicht-animierte Erfahrungen angegeben haben.

Spezifikationen

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.