<animate>

Verwendungskontext

Attribute

Dieses Element umfasst nur globale Attribute.

DOM-Schnittstelle

Dieses Element implementiert die SVGAnimateElement Schnittstelle.

Beispiel

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

Barrierefreiheitsbedenken

Blinkende und flackernde Animationen können problematisch für Personen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) 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.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren der Animation bereitzustellen, sowie die Verwendung der Reduced Motion Media Query oder des entsprechenden User Agent client hint Sec-CH-Prefers-Reduced-Motion, um ein entsprechendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für keine animierten Erlebnisse ausgedrückt haben.

• Designing Safer Web Animation For Motion Sensitivity · Ein Artikel von A List Apart
• Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Understanding WCAG, Erläuterungen zur Richtlinie 2.2
• Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0

Spezifikationen

Browser-Kompatibilität