animate

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

Attribute

Globale Attribute

• Conditional processing attributes »
• Core attributes »
• Animation event attributes »
• Xlink attributes »
• Animation attribute target attributes »
• Animation timing attributes »
• Animation value attributes »
• Animation addition attributes »
• externalResourcesRequired

Spezifische Attribute

• attributeName
• attributeType
• from
• to
• dur
• repeatCount

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

Browser Kompatiblität