Animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Das Animation-Interface der Web Animations API repräsentiert einen einzelnen Animationsplayer und bietet Wiedergabesteuerungen sowie eine Zeitleiste für einen Animationsknoten oder eine Quelle.

EventTarget Animation

Konstruktor

Animation()

Erstellt eine neue Animation-Objektinstanz.

Instanz-Eigenschaften

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, ist der Wert null.

Animation.effect

Ruft die mit dieser Animation verknüpfte AnimationEffect ab oder setzt sie. Dies wird normalerweise ein KeyframeEffect-Objekt sein.

Animation.finished Schreibgeschützt

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

Animation.id

Ruft die String ab oder setzt sie, die zur Identifizierung der Animation verwendet wird.

Animation.overallProgress Schreibgeschützt Experimentell

Gibt eine Zahl zwischen 0 und 1 zurück, die den Gesamtfortschritt der Animation hin zu ihrem abgeschlossenen Zustand angibt.

Animation.pending Schreibgeschützt

Gibt an, ob die Animation derzeit auf eine asynchrone Operation wartet, wie z.B. das Initiieren der Wiedergabe oder das Pausieren einer laufenden Animation.

Animation.playState Schreibgeschützt

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

Animation.playbackRate

Ruft die Wiedergaberate der Animation ab oder setzt sie.

Animation.ready Schreibgeschützt

Gibt das aktuelle bereitgestellte 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 explizit durch einen Aufruf von Animation.persist() beibehalten wurde.

Animation.startTime

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

Animation.timeline

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

Instanz-Methoden

Animation.cancel()

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

Animation.commitStyles()

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

Animation.finish()

Springt zu einem Ende einer Animation, abhängig davon, ob die Animation abgespielt oder umgekehrt wird.

Animation.pause()

Hält die Wiedergabe einer Animation an.

Animation.persist()

Behält eine Animation ausdrücklich bei, um zu 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 beendet war.

Animation.reverse()

Kehrt die Wiedergaberichtung um und stoppt am Anfang der Animation. Wenn die Animation beendet oder ungezeigt ist, wird sie von Ende zu Anfang abgespielt.

Animation.updatePlaybackRate()

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

Ereignisse

cancel

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

finish

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

remove

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

Barrierefreiheitshinweise

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Darüber hinaus können bestimmte Bewegungsarten ein Auslöser für Vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

Überlegen Sie, eine Mechanismus zum Pausieren oder Deaktivieren von Animationen bereitzustellen, sowie die Verwendung der Reduced Motion Media Query (oder eines entsprechenden user agent client hint Sec-CH-Prefers-Reduced-Motion), um eine ergänzende Erfahrung für Benutzer zu schaffen, die keine animierten Erlebnisse bevorzugen.

Spezifikationen

Specification
Web Animations
# the-animation-interface

Browser-Kompatibilität

Siehe auch