Ich persönlich mag Animationen auf Internetseiten, wie ihr sicher an meiner Webseite schon bemerkt habt. Sie bringen Schwung und Bewegung in die sonst leblosen Inhalte. Aber wie erstellt man Animationen? Schon von „keyframes“ gehört?

Immer mehr Browser unterstützen die Möglichkeit mit CSS-Code Animationen zu erstellen. Aktuell bieten Google Chrome ab Version 11, Apple Safari ab Version 4 und Mozilla Firefox ab Version 5 Unterstützung für „keyframes“, jedoch nur mit browserspezifischen Präfixen: Chrome und Safari -webkit- und Firefox -moz-.

In diesem Artikel habe ich „keyframes“ bereits vorgestellt und einige Beispiele gezeigt. Nachdem ich über diesen Artikel gestolpert bin, wollte ich etwas ähnliches nachbauen. Und da ich riesiger Filmfan bin, kam mir die Idee ein animiertes Bluray-Logo zu erstellen. Interessiert?

Okay. Dann mal los.

Was machen wir? Wir legen zwei Bilddateien übereinander, das oberste Bild bleibt statisch und hat ein transparentes Bluray-Logo mit weißem Hintergrund, darunter das zweite Bild, eine Zusammenstellung verschiedener Bluray-Cover, welches wir von rechts nach links in einer Endlosschleife verschieben. Sieht super aus. Aber seht selbst.

In die Webseite eingebunden wird das animierte Logo wie folgt:

<div id="bluray">
<div class="bg"></div>
</div>

Ihr seht, wir benötigen lediglich zwei Div-Container, welche wir per CSS so definieren:

#bluray {
background: url(br.png) no-repeat;
width: 840px;
height: 446px;
}
#bluray .bg {
background: url(br_bg.jpg) repeat;
height: 446px;
overflow: hidden;
position: relative;
z-index: -1;
}

Da das untere Bild größer ist, als das obere, verhindern wir mittels overflow: hidden, dass der Bereich, der über das obere Bild hinausragt, sichtbar ist. Damit aber das untere Bild auch wirklich darunter angeordnet wird, müssen wir position: relative sowie z-index: -1 definieren.

So weit so gut. Aber es fehlt noch die Animation, also das Verschieben des Hintergrunds des unteren Bildes. Zunächst erstellen wir die Animation mit dem Namen bg_animation:

@-webkit-keyframes bg_animation {
	0% { background-position: 1279px bottom; }
	100% { background-position: left bottom; }
}

@-moz-keyframes bg_animation {
	0% { background-position: 1279px bottom; }
	100% { background-position: left bottom; }
}

@keyframes bg_animation {
	0% { background-position: 1279px bottom; }
	100% { background-position: left bottom; }
}

und binden diese dann bei der bg benannten Klasse ein:

#bluray .bg {
	background: url(br_bg.jpg) repeat;
	height: 446px;
	overflow: hidden;
	position: relative;
	z-index: -1;
	-webkit-animation-name: bg_animation;
	-webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: bg_animation;
	-moz-animation-duration: 50s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	animation-name: bg_animation;
	animation-duration: 50s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

Damit verschieben wir das sich wiederholende (background: ... repeat) untere Bild in einer Endlosschleife (animation-iteration-count: infinite) von rechts nach links, wobei ein Durchlauf 50 Sekunden (animation-duration: 50s) benötigt.

Das war’s auch schon. Und so sieht’s aus:

Den Download gibt es hier

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: