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

Ende angekommen, legt das Quadrat dieselbe Strecke und Transformation rück-
wärts zurück. Ist diese Eigenschaft nicht oder mit normal definiert, so fängt die Ani-
mation nach Beendigung wieder an ihrem Ursprungspunkt an.
-webkit-animation-timing-function: linear;
Wenn die Animation abgebremst werden soll, dann geben Sie hier die entspre-
chende Methode an. Die Methoden kennen Sie bereits aus dem Beispiel mit -web-
kit-transition (z. B. ease-in-out , ease-in etc.).
-webkit-animation-delay: 1s;
die Verzögerung, mit der die Animation starten soll
-webkit-animation-fill-mode: none;
Verändern Sie das Aussehen des Elements innerhalb der Schlüsselbilder, so kön-
nen Sie mit dieser Eigenschaft konfigurieren, wie und wann diese Änderungen
angezeigt werden:
- none : Die Eigenschaften des Elements werden nur angezeigt, während die Ani-
mation abläuft.
- forwards : Die Eigenschaften des Elements, welche im letzten Schlüsselbild defi-
niert wurden, werden nach der Animation angezeigt.
- backwards : Die Eigenschaften des Elements, welche im ersten Schlüsselbild defi-
niert wurden, werden nur während der Anfangsverzögerung der Animation
angezeigt.
- both : Die Kombination von backwards und forwards .

4

Der Übersicht halber ist es sinnvoll, die Eigenschaften in dieser Art und Weise anzu-
geben. Möchten Sie jedes noch so kleinste Byte sparen, dann können all diese Eigen-
schaften auch in einer Zeile zusammengefasst werden:

-webkit-animation: flavius 1s 2s 10 alternate none linear;

Die Reihenfolge spielt dabei keine Rolle. Bei den Zahlen und Sekundenangaben ist es
jedoch so, dass die erste Zahl immer die Animationsdauer, die zweite Zahl die Anima-
tionsverzögerung und die dritte Zahl die Anzahl der Durchläufe angibt.

4.4.4 Manipulation mit -webkit-transform
Über -webkit-transform können Sie Elemente zwei- und dreidimensional im Raum
modifizieren. Dabei wird das Element und sein kompletter Inhalt auf die angegebene
Weise manipuliert (Abbildung 4.42). Diese Eigenschaft beschreibt keine Animation,
ist aber relevant, wenn Sie Objekte dreidimensional drehen möchten. -webkit-trans-
form können Sie mit -webkit-transition oder -webkit-animation kombinieren.