Mit “keyframes” lassen sich tolle Sachen machen. Die Funktionsweise sowie einige Beispiele habe ich in diesem Artikel demonstriert. So habt ihr unter anderem die Möglichkeit den Hintergrund in einer bestimmten Zeitspanne in festgelegten Schritten zu verschieben. Und so kam mir die Idee einen Timer zu erstellen und mit “keyframes” zu animieren.

Der fertige Timer, der die Sekunden bis zu einer Minute hochzählt, sieht dann so aus

Interessiert?

Basics

Ganz ohne Bilddateien funktioniert der Timer leider nicht. Wir müssen zwei Bilddateien für die Zahlen erstellen. Ein Bild mit den Zahlen 0 bis 9 für die Sekunden und ein Bild mit Zahlen von 0 bis 5 für die Zehnsekunden. Das erste Bild hat eine Größe von 150 x 2000 Pixeln, wobei jede Zahl maximal 150 x 200 Pixel groß ist. Das zweite Bild hat eine Größe von 150 x 1200 Pixel. Achtet darauf, dass der Hintergrund der Bilder transparent ist. Am besten speichert ihr die Bilder als “png”.

Wer keine Lust hat die Grafiken selbst zu erstellen, kann hier zugreifen:

Leider ist mir noch keine Lösung eingefallen, wie man die Sekundenanzeige mit Text statt Bilder erstellen kann. Jemand eine Idee? Dann bitte melden.

Okay weiter geht’s. Wir binden den Timer als Div-Container in unsere Webseite ein. Der Sekundenzähler sowie der Zehnsekundenzähler haben eine Breite von 150 Pixeln. Zwischen den beiden Boxen bleibt ein Whitespace von 10 Pixeln. Der Div-Container hat also insgesamt eine Breite von 310 Pixeln.

#timer {
width: 310px;
margin: 20px auto;
padding: 0;
}

Die beiden Zähler-Boxen haben jeweils eine Breite von 150 sowie eine Höhe von 250 Pixeln. Die erste Box (Zehnsekunden) floatet nach links, die zweite (Sekunden) nach rechts.

.box_tenseconds {
float: left;
width: 150px;
height: 250px;
margin: 50px auto;
text-align: center;
overflow: hidden;
}

.box_seconds {
float: right;
width: 150px;
height: 250px;
margin: 50px auto;
text-align: center;
overflow: hidden;
}

Das overflow: hidden sorgt übrigens dafür, dass der Teil des Hintergrundes, der sich außerhalb der Zählerboxen befindet, nicht sichtbar ist.

Wir fügen noch einen abgerundeten Rand sowie einen Schlagschatten für die Zählerboxen hinzu

-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 4px 5px 5px #999;
-webkit-box-shadow: 4px 5px 5px #999;
box-shadow: 4px 5px 5px #999;

und binden die beiden Bilddateien als Hintergrund ein, natürlich mit coolem Farbverlauf:

