CSS-Animationen
Das Modul CSS-Animationen ermöglicht es Ihnen, die Werte von CSS-Eigenschaften wie background-position
und transform
über die Zeit mithilfe von Keyframes
zu animieren. Jedes Keyframe beschreibt, wie das animierte Element zu einem bestimmten Zeitpunkt während der Animationssequenz angezeigt werden soll. Sie können die Eigenschaften im Animationsmodul verwenden, um die Dauer, die Anzahl der Wiederholungen, den verzögerten Start und andere Aspekte einer Animation zu steuern.
Animationen in Aktion
Um die Animation im unten stehenden Kasten zu sehen, klicken Sie auf das Kontrollkästchen 'Play the animation' oder bewegen Sie den Cursor über den Kasten. Wenn die Animation aktiv ist, verändert die Wolke oben ihre Form, Schneeflocken fallen und der Schneepegel am Boden steigt. Um die Animation zu pausieren, deaktivieren Sie das Kontrollkästchen oder entfernen Sie den Cursor vom Kasten.
Diese Beispielanimation verwendet animation-iteration-count
, um die Flocken wiederholt fallen zu lassen, animation-direction
, um die Wolke hin- und her zu bewegen, animation-fill-mode
, um den Schneepegel als Reaktion auf die Wolkenbewegung anzuheben, und animation-play-state
, um die Animation zu pausieren.
Um den Code für diese Animation zu sehen, sehen Sie sich den Quellcode auf GitHub an.
Referenz
Eigenschaften
At-Regeln
Ereignisse
Alle Animationen, selbst die mit einer Dauer von 0 Sekunden, lösen Animationsevents aus.
Schnittstellen
Leitfäden
- Verwendung von CSS-Animationen
-
Schritt-für-Schritt-Anleitung, wie man Animationen mit CSS erstellt. Dieser Artikel beschreibt die mit Animationen verbundenen CSS-Eigenschaften und die At-Regel und wie sie miteinander interagieren.
- Verwendung der Web Animations API
-
Gemeinsame Animationsanforderungen, die mit wenigen Zeilen JavaScript gelöst werden können.
Verwandte Konzepte
will-change
CSS-Eigenschaft<easing-function>
Datentypprefers-reduced-motion
Media-Query- Bezier-Kurve Glossarbegriff
Spezifikationen
Specification |
---|
CSS Animations Level 2 |
CSS Animations Level 1 |
Siehe auch
- CSS scroll-gesteuerte Animationen
- Eigenschaften im Transitions CSS-Modul, um Animationen basierend auf Benutzeraktionen auszulösen
- Die
interpolate-size
Eigenschaft undcalc-size()
Funktion, um Animationen zu und von intrinsic size values zu ermöglichen. - Das
<canvas>
HTML-Element zusammen mit der Canvas API und WebGL API zum Zeichnen von Grafiken und Animationen - Die
SVGAnimationElement
Schnittstelle für alle animationbezogenen Element-Schnittstellen, einschließlichSVGAnimateElement
,SVGSetElement
,SVGAnimateColorElement
,SVGAnimateMotionElement
undSVGAnimateTransformElement