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.

Spezifikationen

Siehe auch

• CSS animation Kurzschreibweise
• CSS animation-timeline Eigenschaft
• Verwendung der Web Animations API
• Verwendung von CSS-Animationen
• CSS-Animationen Modul
• CSS scroll-gesteuerte Animationen Modul