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

margin-left:50px;
background-color:#ffff00;
}
}
Listing 4.14 Die Definition von Schlüsselbildern für eine Animationsabfolge
Als Nächstes rufen Sie den Namen der Schlüsselbilderabfolge in der Klasse Ihres zu
animierenden Elements auf:
.quadrat {
width:50px;
height:50px;
background-color:#ff0000;
-webkit-animation-name: flavius;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: none;
}
Listing 4.15 Die Animation mit der zu animierenden Klasse verknüpfen
Die Eigenschaft -webkit-animation besteht dabei aus einer Vielzahl von weiteren
Optionen:
-webkit-animation-name: flavius;
der Name der Animation, welcher für die Konfiguration der Schlüsselbilder benö-
tigt wird
-webkit-animation-duration: 4s;
die Dauer der Animation
-webkit-animation-iteration-count: 10;
Die Anzahl der Durchläufe der Animation. In diesem Fall wird die Animation
zehnmal ausgeführt. Um eine Endlosschleife zu erzeugen, geben Sie hier infinite
(engl. für »unendlich«) an.
-webkit-animation-direction: alternate;
Mit der Animationsrichtung können Sie einstellen, dass eine Animation bei einer
Wiederholung rückwärts ausgeführt wird. In diesem Fall wandert damit das Qua-
drat erst nach rechts, dann nach unten bei wechselnder Hintergrundfarbe. Am