Workshop: CSS Animationen

Oft passiert es, dass man als Designer eine gewisse CSS Animation für ein Element geplant hat, aber man kann nicht genau kommunizieren, wie sie final aussehen soll. An dieser Stelle schaffen natürlich Storyboards oder eine Animationssoftware wie Flash oder After Effects Abhilfe – aber wäre es nicht viel einfacher, die CSS Animation einfach selbst zu bauen? Genau das haben wir uns auch gedacht und deswegen einen internen CSS Animationsworkshop abgehalten.

Do it yourself!

Es liegt so nah, wird aber bislang eher selten praktiziert: Just do it yourself! In CSS finden sich so einige z.B. aus After Effects bekannte Elemente wieder, wie beispielsweise die Möglichkeit linear zu animieren oder mit verschiedenen Animationskurven die Geschwindigkeit zu regulieren. Aber dennoch unterscheiden sich Animationen in CSS grundlegend von anderen Arten der Animation und sind daher besonders spannend.

CSS Transitions vs CSS Animations

Erkenntnis Nr. 1: Es gibt zwei verschiedene Arten wie man in CSS animieren kann. CSS Transitions haben einen definierten Start- und Endzustand. Sie werden ausgeführt, sobald eine Pseudoklasse (:hover, :focus, :checked etc.) getriggert oder entfernt wird. Eine Transition kann keine Schleifen durchlaufen. CSS Animations hingegen können beliebig viele Keyframes haben. Den Zeitpunkt, wann ein Keyframe ausgeführt wird, gibt man meist in Prozent an. Du kannst nicht nur angeben, wie lange die Animation dauert, sondern auch, wie oft sie sich wiederholen soll.

Animation Properties

Erkenntnis Nr. 2: Es gibt unendlich viele Möglichkeiten bei der Steuerung der Animation. Bei einer Transition muss man zunächst angeben, auf welche Eigenschaft sie angewandt werden soll. Bei transition-property kannst du also entweder die entsprechende Eigenschaft oder all bzw. none anführen. Manche Eigenschaften gibt es sowohl bei der CSS Animation als auch bei der CSS Transition. Dazu gehören: delay, duration und die timing-function. Wie der Name bereits verrät, handelt es sich bei einem delay um eine zeitliche Verzögerung der Animation. Wenn der delay ein positiver Wert ist, dann verspätet sich die Animation, bei einem negativen Wert fängt sie bereits früher an, das heißt sie wird quasi vorgespult. Auch die duration spricht für sich und bezeichnet die Dauer der Animation. Die timing-function eröffnet einen breiten Spielraum bezüglich des zeitlichen Ablaufs der Animation. Die Werte ease, ease-in, ease-out und ease-in-out geben an, ob die Animation langsam starten und/oder enden soll. Linear bedeutet, dass das Timing konstant bleibt. Inherit wird verwendet, wenn die timing-function vererbt werden soll. Die beste Kontrolle über die Animationskurve erzielt man allerdings mit der cubic-bezier (n,n,n,n) Variante. Hier gelten alle numerischen Werte von 0 bis 1. Websites wie matthewlein.com oder cubic-bezier.com bieten dafür die ideale Unterstützung.

Bei Animationen gibt es noch viele weitere Eigenschaften, die zusätzliche Möglichkeiten erschließen. Dazu zählen der animation-name. Das ist der Name des @keyframes, den du an den Selektor binden willst. Der animation-iteration-count besagt, wie oft die Animation gezeigt wird. Die animation-direction entscheidet, ob die Animation vorwärts, rückwärts oder abwechselnd abgespielt wird und der animation-play-state legt fest, ob die Animation läuft oder pausiert.

Pseudoelemente

Erkenntnis Nr. 3: Hoch lebe das Pseudoelement! Eine besonders große Rolle spielen bei Animationen die Pseudoelemente ::before und ::after, da durch sie z.B. ein div-Element noch zwei weitere Elemente beinhalten kann. Dabei ist allerdings zu beachten, dass bei einem Element eine bestimmte Eigenschaft nur mit einer einzigen Animation verändert werden kann. Möchte man z.B. ein Element am Anfang mithilfe der Opacity unregelmäßig und danach unendlich lang gleichmäßig blinken lassen, so muss das Element in ein übergeordnetes Element eingepackt werden. Dann kann das eingebettete Element beispielsweise die anfängliche Opacity-Animation ausführen und das übergeordnete Element mit einem delay die zweite, unendliche Opacity-Animation darstellen.

