CSS-Animationen
Das CSS animations-Modul ermöglicht es, die Werte von CSS-Eigenschaften wie background-position
und transform
im Laufe der Zeit mithilfe von Keyframes zu animieren. Jedes Keyframe beschreibt, wie das animierte Element zu einem bestimmten Zeitpunkt während der Animationssequenz dargestellt werden soll. Sie können die Eigenschaften des Animationsmoduls verwenden, um die Dauer, die Anzahl der Wiederholungen, eine verzögerte Startzeit und andere Aspekte einer Animation zu steuern.
Animationen in Aktion
Um die Animation im untenstehenden Bereich zu sehen, klicken Sie auf das Kontrollkästchen „Animation abspielen“ oder bewegen Sie den Cursor über den Bereich. Während die Animation aktiv ist, verändert sich die Form der Wolke oben, Schneeflocken fallen, und das Schneelevel am unteren Rand steigt an. Um die Animation zu pausieren, deaktivieren Sie das Kontrollkästchen oder bewegen Sie den Cursor vom Bereich weg.
Diese Beispielanimation verwendet animation-iteration-count
, um die Flocken wiederholt fallen zu lassen, animation-direction
, um die Wolke hin- und herzubringen, animation-fill-mode
, um das Schneelevel als Reaktion auf die Wolkenbewegung anzuheben, und animation-play-state
, um die Animation zu pausieren.
Klicken Sie auf „Play“ im obigen Beispiel, um den Code der Animation im MDN Playground anzuzeigen oder zu bearbeiten.
Referenz
Eigenschaften
animation
shorthandanimation-composition
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timeline
animation-timing-function
Hinweis:
Das CSS Animations Module Level 2 führt die Eigenschaften animation-trigger
, animation-trigger-exit-range
, animation-trigger-exit-range-end
, animation-trigger-exit-range-start
, animation-trigger-range
, animation-trigger-range-end
, animation-trigger-range-start
, animation-trigger-timeline
und animation-trigger-type
ein. Diese wurden noch nicht implementiert.
At-Regeln
Ereignisse
Alle Animationen, auch solche mit einer Dauer von 0 Sekunden, lösen Animationsevents aus.
Schnittstellen
Leitfäden
- Verwendung von CSS-Animationen
-
Schritt-für-Schritt-Anleitung zur Erstellung von Animationen mit CSS. Dieser Artikel beschreibt die mit Animationen verbundenen CSS-Eigenschaften und die At-Regel sowie deren Zusammenspiel.
- Verwendung der Web Animations API
-
Häufige Anforderungen an Animationen, 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 scrollbasierte Animationen-Modul.
- Eigenschaften im transitions-CSS-Modul, um Animationen basierend auf Benutzerinteraktionen auszulösen.
- Die
interpolate-size
-Eigenschaft und diecalc-size()
-Funktion, um Animationen zu und von intrinsischen Größenwerten zu ermöglichen. - Das
<canvas>
-HTML-Element zusammen mit der Canvas-API und der WebGL-API, um Grafiken und Animationen zu zeichnen. - Die
SVGAnimationElement
-Schnittstelle für alle animationbezogenen Element-Schnittstellen, einschließlichSVGAnimateElement
,SVGSetElement
,SVGAnimateColorElement
,SVGAnimateMotionElement
undSVGAnimateTransformElement
.