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

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

Spezifikationen

Specification
CSS Animations Level 2
CSS Animations Level 1

Siehe auch