HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 181

4.4.3 Animieren mit -webkit-animation

Eine weitere Möglichkeit, Elemente zu animieren, besteht über die Eigenschaft -web-
kit-animation . Diese Eigenschaft bietet einige Vorteile gegenüber der Animation via
-webkit-transition . Sie können Schlüsselbilder ( Keyframes ) festlegen und somit eine
Animation mehrstufig gestalten. Weitere konfigurierbare Optionen sind: eine Ani-
mationsverzögerung, die Anzahl der Animationsdurchläufe, Effekte und eine Wie-
derholungsfunktion.

4

Im folgenden Beispiel animieren Sie ein Quadrat. Im HTML-Code definieren Sie das
Quadrat einfach als div -Element:

<div class="quadrat"></div>

Der CSS-Code lautet:

.quadrat {
height:50px;
width:50px;
background-color:#ff0000;
}

Jetzt haben Sie ein rotes Quadrat, was es zu animieren gilt. Zunächst konfigurieren
Sie die Schlüsselbilder. Schlüsselbilder sind einzelne Stufen der Animation, die Sie
individuell festlegen können. Sie werden über Prozentangaben definiert, die sich auf
die Gesamtdauer der Animation beziehen.

Sie animieren das Quadrat zunächst 50 Pixel nach rechts und danach 50 Pixel nach
unten. Gleichzeitig animieren Sie im dritten Schlüsselbild die Hintergrundfarbe in
Gelb. Die Eigenschaft @-webkit-keyframes beinhaltet dabei die Schlüsselbilder und
deren Eigenschaften. Gefolgt wird diese durch den Animationsnamen, in diesem Fall
flavius , frei benannt nach dem berühmten römisch-jüdischen Historiker Flavius
Josephus, der uns für dieses Buch an der einen oder anderen Stelle inspirierte.

@-webkit-keyframes flavius {
0% {
}
50% {
margin-top:0px;
margin-left:50px;
background-color:#ff0000;
}
100% {
margin-top:50px;