<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>
Verwendungshinweise
Dieses Element implementiert die SVGAnimateElement-Schnittstelle.
Zugänglichkeitsbedenken
Blinkende und blitzende 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.
Überlegen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen anzubieten, sowie die Verwendung der Reduced Motion Media Query oder eines gleichwertigen User Agent client hint Sec-CH-Prefers-Reduced-Motion, um eine ergänzende Erfahrung für Benutzer zu schaffen, die keine animierten Erlebnisse wünschen.
- Designing Safer Web Animation For Motion Sensitivity · Ein Artikel von An A List Apart
- Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
- Responsive Design für Bewegung | WebKit
- MDN Verständnis von WCAG, Leitfaden 2.2 Erklärungen
- Verständnis des Erfolgskriteriums 2.2.2 | W3C Verständnis von WCAG 2.0
Spezifikationen
| Specification |
|---|
| SVG Animations Level 2 # AnimateElement |