Web Animations API

Die Web Animations API ermöglicht das Synchronisieren und Timing von Änderungen in der Präsentation einer Webseite, d.h. Animation von DOM-Elementen. Dies erfolgt durch die Kombination zweier Modelle: dem Timing-Modell und dem Animationsmodell.

Konzepte und Verwendung

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

Web Animations Schnittstellen

Animation: Bietet Wiedergabesteuerungen und eine Zeitleiste für einen Animationsknoten oder eine Quelle. Kann ein Objekt verwenden, das mit dem KeyframeEffect() Konstruktor erstellt wurde.
KeyframeEffect: Beschreibt Sets animierbarer Eigenschaften und Werte, genannt Keyframes, sowie deren Timing-Optionen. Diese können dann mit dem Animation() Konstruktor abgespielt werden.
AnimationTimeline: Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle existiert, um Zeitleistenfunktionen zu definieren (vererbt von DocumentTimeline und zukünftigen Zeitleistenobjekten) und wird von Entwicklern selbst nicht direkt aufgerufen.
AnimationEvent: Teil des CSS Animations Moduls, das den Animationsnamen und die vergangene Zeit erfasst.
DocumentTimeline: Repräsentiert Animationszeitleisten, einschließlich der Standard-Dokumentzeitleiste (abgerufen über die Document.timeline Eigenschaft).

Erweiterungen anderer 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-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 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 derzeit ein Element beeinflussen oder dies in Zukunft tun werden.