Animation

Animation()

Erstellt eine neue Animation Objektinstanz.

Animation.currentTime

Der aktuelle Zeitwert der Animation in Millisekunden, unabhängig davon, ob sie läuft oder pausiert ist. Wenn der Animation eine timeline fehlt, sie inaktiv ist oder noch nicht abgespielt wurde, hat sie den Wert null.

Animation.effect

Ruft den mit dieser Animation verknüpften AnimationEffect ab oder setzt ihn. Dies ist in der Regel ein KeyframeEffect Objekt.

Animation.finished Schreibgeschützt

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

Animation.id

Ruft die String-Kennung der Animation ab oder setzt sie.

Animation.overallProgress Schreibgeschützt Experimentell

Gibt eine Zahl zwischen 0 und 1 zurück, die den Gesamtfortschritt der Animation in Richtung ihres abgeschlossenen Zustands angibt.

Animation.pending Schreibgeschützt

Gibt 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

Ruft die Wiedergabegeschwindigkeit der Animation ab oder setzt sie.

Animation.ready Schreibgeschützt

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

Animation.replaceState Schreibgeschützt

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

Animation.startTime

Ruft die geplante Zeit ab oder setzt sie, wann die Wiedergabe einer Animation beginnen soll.

Animation.timeline

Ruft die mit dieser Animation verknüpfte timeline ab oder setzt sie.

Animation.cancel()

Löscht alle durch diese Animation verursachten keyframeEffects und bricht deren Wiedergabe ab.

Animation.commitStyles()

Übernimmt den aktuellen Stilzustand einer Animation auf das animierte Element, auch nachdem diese Animation entfernt wurde. Es wird dazu führen, dass der aktuelle Stilzustand in Form von Eigenschaften innerhalb eines style-Attributs auf das animierte Element angewendet wird.

Animation.finish()

Springt entweder zum Ende oder zum Anfang 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()

Beibehaltung einer Animation explizit verhindern, dass sie automatisch entfernt wird, wenn eine andere Animation sie ersetzt.

Animation.play()

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

Animation.reverse()

Kehrt die Wiedergaberichtung um und stoppt am Anfang der Animation. Wenn die Animation abgeschlossen oder ungespielt ist, wird sie vom Ende zum Anfang abgespielt.

Animation.updatePlaybackRate()

Setzt die Geschwindigkeit einer Animation, nachdem zuerst die Wiedergabeposition synchronisiert wurde.

cancel

Wird ausgelöst, wenn die Methode Animation.cancel() aufgerufen wird oder wenn die Animation vom "idle" Wiedergabestatus in einen anderen Zustand wechselt.

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 für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für Vestibular-Störungen, Epilepsie und Migräne sowie Skotopische Empfindlichkeit sein.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen und verwenden Sie die Reduced Motion Media Query (oder die entsprechende user agent client hint Sec-CH-Prefers-Reduced-Motion), um ein ergänzendes Erlebnis für Benutzer zu schaffen, die keine animierten Erlebnisse bevorzugen.

• Gestaltung sicherer Webanimationen für Bewegungsempfindlichkeit · Ein Artikel von A List Apart
• Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
• Reaktionsfähiges Design für Bewegung | WebKit
• MDN Verständnis WCAG, Richtlinie 2.2 Erklärungen
• Verständnis der Erfolgskriterien 2.2.2 | W3C Verständnis WCAG 2.0

• Web Animations API