CSS Animations - da kommt Bewegung ins Spiel

Bewegung auf einer Website kann auch ganz ohne Programmiersprache entstehen: mit CSS-Animationen oder -Transformationen.

Im letzten Artikel haben wir uns mit CSS-Transformationen beschäftigt: Wie können Elemente rein über CSS gedreht, gekippt, verzerrt oder skaliert werden. Diesmal sehen wir uns an, wie wir Eigenschaften und Positionen mittels CSS verändern können, ohne JavaScript oder jQuery verwenden zu müssen. Alle hier beschriebenen Animationen könnt Ihr Euch auch in diesem Codepen-Beispiel ansehen.


Übrigens: Wer Hintergrundfarben über jQuery.animate verändern möchte, braucht ein Plugin! In reinem CSS geht das ganz ohne.

Die @keyframes-Regel

Anders als bei den CSS-Transitions brauchen wir für CSS-Animations eine eigene Anweisung, die wir in dieser Form aus dem bisherigen CSS-Teil in dieser Form noch nicht kennen: die @keyframes-Regel.

Kurz gesagt steht in dieser Regel drin, was bei der Animation passieren soll. Außerdem braucht sie auch einen Namen, mit dem wir sie aufrufen (bzw. einem bestimmten Element zuordnen) können.

Das sieht dann so aus:




Dabei ist „demo“ der Name, der dieser @keyframes-Regel vergeben wurde.

In dem Element, für das die Regel gelten soll (das animiert werden soll), muss die Regel (Engl.: rule) auch aufgerufen werden:




Jetzt können wir schon damit beginnen, zu definieren, WAS denn eigentlich mit unserem Element passieren soll.

 

Animationen von – bis

Animations haben gegenüber Transformations einen Vorteil: es lassen sich Veränderungen an bestimmten Punkten der Animation, also beispielsweise bei 0%, 50% und 100%, bestimmen.

Die Breite eines Elementes lässt sich auch über eineTransformation verändern. Mittels transform:scaleX(2); würde unser Element doppelt so breit werden. Mit einer Animation haben wir allerdings mehr Möglichkeiten; außerdem lässt sich über die Keyframes-Regel exakt bestimmen, wie sich das Element zu einem bestimmten Zeitpunkt innerhalb der Animation verhalten soll.

Grundsätzlich reicht es schon, zu definieren, was unser Start- und Endzustand ist. Alles dazwischen passiert automatisch:




Diese simple Anweisung bedeutet, dass unser Element zu Beginn unserer Animation 100px und am Schluss 500px breit ist. Wer das allerdings gerade probiert hat, hat vermutlich eine Enttäuschung erlebt: denn scheinbar ist nichts passiert.

Das hat zwei Gründe: Erstens, ohne weitere Angaben springt das Element nach Abschluss der Animation wieder in seinen Ausgangszustand zurück, und zweitens haben wir noch nicht bestimmt, wie lange die Animation dauern soll. Die Animation war also schon abgeschlossen, bevor wir überhaupt etwas sehen konnten.

Wir brauchen also in der Regel für das Element, das animiert werden soll, zusätzlich zum Aufruf des Namens der Keyframe-Regel noch eine Angabe zur Dauer der Animation:





Damit sehen wir jetzt auch die Bewegung unseres Elementes. Ist die Animation abgeschlossen, springt es wieder in seinen Ausgangszustand zurück.

Die Zeitangabe, wie lange die Animation dauern soll, kann in Sekunden (s) oder Millisekunden (ms) erfolgen.

 

Wir können allerdings noch sehr viel präziser festlegen, zu welchem Zeitpunkt der Animation sich das animierte Element in welchem Zustand befinden soll. Dazu verwenden wir statt der from – to-Anweisung Prozentwerte:





Wir können damit genau definieren, was wann passieren soll, allerdings ist die Bewegung bei vier Schritten (25%, 50%, 75%, 100%) nicht so flüssig wie bei from-to.




Was genau passieren soll, ist nicht auf ein einzelnes CSS-Attribut beschränkt. Innerhalb der geschwungenen Klammern – sowohl bei from-to als auch bei den Prozentangaben – können wir so viele CSS-Attribute verwenden, wie wir möchten:




Unser Element wandert also von links nach rechts und verändert dabei noch die Farbe. Im Beispiel oben ist zu Beginn und am Ende der gleiche Wert für top angegeben – in diesem Fall könnten wir diesen Wert auch weglassen. Nur Werte, die sich verändern sollen, müssen wir angeben (Zum Beispiel wenn statt from-to Prozentwerte verwendet werden und die top-Position in den Zwischenschritten verändert wird.)





   

WICHTIG:Damit ein Element bewegt werden kann, es also top, right, bottom oder left Anweisungen berücksichtigt, muss es auch eine position-Angabe haben! Es sollte sich also in einem Containerelement mit position: relative; befinden und selbst position: absolute; haben!





Was aber, wenn wir nicht wollen, dass das animierte Element nach Abschluss der Animation wieder an seinen ursprünglichen Platz zurückspringt? Das können wir selbstverständlich einstellen, wie wir wollen: mittels animation-fill-mode.

 

Animation-fill-mode

Wenn wir beispielsweise wollen, dass unser Kreis aus dem Beispiel oben nicht nur von links nach rechts rollt und dabei die Farbe wechselt, sondern auch, dass er dann auf der rechten Seite neben dem orangefarbenen Rechteck liegen bleibt, brauchen wir eine weitere Anweisung:




Für das animierte Element bleiben alle Eigenschaften erhalten, die es bei abgeschlossener Animation (100%) hat. Für unseren Kreis bedeutet das, er liegt nun rechts neben dem Rechteck und ist nun orangefarben, nicht mehr blau:




Außer animation-fill-mode:forwards; gibt es noch die Werte none (Default), backwards und both. Bei backwards nimmt das Element, das animiert werden soll, die in der ersten keyframe-Regel gesetzten Werte an, bevor die eigentliche Animation startet. Das wird natürlich erst dann wirklich deutlich, wenn der Beginn der Animation mit animation-delay verzögert wird. Nach abgeschlossener Animation springt das animierte Element wieder in seine Ausgangsposition zurück. Bei both wird, wie der Name schon sagt, beides berücksichtigt: Die ersten in der keyframes-Regel gesetzten Werte werden schon vor Start der Animation (während der delay-Phase) angezeigt, aber wie bei forwards bleibt das Element nach Abschluss der Animation an seinem Platz und springt nicht mehr zurück.

 

Animation-delay

Verzögern einer Animation? Ja, auch das ist, wie schon bei den Transformationen, ganz einfach möglich:




Das Element, das animiert werden soll, kann auch die Anweisung animation-delay bekommen. Die Ausführung der Animation verzögert sich dann um den angegebenen Wert. Die Verzögerung kann in Sekunden (s) oder Millisekunden (ms) angegeben werden.

Es ist auch möglich, einen negativen Wert als animation-delay festzusetzen. In diesem Fall tut die Animation so, als wäre sie bereits die angegebene Zeit über gelaufen. Man könnte also mit einem negativen Wert bei animation-delay mitten in der Animation einsteigen.

 

Animation-timing-function

Kann man denn auch die Art, wie sich das animierte Element bewegt, beeinflussen? Ja, klar! Die Anweisung dazu heißt animation-timing-function.

Die möglichen Werte dazu sind ease (Defaultwert), linear, ease-in, ease-out, ease-in-out oder cubic-bezier(n,n,n,n).

Falls Ihr schon einen Blick auf das Codepen-Beispiel geworfen habt, ist Euch vielleicht aufgefallen, dass sich die animierten Elemente nicht gleichmäßig schnell bewegt haben, sondern am Beginn und Ende der Animation etwas langsamer, im Mittelteil hingegen etwas schneller unterwegs waren. Das liegt an der Defaulteinstellung für die animation-timing-function: ease.

ease-in startet langsamer, der Rest der Animation verläuft gleichmäßig schnell.

ease-out startet schnell, am Ende „bremst“ die Animation etwas ab.

ease-in-out kombiniert die beiden oberen Werte; trotzdem gibt es einen leichten Unterschied zum Defaultsetting ease (der in der zugrundeliegenden Funktion liegt).

Warum wir hier von einer timing-function sprechen, wird schnell beim Blick auf das letzte mögliche Setting klar: cubic-bezier.

Dabei handelt es sich um eine Kurve, die durch vier Werte bestimmt wird: x1, y1, x2 und y2.  Die gültigen Werte dafür liegen grundsätzlich zwischen 0 und 1; ein negatives Vorzeichen ist möglich, kann aber zu sprunghaften Effekten führen.

Für Details zu dieser wesentlich aufwändigeren Methode empfiehlt es sich, einen Blick in die ausführliche Dokumentation zu werfen.


In sehr vielen Fällen werden die Standardsettings ease, linear, ease-in, ease-out und ease-in-out allerdings vollkommen ausreichen.

 

Animation-direction

Mit animation-direction lässt sich festlegen, in welcher Reihenfolge die Animationen ausgeführt werden sollen. Das Defaultsetting ist „normal“.





Mit der Anweisung animation-direction:reverse; kann die Reihenfolge der Animationen umgekehrt werden. Sie beginnt also bei der Endposition und endet bei der Startposition. Bei unserem Beispiel started der orangefarbene Kreis rechts, bewegt sich nach links und färbt sich blau (siehe Codepen-Beispiel).




Das bedeuted aber auch, dass zunächst ein Sprung zur ursprünglichen Endposition stattfindet. Daher lassen sich die beiden Angaben normal und reverse auch kombinieren: Alternate spielt eine Animation zunächst vorwärts, dann rückwärts ab; alternate-reverse erst rückwärts, dann vorwärts.

 

Animation-iteration-count

Was? Wieder probiert und hat nicht geklappt? Na gut, damit wir eine Animation vorwärts und rückwärts abspielen können, brauchen wir noch eine weitere Anweisung: animation-iteration-count. Also nichts anderes als einen Zähler: wie oft soll die Animation abgespielt werden?




Beim dazugehörigen Wert handelt es sich um eine number; derzeit scheint es auch mit Kommazahlen zu funktionieren, Sinn machen natürlich eher ganze Zahlen. Wird ein negativer Wert eingegeben, läuft die Animation einmal ab; bei animation-iteration-count: 0; findet dieAnimation so schnell statt, dass wir es wieder einmal nicht wahrnehmen (so wie bei animation-duration: Wenn hier kein Wert oder 0 angegeben ist, sehen wir auch nichts).

Soll die Animation endlos weiterlaufen, brauchen wir keine unsinnig hohe Zahl einzugeben, sondern auch dafür gibt es eine Anweisung: animation-iteration-count: infinite.

 

Die hier beschriebenen Animationen könnt Ihr Euch auch in diesem Codepen-Beispiel ansehen.


Viel Spaß beim Herumprobieren! Und vielleicht sehen wir uns ja in einem ppedv-Kurs zum Thema HTML und CSS wieder!



Kommentare sind geschlossen