Skip to main content

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.

Wird nicht veröffentlicht