.box_tenseconds {
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, #555;
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -moz-linear-gradient(top, #555 0%, #222 49%, #0a0e0a 51%, #0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(49%,#222), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -webkit-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -o-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -ms-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
}

.box_seconds {
background: url(../images/timer_seconds.png) 0 25px repeat-x, #555;
background: url(../images/timer_seconds.png) 0 25px repeat-x, -moz-linear-gradient(top, #555 0%, #222 49%, #0a0e0a 51%, #0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(49%,#222), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
background: url(../images/timer_seconds.png) 0 25px repeat-x, -webkit-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, -o-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, -ms-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
}

Animation hinzufügen

Wie versprochen, werden wir den Hintergrund mit keyframes animieren. Dabei geht es mir weniger um die Animation, als vielmehr darum die Zeitabstände für das Verschieben des Hintergrundes festzulegen.

Zunächst gilt es die Animation zu definieren und die Zeit (in Prozentangaben) festzulegen, in denen der Hintergrund verschoben wird. Für den Zehnsekundenzähler:

@-webkit-keyframes timer_tenseconds {
0% { background-position: 0 25px; }
16.6699% { background-position: 0 25px; }
16.67% { background-position: 0 -175px; }
33.3199% { background-position: 0 -175px; }
33.32% { background-position: 0 -375px; }
49.9999% { background-position: 0 -375px; }
50% { background-position: 0 -575px; }
66.6699% { background-position: 0 -575px; }
66.67% { background-position: 0 -775px; }
83.3199% { background-position: 0 -775px; }
83.32% { background-position: 0 -975px; }
99.9999% { background-position: 0 -975px; }
100% { background-position: 0 25px; }
}

und den Sekundenzähler

@-webkit-keyframes timer_seconds {
0% { background-position: 0 25px; }
9.9999% { background-position: 0 25px; }
10% { background-position: 0 -175px; }
19.9999% { background-position: 0 -175px; }
20% { background-position: 0 -375px; }
29.9999% { background-position: 0 -375px; }
30% { background-position: 0 -575px; }
39.9999% { background-position: 0 -575px; }
40% { background-position: 0 -775px; }
49.9999% { background-position: 0 -775px; }
50% { background-position: 0 -975px; }
59.9999% { background-position: 0 -975px; }
60% { background-position: 0 -1175px; }
69.9999% { background-position: 0 -1175px; }
70% { background-position: 0 -1375px; }
79.9999% { background-position: 0 -1375px; }
80% { background-position: 0 -1575px; }
89.9999% { background-position: 0 -1575px; }
90% { background-position: 0 -1775px; }
99.9999% { background-position: 0 -1775px; }
100% { background-position: 0 25px; }
}

Der Zehnsekundenzähler verschiebt sich alle 10 Sekunden oder 16,66 % um 200 Pixel, der Sekundenzähler jede Sekunde (10%) um 200 Pixel. Die Zwischenschritte (z.B. bei 16,6699 % des Zehnsekundenzählers) sind für das “Ausschalten” der Animation. Wer lieber einen fließenden Übergang der Zahlen haben möchte, lässt die Zwischenschritte einfach weg.

Die definierten Animationen müssen wir noch bei den Zählerboxen einbinden.

.box_tenseconds {
-webkit-animation-name: timer_tenseconds;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
}

.box_seconds {
-webkit-animation-name: timer_seconds;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}

Kannst du noch mal wiederholen?

Klar. Hier der Code zusammengefasst:

Die Animation

@-webkit-keyframes timer_tenseconds {
0% { background-position: 0 25px; }
16.6699% { background-position: 0 25px; }
16.67% { background-position: 0 -175px; }
33.3199% { background-position: 0 -175px; }
33.32% { background-position: 0 -375px; }
49.9999% { background-position: 0 -375px; }
50% { background-position: 0 -575px; }
66.6699% { background-position: 0 -575px; }
66.67% { background-position: 0 -775px; }
83.3199% { background-position: 0 -775px; }
83.32% { background-position: 0 -975px; }
99.9999% { background-position: 0 -975px; }
100% { background-position: 0 25px; }
}

@-webkit-keyframes timer_seconds {
0% { background-position: 0 25px; }
9.9999% { background-position: 0 25px; }
10% { background-position: 0 -175px; }
19.9999% { background-position: 0 -175px; }
20% { background-position: 0 -375px; }
29.9999% { background-position: 0 -375px; }
30% { background-position: 0 -575px; }
39.9999% { background-position: 0 -575px; }
40% { background-position: 0 -775px; }
49.9999% { background-position: 0 -775px; }
50% { background-position: 0 -975px; }
59.9999% { background-position: 0 -975px; }
60% { background-position: 0 -1175px; }
69.9999% { background-position: 0 -1175px; }
70% { background-position: 0 -1375px; }
79.9999% { background-position: 0 -1375px; }
80% { background-position: 0 -1575px; }
89.9999% { background-position: 0 -1575px; }
90% { background-position: 0 -1775px; }
99.9999% { background-position: 0 -1775px; }
100% { background-position: 0 25px; }
}

Der Div-Container

#timer {
width: 310px;
margin: 20px auto;
padding: 0;
}

Die Zähler-Boxen

.box_tenseconds {
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, #555;
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -moz-linear-gradient(top, #555 0%, #222 49%, #0a0e0a 51%, #0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(49%,#222), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -webkit-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -o-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, -ms-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_tenseconds.png) 0 25px repeat-x, linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
float: left;
width: 150px;
height: 250px;
margin: 50px auto;
text-align: center;
overflow: hidden;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 4px 5px 5px #999;
-webkit-box-shadow: 4px 5px 5px #999;
box-shadow: 4px 5px 5px #999;
-webkit-animation-name: timer_tenseconds;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
}

.box_seconds {
background: url(../images/timer_seconds.png) 0 25px repeat-x, #555;
background: url(../images/timer_seconds.png) 0 25px repeat-x, -moz-linear-gradient(top, #555 0%, #222 49%, #0a0e0a 51%, #0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(49%,#222), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
background: url(../images/timer_seconds.png) 0 25px repeat-x, -webkit-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, -o-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, -ms-linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
background: url(../images/timer_seconds.png) 0 25px repeat-x, linear-gradient(top, #555 0%,#222 49%,#0a0e0a 51%,#0a0809 100%);
float: right;
width: 150px;
height: 250px;
margin: 50px auto;
text-align: center;
overflow: hidden;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 4px 5px 5px #999;
-webkit-box-shadow: 4px 5px 5px #999;
box-shadow: 4px 5px 5px #999;
-webkit-animation-name: timer_seconds;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}

Einbinden in die Webseite

So geht’s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<title>Ein Minuten-Timer mit "keyframes"</title>
	</head>
	<body>
	...
   	<div id="timer">
   		<p class="box_seconds"></p>
   		<p class="box_tenseconds"></p>
	</div>
	...
	</body>
</html>

Hier gibt es das Gesamtpaket

Zeig mir endlich die Demo

Okay. Hier ist sie

Mir fällt zwar im Moment kein Einsatzzweck für einen solchen Timer ein, aber cool sieht er aus, oder?

Das Prinzip lässt sich natürlich noch weiter ausbauen. Wie wäre es beispielsweise mit einer Stopp-Uhr?

Auch nett, oder? Wäre bitte jemand so freundlich und schaut dieser Demo zehn Stunden lang zu und berichtet mir, ob die Stunden synchron umschalten? Sanke döhn.

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