Web Animations API

Die Web Animations API ermöglicht die Synchronisierung und zeitliche Steuerung von Änderungen an der Darstellung einer Webseite, d.h. die Animation von DOM-Elementen. Dazu kombiniert sie zwei Modelle: das Timing Model und das Animation Model.

Konzepte und Verwendung

Die Web Animations API bietet Browsern und Entwicklern eine gemeinsame Sprache zur Beschreibung von Animationen auf DOM-Elementen. Weitere Informationen zu den Konzepten hinter der API und ihrer Verwendung finden Sie unter Verwendung der Web Animations API.

Barrierefreiheit

Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen wie einer Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Bewegungsarten Vestibularstörungen, Epilepsie, Migräne und skotopische Empfindlichkeit auslösen.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen, sowie die Media Query für reduzierte Bewegung (oder den entsprechenden Client Hint des User Agents Sec-CH-Prefers-Reduced-Motion) zu verwenden, um Nutzern, die eine Präferenz für nicht animierte Erlebnisse angegeben haben, eine ergänzende Erfahrung zu bieten.

Web-Animations-Schnittstellen

Animation: Bietet Wiedergabesteuerungen und eine Zeitleiste für einen Animationsknoten oder eine Animationsquelle. Kann ein Objekt übernehmen, das mit dem Konstruktor KeyframeEffect() erstellt wurde.
KeyframeEffect: Beschreibt Sätze animierbarer Eigenschaften und Werte, die keyframes genannt werden, sowie deren Timing-Optionen. Diese können anschließend mithilfe des Konstruktors Animation() wiedergegeben werden.
AnimationTimeline: Repräsentiert die Zeitleiste einer Animation. Diese Schnittstelle dient zur Definition von Zeitleistenfunktionen (geerbt von DocumentTimeline und zukünftigen Zeitleistenobjekten) und wird nicht direkt von Entwicklern verwendet.
AnimationEvent: Teil des Moduls CSS-Animationen, das den Animationsnamen und die vergangene Zeit erfasst.
DocumentTimeline: Repräsentiert Animationszeitleisten, einschließlich der standardmäßigen Dokumentzeitleiste (auf die über die Eigenschaft Document.timeline zugegriffen wird).

Erweiterungen anderer Schnittstellen

Die Web Animations API fügt document und element Funktionen hinzu.

Erweiterungen der `Document`-Schnittstelle

document.timeline: Das DocumentTimeline-Objekt, das die standardmäßige Dokumentzeitleiste repräsentiert.
document.getAnimations(): Gibt ein Array von Animation-Objekten zurück, die derzeit auf Elemente im document wirken.

Erweiterungen der `Element`-Schnittstelle

Element.animate(): Eine Kurzformmethode zum Erstellen und Wiedergeben einer Animation auf einem Element. Sie gibt die erstellte Instanz des Animation-Objekts zurück.
Element.getAnimations(): Gibt ein Array von Animation-Objekten zurück, die derzeit ein Element beeinflussen oder dies künftig geplant tun werden.

Spezifikationen

Spezifikation
Web Animations

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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