Animation

Animation()

Erstellt eine neue Instanz des Animation Objekts.

Animation.currentTime

Der aktuelle Zeitwert der Animation in Millisekunden, egal ob sie läuft oder pausiert ist. Wenn der Animation eine timeline fehlt, sie inaktiv ist oder noch nicht abgespielt wurde, beträgt ihr Wert null.

Animation.effect

Holt und setzt den mit dieser Animation verbundenen AnimationEffect. Dies wird normalerweise ein KeyframeEffect Objekt sein.

Animation.finished Schreibgeschützt

Gibt das aktuelle abgeschlossene Promise für diese Animation zurück.

Animation.id

Holt und setzt den String, der zur Identifizierung der Animation verwendet wird.

Animation.pending Schreibgeschützt

Zeigt an, ob die Animation derzeit auf eine asynchrone Operation wartet, wie das Starten der Wiedergabe oder das Pausieren einer laufenden Animation.

Animation.playState Schreibgeschützt

Gibt einen enumerierten Wert zurück, der den Wiedergabestatus einer Animation beschreibt.

Animation.playbackRate

Holt oder setzt die Abspielgeschwindigkeit der Animation.

Animation.ready Schreibgeschützt

Gibt das aktuelle ready Promise für diese Animation zurück.

Animation.replaceState Schreibgeschützt

Zeigt an, ob die Animation aktiv ist, automatisch entfernt wurde, nachdem sie durch eine andere Animation ersetzt wurde, oder ob sie durch einen Aufruf von Animation.persist() explizit beibehalten wurde.

Animation.startTime

Holt oder setzt die geplante Zeit, zu der die Wiedergabe einer Animation beginnen soll.

Animation.timeline

Holt oder setzt die mit dieser Animation verbundene timeline.

Animation.cancel()

Löscht alle durch diese Animation verursachten keyframeEffects und beendet ihre Wiedergabe.

Animation.commitStyles()

Übernimmt den aktuellen Stilzustand einer Animation für das animierte Element, auch nachdem diese Animation entfernt wurde. Es wird den aktuellen Stilzustand auf das animierte Element anwenden, in Form von Eigenschaften innerhalb eines style Attributs.

Animation.finish()

Springt zu einem der Enden einer Animation, abhängig davon, ob die Animation vorwärts oder rückwärts abgespielt wird.

Animation.pause()

Unterbricht die Wiedergabe einer Animation.

Animation.persist()

Beibehält eine Animation explizit und verhindert deren automatische Entfernung, wenn sie durch eine andere Animation ersetzt wird.

Animation.play()

Startet oder setzt die Wiedergabe einer Animation fort oder beginnt die Animation erneut, wenn sie zuvor beendet wurde.

Animation.reverse()

Kehrt die Abspielrichtung um und stoppt am Anfang der Animation. Wenn die Animation beendet oder nicht abgespielt wurde, wird sie von Ende zu Anfang abgespielt.

Animation.updatePlaybackRate()

Setzt die Geschwindigkeit einer Animation, nachdem zunächst ihre Wiedergabeposition synchronisiert wurde.

cancel

Wird ausgelöst, wenn die Methode Animation.cancel() aufgerufen wird oder wenn die Animation den "idle" Wiedergabezustand aus einem anderen Zustand erreicht.

finish

Wird ausgelöst, wenn die Animation das Abspielen beendet.

remove

Wird ausgelöst, wenn die Animation vom Browser automatisch entfernt wird.

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Anliegen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Zusätzlich 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, eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitzustellen, sowie die Verwendung der Media Query für reduzierte Bewegung (oder des entsprechenden User-Agent-Client-Hints Sec-CH-Prefers-Reduced-Motion), um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für nicht-animierte Erlebnisse angegeben haben.

• Sicherere Webanimationen für Bewegungsempfindlichkeit entwerfen · Ein Artikel von An A List Apart
• Eine Einführung in die Media Query für reduzierte Bewegung | CSS-Tricks
• Responsive Design für Bewegung | WebKit
• MDN Verstehen der WCAG, Erklärungen zur Richtlinie 2.2
• Verständnis des Erfolgskriteriums 2.2.2 | W3C Verstehen der WCAG 2.0

• Web Animations API