Web Animations API

Die Web Animations API ermöglicht das Synchronisieren und Timing-Changes für die Präsentation einer Webseite, d.h. die Animation von DOM-Elementen. Dies geschieht durch die Kombination von zwei Modellen: dem Timing-Modell und dem Animations-Modell.

Konzepte und Verwendung

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 Verwendung zu erhalten, lesen Sie Verwendung der Web Animations API.

Web Animations Schnittstellen

Animation: Bietet Wiedergabesteuerungen und eine Zeitleiste für einen Animationsknoten oder -quelle. Kann ein Objekt verwenden, das mit dem KeyframeEffect() Konstruktor erstellt wurde.
KeyframeEffect: Beschreibt Sets von animierbaren Eigenschaften und Werten, sogenannte Keyframes, und deren Timing-Optionen. Diese können dann mit dem Animation() Konstruktor abgespielt werden.
AnimationTimeline: Stellt die Zeitleiste der Animation dar. Diese Schnittstelle existiert, um Zeitleistenmerkmale zu definieren (vererbt durch DocumentTimeline und zukünftige Zeitleistenobjekte) und wird nicht direkt von Entwicklern aufgerufen.
AnimationEvent: Teil des CSS Animations Moduls, das den Animationsnamen und die verstrichene Zeit erfasst.
DocumentTimeline: Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (zugänglich über die Document.timeline Eigenschaft).

Erweiterungen zu anderen Schnittstellen

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

Erweiterungen der `Document` Schnittstelle

document.timeline: Das DocumentTimeline Objekt, das die Standarddokumentzeitleiste 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 Kurzschlussmethode 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 geplant haben.