Animation mit CSS3
Hinweis: Animation mit CSS3 ist noch ein experimentelles Feature!
Simples Beispiel
In diesem einfachen Beispiel wird die h1
-Überschrift langsam, mittels einen Fade-in-Effektes, eingeblendet (Demo):
h1 { animation-name: fadeIn; animation-duration: 2s; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
Die Animation bzw. der Animationsablauf wird in dem Abschnitt @keyframes
mit einem frei-wählbaren Namen definiert (hier: fadeIn
). In der Element-Definition (hier die Definition für h1
) wird dann die Animation über die Eigenschaft animation-name
mit dem Animationsnamen (also fadeIn
) dem Element (hier h1
) zugewiesen; die Eigenschaft animation-duration
gibt dabei die Dauer der Animation an.
Dadurch, dass der Animationsablauf in einem, von der Element-Definition getrenntem, Abschnitt definiert wird, kann der gleiche Animationsablauf, mit anderen Zeiten bzw. Geschwindigkeiten, in anderen Element-Definitionen wiederverwendet werden.
Eine Animation läuft immer zwischen zwei Schlüsselbildern (eng. „Keyframes“) ab. Für eine simple Animation, wie hier, müssen also mindestens zwei Schlüsselbilder im Abschnitt @keyframes
definiert werden: ein Start-Schlüsselbild und ein Ziel-Schlüsselbild. Das Start-Schlüsselbild kann mit from
und das Ziel-Schlüsselbild mit to
definiert werden. In den Schlüsselbildern werden dann die Eigenschaften, die animiert werden sollen, definiert: Im Start-Schlüsselbild die Eigenschaften mit den Werten für die Eingangssituation, im Ziel-Schlüsselbild die Eigenschaften mit den Werten für die Ausgangssituation.
Für einen Fade-in-Effekt, wie im obigen Beispiel, kann die CSS-Eigenschaft opacity
(dt. „Deckkraft“) verwendet werden: Im Start-Schlüsselbild hat opacity
den Wert 0, im Ziel-Schlüsselbild den Wert 1. Die Animation findet nun zwischen diesen beiden Werten statt und zwar mit der, in animation-duration
für das Element (hier h1
) definierten, Zeit.