Fazit

Ich wurde positiv überrascht, dass CSS Animationen sehr intuitiv umgesetzt werden können. Aufgrund der vielen veränderlichen Eigenschaften sind sehr präzise und detaillierte Resultate möglich und der Phantasie sind keine Grenzen gesetzt. Da leuchten die Designer Augen.

Flux Capacitation

Stores, Actions, Components. Für wen das nach Einkaufszentrum klingt, der liegt nicht weit daneben – nur im übertragenen Sinne. Denn die von Facebook 2013 ins Leben gerufene JavaScript Bibliothek React.js und die damit hervorragend funktionierende Applikations-Architektur Flux bieten eine Fülle neuer Möglichkeiten in der Webentwicklung. Umdenken ist angesagt! Und unser Einkaufswagen wurde in einem unserer internen Workshops letzte Woche prall gefüllt.

React Geschwindigkeit und mehr

Zunächst ging es um die Eigenheiten von React. Daraufhin führte uns der Weg zu Flux. Während sich React primär als View-Controller versteht und mit einer virtuellen DOM-Schicht nur das erneuert, was sich auch wirklich in der Darstellung geändert hat, ist Flux ein Modell, durch das sich Frontend-Entwicklung fast wie Desktop-Software-Development anfühlt. Durch die virtuelle DOM ist die Darstellung auch komplexerer Anwendungen rasend schnell, somit war die uns zunächst gestellte Aufgabe eines kleinen Tickers für React fast lachhaft leicht.

Aber lernen konnten wir einiges dabei. Angefangen bei JSX (einer Vereinfachung und Beschleunigung der JS-Programmierung durch XML basierte Befehle) hin zum anfangs verwirrenden unidirektionalen Modell von Flux.

Verwirrung inbegriffen – doch alles handhabbar

Denn bis man seinen Kopf von der “klassischen” JavaScript- hin zu komponentenbasierter Entwicklung lenken kann ist einiges Umdenken angesagt. Die einzelnen Komponenten agieren nicht direkt mit der View, sondern fordern via eines Dispatchers und dem Aufrufen spezifischer Actions den Store auf neue Daten zu liefern, mit denen die View in einer render()-Methode geupdatet wird. Und dieser kurze Satz beschreibt eigentlich schon den kompletten Gedanken der Flux Architektur.

Flux-View vs MVC und Beispiele

Während im bekannten MVC-Modell multidirektionale Kommunikation zu schwierig zu überschauenden 1 zu n Verbindungen führen kann, bleibt Flux konsistent und die Kommunikation erfolgt immer nur in eine Richtung, bzw. im Kreis. Das wichtigste Utensil dabei ist der Dispatcher, der spezifische Actions an alle möglichen Stores verteilt. Zurück zu unserem Ticker, für diesen hatten wir eine einzige Komponente (mit der für die View wichtigen render()-Methode), welche mit einer einzigen Action den Store aufforderte, neue Daten (hier die bisherige Laufzeit der App) an die View zu liefern. Klingt nach unnötigem Overhead? Für einen kleinen Ticker vielleicht – doch die Skalierbarkeit macht den zunächst notwendigen Mehraufwand schnell wett – wie wir am nächsten Beispiel des Workshops schnell erkennen konnten. Wir bauten eine Image-Mover Komponente blitzschnell auf dem bisher Geschriebenen auf, indem wir ein Element in der View austauschten und durch Drag und Drop ein “Leucht-Element” über einer ausgegrauten Leinwand per Mausbewegung hin und her schieben konnten.

Flummox zeigt den weiteren Weg

Auf dem Workshop aufbauend wandte ich mich dann „Flummox“ zu, einer Implementation von Flux, welche die Arbeit damit noch weiter vereinfacht und Boilerplate-Code reduziert. Und kaum mit React und Flux angefangen, bin ich angefixt und nur auf den ersten Blick „flummoxed“. Danke für einen verfluxt tollen Workshop und die Einführung in die Entwicklung mit React!