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

Spezifikationen

Specification
CSS Animations Level 2
CSS Animations Level 1

Siehe auch