Animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2020⁩.

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

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.

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.

Spezifikationen

Specification
Web Animations # the-animation-interface

Browser-Kompatibilität

Siehe auch

Web Animations API

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden