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
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 imdocument
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.
Spezifikationen
Specification |
---|
Web Animations |
Siehe auch
- CSS
animation
Kurzschreibweise - CSS
animation-timeline
Eigenschaft - Verwendung der Web Animations API
- Verwendung von CSS-Animationen
- CSS-Animations Modul
- CSS-Scroll-getriebene Animationen Modul