Web Animations API

Die Web Animations API ermöglicht es, Änderungen der Darstellung einer Webseite zu synchronisieren und zu timen, also die Animation von DOM-Elementen. Dies erfolgt durch die Kombination zweier Modelle: das Timing Model und das Animation Model.

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 Konzepte hinter der API und deren Nutzung zu erfahren, lesen Sie Using the Web Animations API.

Web Animations Schnittstellen

Animation: Bietet Wiedergabesteuerungen und eine Timeline für einen Animationsknoten oder eine Quelle. Kann ein Objekt aufnehmen, das mit dem KeyframeEffect() Konstruktor erstellt wurde.
KeyframeEffect: Beschreibt Sätze von animierbaren Eigenschaften und Werten, genannt Keyframes, und deren Timingeinstellungen. Diese können dann mit dem Animation() Konstruktor abgespielt werden.
AnimationTimeline: Stellt die Zeitleiste der Animation dar. Diese Schnittstelle existiert, um Zeitleistenfunktionen zu definieren (übernommen von DocumentTimeline und zukünftigen Zeitleistenobjekten) und wird nicht direkt von Entwicklern verwendet.
AnimationEvent: Teil des CSS Animations Moduls, das den Animationsnamen und die verstrichene Zeit erfasst.
DocumentTimeline: Stellt Animationstimelines dar, einschließlich der Standard-Dokumenttimeline (zugänglich über die Document.timeline Eigenschaft).

Erweiterungen zu anderen Schnittstellen

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

Erweiterungen der `Document` Schnittstelle

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

Erweiterungen der `Element` Schnittstelle

Element.animate(): Eine Abkürzungsmethode zum Erstellen und Abspielen einer Animation auf einem Element. Es gibt die erstellte Animation Objektinstanz zurück.
Element.getAnimations(): Gibt ein Array von Animation Objekten zurück, die derzeit ein Element beeinflussen oder dies in Zukunft tun werden.

Spezifikationen

Specification
Web Animations