Hinweis: Animation mit CSS3 ist noch ein experimentelles Feature!

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.

Demo bei jsFiddle