Das animate
Element wird innerhalb eines Shape Elements angelegt und definiert, wie ein Attribut des Elements sich durch die Animation verändert.Das Attribut wird sich innerhalb der angegebenen Dauer vom initialen- zum End-Wert ändern.
Es wird normalerweise innerhalb des Elements eingefügt, oder referenziert von einem href
attribut des Zielelements.
Usage context
Kategorien | Animationselement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl der folgenden Elemente, in beliebiger Reihenfolge: Beschreibende Elemente |
Attribute
Globale Attribute
Spezifische Attribute
DOM Schnittstelle
Dieses Element implementiert die SVGAnimateElement
Schnittstelle.
Beispiel
SVG
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="-100" to="120"
dur="10s" repeatCount="indefinite"/>
</rect>
</svg>
Ergebnis
Bedenken bezüglich der Barrierefreiheit
Blinkende und blitzende Animation kann für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.
Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren der Animation vorzusehen, sowie die Reduced Motion Media Query zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für keine Animationen haben.
- Designen von sicheren Web Animationen für Bewegungsempfindlichkeit - Ein Artikel der Extraklasse
- Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
- Responsives Design für Bewegungen | WebKit
- MDN Verstehen der WCAG, Guideline 2.2 Erklärungen
- Verstehen der Erfolgskriteren 2.2.2 | W3C Understanding WCAG 2.0
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
SVG Animations Level 2 Die Definition von '<animate>' in dieser Spezifikation. |
Bearbeiterentwurf | Keine Änderung |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Die Definition von '<animate>' in dieser Spezifikation. |
Empfehlung | Initiale Definition |
Browser Kompatiblität
BCD tables only load in the browser