Animationen erfahren derzeit im Webdesign eine Art der Renaissance. Es ist noch nicht sehr lange her, da wurden Animationen noch verschmäht. Sie galten als Dekoration ohne wirklichen Nutzen – unpraktisch und unnötig. Doch in den letzten Jahren zeigte sich ihr erneuertes Potential. Websites und deren Inhalte werden dadurch bereichert und wirken lebendiger. Darüber hinaus verbessern sie die Nutzererfahrung. CSS3 bietet einige Möglichkeiten, schnell und einfach interessante Animationen zu erstellen. Wie das geht, zeigen wir Ihnen hier.

Animationsmöglichkeiten

Auf Websites bezogen, sind Animationen nichts anderes als die Veränderung eines Objekts. Dies kann eine ganze Reihe an Formen einnehmen. Sei es die Bewegung eines Objekts von einem Punkt zum anderen, die Änderung der Form oder der Farbe eines Objekts, oder aber auch eine Kombination dieser Möglichkeiten. Grundlegend handelt es sich aber immer um eine Form des Bewegtbilds in mehreren Einzelschritten. CSS3 bietet zwei gute und einfache Möglichkeiten, Animationen zu erstellen.

Transitions

CSS Transitions ist die etwas simplere der beiden Varianten. Dabei gibt es jeweils einen zu definierendes Anfangs- sowie Endzustand, in den Objekt sich befindet. Es gibt dabei keine Zwischenschritte, sondern nur die Veränderung von Zustand ,,a” zu Zustand ,,b”. Ein Beispiel dafür wäre, einen Button die Farbe von Rot zu Violett wechseln zu lassen. Alternativ lässt sich neben der Hintergrund- und Textfarbe auch die Position des Elements ändern. Die Animation wird hier üblicherweise durch ein Mouseover eingeleitet. Diese Art der Animation bietet nur begrenzte Möglichkeiten, ist dafür aber umso leichter umzusetzen. Der entsprechende CSS-Code für Transitions könnte wie folgt aussehen:

,,property” ist das Element, das sich während der Animation ändert. Hier ist es die Hintergrundgarbe. Die Dauer der Animation beträgt eine Sekunde, festgelegt durch ,,duration”. Alternativ lässt sich der Code verkürzen, dies sähe dann folgendermaßen aus:

Dem Code lassen sich noch zahlreiche andere Eigenschaften und Elemente hinzufügen, beispielsweise eine Verzögerung, bevor die Animation ausgeführt wird. Das zugehörige Code-element wäre dann mit ,,transition-delay” betitelt.

Keyframeanimationen

Keyframeanimationen sind eine Spur komplexer, aber auch aufwendiger als Transitions. In die Animation lassen sich hier Zwischenstände der Animation einfügen.  Dies geschieht mittels Schlüsselbilder bzw. Keyframes. Zwar müssen auch ein Anfangs- wie ein Endzustand festgelegt werden, allerdings lassen sich im weiteren Verlauf Zwischenschritte einbauen, um der Animation mehr Vielfalt und Potential zu verleihen. Eine weitere Besonderheit ist, dass kein Mouseover von Nöten ist, um die Animation auszulösen. Keyframeanimationen können selbstständig und ohne vorherige Interaktion ausgelöst werden, wahlweise schon beim Aufrufen der Seite. Im ersten Schritt wird für Keyframeanimationen ein Code benötigt, in dem der Name der Animation sowie Anfangs- und Endzustand festgelegt werden: