====== 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 ([[http://jsfiddle.net/320nn/CwpX2/|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. [[http://jsfiddle.net/320nn/CwpX2/|Demo bei jsFiddle]]