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

4.4 Animationen mit CSS
Animationen sind integraler Bestandteil Ihrer WebApp. Sie dienen nicht nur zur Ver-
schönerung von Inhalten, sondern helfen Ihren Benutzern auch, zu verstehen, was
gerade passiert. Animationen leiten durch eine Benutzeroberfläche und verbinden
verschiedene Menüs, Screens oder Inhalte miteinander. Sie können zudem auch
Begeisterung auslösen. Alles in allem sind Animationen ein wichtiges Werkzeug, wel-
ches Sie sinnvoll und gezielt einsetzen sollten.
Es gibt mehrere Möglichkeiten, Elemente in einer WebApp zu animieren. Option eins
ist die Animation mit JavaScript und jQuery. Vorteil an dieser Lösung ist, dass die
Animation in allen gängigen Browsern funktioniert und angezeigt wird. Der Nachteil
ist, dass die Performance der Animation in vielen Fällen zu wünschen übrig lässt.
Besonders auf mobilen Endgeräten wirken JavaScript-Animationen oft ruckelig und
schwerfällig, kurzum: nicht zufriedenstellend. Eine Animation muss flüssig und
gleichmäßig ablaufen, damit Ihre Benutzer sie nicht als störend oder fehlerhaft emp-
finden.
Wenn Browserkompatibilität, wie im Fall von WebApps, eine untergeordnete Rolle
spielt, sollten Sie auf CSS-Animationen zurückgreifen und auf JavaScript-Animatio-
nen verzichten. CSS-Animationen sind hardwarebeschleunigt , das heißt, sie werden
um ein Vielfaches flüssiger angezeigt als ihre JavaScript-Pendants.
CSS-Animationen sind zurzeit immer noch nicht final in den CSS3-Standard imple-
mentiert, das heißt, Sie müssen mit bereits vertrauten Präfixen arbeiten. Da Sie
hauptsächlich für die Browserengine WebKit entwickeln, verzichten wir in den fol-
genden Beispielen auf die Präfixe für weitere Browser.
Doch genug zur Einführung, Sie werden nun Elemente vergrößern, drehen, farblich
ändern und vieles mehr! Es wird funky!
4.4.1 CSS-Transitions und CSS-Animations
Insgesamt gibt es zwei Definitionen zur Animation und Manipulation von Elemen-
ten: -webkit-transition und -webkit-animation . Bevor Sie richtig loslegen, zunächst
eine kurze Einführung in diese beiden Typen:
Via -webkit-transition steuern Sie, in welcher Zeit und Art und Weise bestimmte
Eigenschaften oder auch alle Eigenschaften eines Elements verändert werden. Die
Eigenschaften können dabei z. B. die Randfarbe, die Position oder der Hintergrund
sein.
-webkit-animation ist eine Erweiterung zu -webkit-transition , mit der Sie weitere
Parameter wie Zwischenschritte ( Keyframes ) oder auch die Anzahl der Animations-
durchläufe festlegen.