`<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 SVG-Element <animate>
bietet eine Möglichkeit, ein Attribut eines Elements über die 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 das Interface SVGAnimateElement
.
Barrierefreiheit
Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen, wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS), problematisch 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.
Überlegen Sie, ob Sie eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitstellen, sowie die Reduced Motion Media Query oder das entsprechende User Agent client hint Sec-CH-Prefers-Reduced-Motion
, um eine ergänzende Erfahrung für Nutzer zu schaffen, die eine Vorliebe für unbewegte Erlebnisse geäußert haben.
- Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
- An Introduction to the Reduced Motion Media Query | CSS-Tricks
- Responsive Design for Motion | WebKit
- MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 2.2
- Verständnis des Erfolgskriteriums 2.2.2 | W3C Verständnis von WCAG 2.0
Spezifikationen
Specification |
---|
SVG Animations Level 2 # AnimateElement |
Browser-Kompatibilität
BCD tables only load in the browser