<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 <animate> SVG-Element bietet eine Möglichkeit, ein Attribut eines Elements im Laufe der Zeit zu animieren.
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>
Nutzungshinweise
Dieses Element implementiert die SVGAnimateElement-Schnittstelle.
Zugänglichkeitsbedenken
Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen, wie dem Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS), problematisch sein. Zudem kann eine bestimmte Art von Bewegung Auslöser für Vestibuläre Störungen, Epilepsie, Migräne und Skiotopische Empfindlichkeit sein.
Es sollte in Betracht gezogen werden, eine Möglichkeit zum Pausieren oder Deaktivieren der Animation bereitzustellen, sowie die Reduced Motion Media Query oder die entsprechenden User Agent Client Hint Sec-CH-Prefers-Reduced-Motion zu verwenden, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für nicht animierte Erlebnisse angegeben haben.
- Designing Safer Web Animation For Motion Sensitivity · Ein A List Apart Artikel
- Einführung in die Reduced Motion Media Query | CSS-Tricks
- Responsive Design für Bewegung | WebKit
- MDN Verständnis von WCAG, Erklärung zur Richtlinie 2.2
- Verständnis des Erfolgskriteriums 2.2.2 | W3C Verständnis von WCAG 2.0
Spezifikationen
| Specification |
|---|
| SVG Animations Level 2 # AnimateElement |