Web Animations API

Die Web Animations API ermöglicht das Synchronisieren und Timing-Änderungen der Darstellung einer Webseite, d.h. die Animation von DOM-Elementen. Sie tut dies, indem sie zwei Modelle kombiniert: das Timing-Modell und das Animationsmodell.

Konzepte und Nutzung

Die Web Animations API bietet eine gemeinsame Sprache für Browser und Entwickler, um Animationen auf DOM-Elementen zu beschreiben. Um mehr Informationen über die zugrundeliegenden Konzepte der API und deren Verwendung zu erhalten, lesen Sie Using the Web Animations API.

Barrierefreiheit

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Bedenken wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Zusätzlich können bestimmte Arten von Bewegungen Auslöser für vestibuläre Störungen, Epilepsie und Migräne sowie skotopische Empfindlichkeit sein.

Überlegen Sie, eine Möglichkeit bereitzustellen, Animationen zu pausieren oder zu deaktivieren, sowie die Reduced Motion Media Query (oder ein entsprechender user agent client hint Sec-CH-Prefers-Reduced-Motion) einzusetzen, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die keine animierten Erfahrungen bevorzugen.

Web Animations Schnittstellen

Animation: Bietet Wiedergabesteuerungen und eine Zeitleiste für einen Animationsknoten oder -quelle. Kann ein mit dem KeyframeEffect() Konstruktor erstelltes Objekt übernehmen.
KeyframeEffect: Beschreibt Sätze von animierbaren Eigenschaften und Werten, sogenannte Keyframes, und deren Timing-Optionen. Diese können dann mithilfe des Animation() Konstruktors abgespielt werden.
AnimationTimeline: Repräsentiert die Zeitachse der Animation. Diese Schnittstelle existiert, um Zeitleistenmerkmale (geerbt von DocumentTimeline und zukünftigen Zeitleistenobjekten) zu definieren, und wird nicht direkt von Entwicklern verwendet.
AnimationEvent: Teil des CSS Animations Moduls, das den Animationsnamen und die verstrichene Zeit erfasst.
DocumentTimeline: Repräsentiert Animationszeitleisten, einschließlich der Standard-Dokumentenzeitleiste (zugänglich über die Document.timeline Eigenschaft).

Erweiterungen zu anderen Schnittstellen

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

Erweiterungen der `Document` Schnittstelle

document.timeline: Das DocumentTimeline Objekt, das die Standard-Dokumentenzeitleiste darstellt.
document.getAnimations(): Gibt ein Array von Animation Objekten zurück, die derzeit auf Elemente im document wirken.

Erweiterungen der `Element` Schnittstelle

Element.animate(): Eine Abkürzungsmethode zum Erstellen und Abspielen einer Animation auf einem Element. Sie gibt die erstellte Animation Objektinstanz zurück.
Element.getAnimations(): Gibt ein Array von Animation Objekten zurück, die ein Element derzeit beeinflussen oder dies in Zukunft 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