Animation - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Animation

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.

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

EventTarget Animation

In diesem Artikel

Konstruktor

Animation()

Erstellt eine neue Instanz eines Animation-Objekts.

Instanz-Eigenschaften

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

Animation.effect

Ruft den mit dieser Animation verknüpften AnimationEffect ab oder setzt ihn. Dies wird normalerweise ein KeyframeEffect-Objekt sein.

Animation.finished Schreibgeschützt

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

Animation.id

Ruft die zur Identifizierung der Animation verwendete String-ID ab oder setzt diese.

Animation.overallProgress Schreibgeschützt

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

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

Ruft die Wiedergabegeschwindigkeit der Animation ab oder setzt diese.

Animation.ready Schreibgeschützt

Gibt das aktuelle "ready" 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() gespeichert wurde.

Animation.startTime

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

Animation.timeline

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

Instanz-Methoden

Animation.cancel()

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

Animation.commitStyles()

Überträgt den aktuellen Stilstatus einer Animation auf das animierte Element, selbst nachdem diese Animation entfernt wurde. Es wird der aktuelle Stilstatus in Form von Eigenschaften innerhalb eines style-Attributs auf das animierte Element übertragen.

Animation.finish()

Ermöglicht das Blättern zum Ende oder Anfang einer Animation, je nachdem, ob die Animation vorwärts oder rückwärts abgespielt wird.

Animation.pause()

Unterbricht die Wiedergabe einer Animation.

Animation.persist()

Speichert eine Animation explizit, sodass sie nicht 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 wurde.

Animation.reverse()

Kehrt die Wiedergaberichtung um und stoppt am Anfang der Animation. Wenn die Animation beendet oder noch nicht abgespielt wurde, läuft sie von Ende zu Anfang.

Animation.updatePlaybackRate()

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

Ereignisse

cancel

Wird ausgelöst, wenn die Methode Animation.cancel() aufgerufen wird oder wenn die Animation vom aktuellen Zustand in den "idle"-Spielzustand übergeht.

finish

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

remove

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

Barrierefreiheitsbedenken

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 für Vestibuläre Störungen, Epilepsie und Migräne sowie Skotopische Sensitivität ein Auslöser sein.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen sowie die Reduced Motion Media Query (oder einen äquivalenten User-Agent-Client-Hinweis Sec-CH-Prefers-Reduced-Motion) zu verwenden, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für keine animierten Erlebnisse ausgedrückt haben.