Animationen waren schon immer ein gutes Stilmittel die eigene Website zu bereichern. Browsergames kommen nicht ohne sie aus. Aber auch einfache Sites profitieren von tollen Animationen wie:
- 3D-Menüs mit weichen Effekten (Stichwort "Smoothness")
- Links, Buttons, Input-Felder usw. können mit ebenso weichen Feedback-Animationen ausgestattet werden
- Coole Übergänge in Bildergalerien und Listings
- usw. usf.
All diese Animationen werten eine Seite auf und hinterlassen einen bleibenderen Eindruck als "tote" Schaltflächen und Inhalte. Bis vor einiger Zeit hat man solche Animationen noch mit Flash erstellt. Doch inzwischen gewinnt die Entwicklung von Animationen mittels CSS (CSS Transitions, CSS Animations) immer mehr an Bedeutung. Die Verbannung von Flash aus iOS ist diesbez. sicher auch nicht ganz unwichtig. Letztlich ist es aber viel nützlicher eine Web-Anwendung auch mit Webstandards zu realisieren, statt auf Plugins zu setzen, die der User erst noch installieren muss und den Browser hin und wieder auch schon mal in die Knie zwingen. Zu den Fakten:
Zur Spezifikation der CSS Transitions gelangt ihr hier. Dort haben die CSS Transitions noch den Status eines Working Drafts. Doch auch hier entscheidet, was die Browserhersteller integrieren. Das Mozilla Developer Network wartet wie immer mit einer guten Einführung in das Thema auf euch. Eine Top-Doku zum Nachschlagen, wenn man mal vergessen hat, für welche Eigenschaft Property X steht, oder welche Möglichkeiten man sonst noch so hat.
Mit der Browserkompatibilität schaut es ebenfalls gut aus:
chrome 4
safari 4
firefox 5
ie 10
opera 12
In einem IE9 fliegt der Dartpfeil dann nicht cool auf die Scheibe zu, sondern verändert einfach schlagartig seine Position; sicher nicht das, was man wünscht. Doch in diesem Falle könnt ihr z. B. jQuery einsetzen.
CSS Transition Properties:
transition-property
Definiert welche CSS Eigenschaften animiert werden sollen. "all" für alle "none" für keine, oder konkrete Eigenschaften wie z. B. "margin."
transition-duration
Spezifiziert die Dauer in Sekunden oder Millisekunden, wie lange eine Animation andauern soll, bis sie an ihr Ende gekommen ist.
transition-timing-function
Hier wird es interessant. An dieser Stelle kannst du die Art der Animation bestimmen. Mit Hilfe der Bezierkurve kannst du hier eigene Effekte definieren und den Code gleich in dein Projekt einbauen. Es gibt aber auch vordefinierte Varianten wie z. B. "ease" und "linear"
transition-delay
Definiert die Verzögerung zwischen Anweisung an ein DOM Objekt sich zu verändern und deren Ausführung.
Alle properties können natürlich auch wie gewohnt in einer kurzen Schreibweise ("Shorthand") "transition" nacheinander notiert werden.
Demo:
Eine kleine erste Demo könnt ihr euch hier bei jsFiddle ansehen.
Code:
Den Code zur Demo gibts auch bei jsFiddle
In den nächsten Teilen werden wir uns dann der Keyframe-Technik und komplexeren Animationen widmen.