<animate>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Das <animate> SVG Element 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 umfasst nur globale Attribute.
DOM-Schnittstelle
Dieses Element implementiert die SVGAnimateElement Schnittstelle.
Beispiel
<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
| Specification |
|---|
| SVG Animations Level 2 # AnimateElement |