CSS3: Animation eines horizontalen oder vertikalen Grafik-Laufbandes

Mit den animation-Styleangaben steht in CSS3 eine neue und interessante Möglichkeit zur Verfügung, Elemente des DOM vollständig ohne den Einsatz von JavaScript über den Viewport zu bewegen und/oder andere Stildefinitionen dieser Elemente über einen festgelegten Zeitraum verteilt allmählich zu modifizieren. Auf diese Weise lassen sich z. B. Menüeffekte, Slideshows oder grafische Übergänge beim Wechsel eines Seiteninhaltes realisieren, die zuvor mit vertretbarem Aufwand nur unter Verwendung komplexer Frameworks wie jQuery oder Prototype implementierbar waren. Unterstützt wird die Interpretation von CSS3-Animationen sowohl in den aktuellen Versionen von Firefox und Chrome als auch Opera; der Internet Explorer kann damit leider erst ab einschließlich Version 10 (ausgeliefert mit Windows 8) etwas anfangen.

Eine der einfachsten Anwendungen von CSS3-Animationen ist ein aus verschiedenen Grafiken zusammengesetztes Laufband (Abb. 1 und 2), das sich entweder horizontal oder vertikal über eine Seite erstreckt und den Eindruck eines kontinuierlichen Durchlaufs in eine bestimmte Richtung erzeugt (von links nach rechts oder von rechts nach links bzw. von oben nach unten oder von unten nach oben, je nach Ausrichtung des Bandes). Technisch wird diese Optik dadurch erzeugt, dass wir die zu scrollenden Illustrationen als Hintergrund eines <div>-Tags festlegen, diesen Hintergrund in X-Richtung bzw. Y-Richtung kacheln (auch dies ist natürlich abhängig von der Ausrichtung) und ihn schließlich per Animationsdefinition über ein bestimmtes Intervall hinweg einmal komplett verschieben, bevor die Animation wieder von vorn beginnt. Der Wechsel zwischen Animationsende und -neubeginn wird dadurch für das Auge nicht erkennbar.

Das nachfolgende CSS-Listing näher erläutert: Die beiden zugrundeliegenden Backgrounds namens berlin-horizontal.png und berlin-vertical.png besitzen jeweils Abmessungen von 800x150 bzw. 200x600 Pixel und werden über die Klassendefinitionen .horizontal-banner und .vertical-banner später im DOM entsprechenden <div>-Elementen zugewiesen. Dann folgen innerhalb der Klassendefinitionen die Angaben zur Animation. Der relevante Style ist hier, wie bereits erwähnt, animation, aus Kompatibilitätsgründen jeweils um Vendor-Präfixe erweitert, so dass wir auf insgesamt fünf Zeilen mit gleichem Inhalt kommen: Zunächst steht die Animationsvorschrift (auch Selektor, hier movx oder movy), dann die Dauer des Animationszyklus (20 Sekunden), die Angaben zum Easing (ggf. langsames Ein- und Auslaufen der Animation, hier nicht gewünscht, daher linear) und zur Wiederholungshäufigkeit (unbegrenzt, daher infinite). Die eigentlichen Animationsvorschriften movx und movy wiederum werden in jeweils eigenen Blöcken, eingeleitet von @keyframes (bzw. deren Erweiterung mit Vendor-Präfix) festgelegt. Innerhalb der Blöcke ist die Syntax sehr einfach: Der Beginn einer Animation wird mit 0%, die Hälfte der Zeit z. B. (in diesem Fall 10 Sekunden) mit 50% und der Zustand der Animation bei deren Ende mit 100% bezeichnet. Für jeden Prozentwert zwischen 0 und 100 ist es möglich, eigene Stylefestlegungen für das Element zu treffen, dem die Animationsvorschrift zugewiesen wird; diese Schlüsselstellen dienen als Anker für die dynamische Darstellung der Phasen zwischen ihnen. Wir beschränken uns in diesem Beispiel darauf, den 100%-Wert so zu definieren, dass der Hintergrund dann - je nach horizontaler oder eben vertikaler Ausrichtung - um 800 Pixel nach rechts oder 600 Pixel nach unten verschoben ist. Das war es schon - den Rest der Animation berechnet der Browser selbsttätig. Analog ist es dann auch ganz einfach, die Richtung der Laufbänder umzudrehen: Man definiert einfach einen negativen Wert im Zielframe - mit der Vorschrift -800px für background-position-x oder -600px für background-position-y bewegen sich die Bänder von unten nach oben und von rechts nach links.

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
.horizontal-banner { 
 
	width:800px;
	height:150px;
	background:url('/img/berlin-horizontal.png') repeat-x;
	-moz-animation: movx 20s linear infinite; /* Firefox */
	-webkit-animation: movx 20s linear infinite; /* Safari and Chrome */
	-o-animation: movx 20s linear infinite; /* Opera */
	-ms-animation: movx 20s linear infinite; /* IE 10 */
	animation: movx 20s linear infinite;
}
 
.vertical-banner { 
 
	width:200px;
	height:600px;
	background:url('/img/berlin-vertical.png') repeat-y;
	-moz-animation: movy 20s linear infinite; /* Firefox */
	-webkit-animation: movy 20s linear infinite; /* Safari and Chrome */
	-o-animation: movy 20s linear infinite; /* Opera */
	-ms-animation: movy 20s linear infinite; /* IE 10 */
	animation: movy 20s linear infinite;
}
 
@-moz-keyframes movy /* Firefox */
{
0% { background-position: 0px 0px; }
100% {background-position: 0px 600px;}
}
 
@-webkit-keyframes movy /* Safari and Chrome */
{
0% { background-position: 0px 0px; }
100% {background-position: 0px 600px;}
}
 
@-o-keyframes movy /* Opera */
{
0% { background-position: 0px 0px; }
100% {background-position: 0px 600px;}
} 
 
@-ms-keyframes movy /* IE 10 */
{
0% { background-position: 0px 0px; }
100% {background-position: 0px 600px;}
} 
 
@keyframes movy
{
 
0% { background-position: 0px 0px; }
100% {background-position: 0px 600px;}
}
 
@-moz-keyframes movx /* Firefox */
{
0% { background-position: 0px 0px; }
100% {background-position: 800px 0px;}
}
 
@-webkit-keyframes movx /* Safari and Chrome */
{
0% { background-position: 0px 0px; }
100% {background-position: 800px 0px;}
}
 
@-o-keyframes movx /* Opera */
{
0% { background-position: 0px 0px; }
100% {background-position: 800px 0px;}
} 
 
@-ms-keyframes movx /* IE 10 */
{
0% { background-position: 0px 0px; }
100% {background-position: 800px 0px;}
} 
 
@keyframes movx
{
0% { background-position: 0px 0px; }
100% {background-position: 800px 0px;}
}
 
 

Für weitere Details zur Syntax von CSS3-Animationen empfehle ich übrigens die Referenz bei w3schools.com: http://www.w3schools.com/css3/css3_animations.asp.