320NN Development Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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]]):

<code css>
h1 {
	animation-name:		fadeIn;
	animation-duration:	2s;
}

/* Animations */

@keyframes fadeIn {
	from {
		opacity:	0;
	}

	to {
		opacity:	1;
	}
}
</code>

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]]