Animationen mit CSS3: Eine animierte Uhr erstellen

Nachdem wir vor wenigen Tagen die theoretischen Grundlagen für Animationen in CSS3 präsentiert haben, möchten wir heute einmal ein praktisches Beispiel für eben jene Animationen präsentieren: Eine Uhr, die zum Funktionieren keinerlei Javascript benötigt – nur ein wenig CSS und HTML reicht aus, um eine prinzipiell funktionsfähige Uhr zu erstellen. Wie dies funktioniert, möchten wir in folgendem Artikel einmal genauer erklären.

Zu Beginn der HTML-Code:
Da wir lediglich eine stark vereinfachte Uhr erstellen möchten, lässt sich unsere Uhr in folgende Einzelteile zerlegen: Einen einfachen Kreis als Hintergrund, zwölf Markierungen für die einzelnen Stunden sowie je einen Zeiger für die Sekunde, Minute und Stunde. Natürlich kann die Uhr beliebig um weitere Elemente – z.B. Markierungen für jede einzelne Minute bzw. Sekunde oder einen Befestigungspunkt für die Zeiger. Für das Grundprinzip reichen aber die zuerst genannten “Features” vollkommen aus. Für den Kreis sowie die Zeiger verwenden wir einfache divs, für die Markierungen dagegen missbrauchen wir eine Liste, deren einzelne Elemente via CSS um einen entsprechenden Winkel rotiert werden.
In HTML sieht dies in etwa wie folgt aus:

<div class="uhr">
	<ul class="markierungen">
		<li id="mark01"><div></div></li>
		<!--Hier noch viel mehr Stunden!-->
		<li id="mark12"><div></div></li>
	</ul>
	<div class="zeiger" id="sekunde"></div>
	<div class="zeiger" id="minute"></div>
	<div class="zeiger" id="stunde"></div>
</div>

Und jetzt das CSS:
Etwas spannender sieht es jetzt von Seiten des CSS-Codes aus. Die Erstellung des Kreises ist dabei natürlich noch wenig schwierig – dieser bekommt einfach zwei gleiche Werte für Höhe und Breite, sowie einen border-radius, der mindestens die Hälfte der Höhe/Breite beträgt:

.uhr {
	width: 500px;
	height: 500px;
	margin: 20px auto;
	position: relative;
	border: 1px solid #000;
	border-radius: 250px;
}

Etwas spannender sind dann schon die Markierungen. Dazu verwenden wir die Listenelemente der ungeordneten Liste, diese haben die Höhe des Kreises plus Rahmenbreite und die gewünschte Breite (hier: 10 Pixel) und werden in die Mitte des Kreises verschoben, sodass alle 12 Markierungen zunächst an der Position der 12 stehen.

.markierungen {
	list-style: none;
	width: 500px;
	height: 500px;
	position: absolute;
	top: -1px;
	left: -5px;
	z-index: 1;
}

.markierungen li {
	width: 10px;
	height: 502px;
	position: absolute;
	top: 0;
	left: 50%;
	transform-origin: 50% 50%;
}

.markierungen li div {
	width:10px;
	height: 30px;
	background: #000;
}

Nun werden diese Listenelemente um den jeweiligen Winkel am Mittelpunkt gedreht, sodass diese letztendlich an ihren jeweiligen Positionen stehen. Leider bleibt uns hier nichts anderes übrig, als die Drehung für jede einzelne Markierung separat zu definieren. Hierbei vergrößert sich der Winkel bekanntlich jedes Mal um 30°. Um es abzukürzen, hier nur eine der 12 Regeln:

#mark01 {
	transform: rotate(30deg);
}

Weiter geht es noch mit den Zeigern. Hierzu zunächst einmal den Keyframe der Animation: Eine einfache Drehung um 360 Grad.

@keyframes drehen {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

Für die Zeiger werden nun die unterschiedlichen Eigenschaften zum Aussehen und vor allem der Dauer der Animation festgelegt. Da sich alle drei Zeiger im wesentlichen ähneln, steht im folgenden Codeblock nur der Sekundenzeiger (Animationsdauer für den Minutenzeiger ist 3600s und für den Stundenzeiger 43200s):

.zeiger {
	animation-name: drehen;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#sekunde {
	width: 4px;
	height: 260px;
	position: absolute;
	left: 248px;
	top: 20px;
	z-index: 4;
	background: #f00;
	transform-origin: 2px 230px;
	animation-duration: 60s;
}

Gibt’s das auch nochmal im Ganzen?
Möglicherweise ging es dem einen oder anderen nun etwas zu schnell und möchte den Code gern einmal komplett betrachten. Manch einer will aber auch einfach nur das Ergebnis des Ganzen betrachten. Dazu reicht es vollkommen aus diesen Link hier einmal anzuklicken.

Damit sind wir auch schon wieder am Ende dieses kurzen Artikels angelangt. Natürlich kann man mittels CSS und HTML keine Uhr gestalten, die auch tatsächlich die Uhrzeit anzeigt. Das lässt sich aber mit Javascript oder einer beliebigen anderen Programmiersprache (z.B. PHP) realisieren. Dies würde aber den Umfang dieses Artikels sprengen.
Wir hoffen, wir konnten dennoch dem einen oder anderen Webdesigner ein wenig weiterhelfen. Wer noch ein wenig daran weiterbasteln will, kann auch gerne seine Ergebnisse in den Kommentaren präsentieren. Und wer dagegen noch Fragen hat, kann diese ebenfalls in den Kommentaren schreiben.