Die besten Anleitungen für CSS-Animationen

Heute müssen es keine GIF-Dateien oder JavaScript-Hintergründe mehr sein, um Animationen auf die Webseiten zu bringen. Die Stylesprache CSS ist mittlerweile so ausgereift, dass sich mit ihr sehr interessante bewegende Objekte gestalten lassen. Aber auch hier gilt: Weniger ist mehr. Überfordern Sie Ihren Besucher nicht, sondern setzen Sie gezielt Animationen an passenden Stellen ein.

Transitions und Animationen

In CSS unterscheiden wir zwei verschiedene Arten der Bewegungsabläufe. Transitions sind einfache Abläufe, von A nach B sozusagen. Als Ausgangslage wird ein Objekt gerendert, wofür wir in der CSS-Anweisung ein Ziel und Zwischenschritte angeben können.

Das machen wir mit:

• transition-property: Welches CSS-Property wollen wir verändern? (Geben Sie kein Property an, werden alleProperties auf der Seite entsprechen der Einstellungen behandelt.)
• transition-delay: Nach wie vielen Sekunden soll eine Veränderung geschehen?
• transition-duration: Wie lange soll die Veränderung andauern?
• transition-timing-function: Wie schnell soll die Veränderung vor sich gehen? Mit den Werten „ease“, „ease-in“ und „ease-in-out“ legen wir die Geschwindigkeit fest. Auch eine Bezierkurve ist möglich.

Animationen sind da schon deutlich komplexer. Hier können wir auch verschiedene Zwischenschritte festlegen, die dann vom Browser interpretiert werden. Wir müssen also nicht jeden einzelnen Schritt angeben, sondern wie bei Flash-Animationen nur bestimmte Punkte festlegen. Der Rest wird vom Browser interpretiert und umgesetzt. 

Möglichkeiten von CSS-Animationen

CSS-Animationen lassen Spielraum für kleine und größere Animationen ähnlich GIFs. Um die einzelnen Schritte in einer Animation festzulegen, verwenden wir @keyframes.

@keyframes Animation {
0% {
    // Anfang der Animation
 }
50% {
    // Mitte der Animation
 }
100% {
    // Ende der Animation
  }
}

Wir können die verschiedenen Schritte mit diesen Befehlen manipulieren:

• animation-delay: Nach wie vielen Sekunden soll die Veränderung geschehen?
• animation-direction: Mit „reverse“ oder „alternate“ kann die Animation vorwärts oder rückwärts laufen gelassen werden.
• animation-duration: Wie viele Sekunden soll die Animation dauern?
• animation-fill-mode: Wie sieht das Element aus, wenn es nicht animiert wird?
• animation-iteration-count: Wie oft soll die Animation abgespielt werden?
• animation-play-state: Läuft die Animation oder pausiert sie?
• animation-timing-function: Wie schnell soll die Veränderung vor sich gehen? Mit den Werten „ease“, „ease-in“ und „ease-in-out“ legen wir die Geschwindigkeit fest. Auch eine Bezierkurve ist möglich.

Animation-timing-function und animation-delay arbeiten analog zur jeweiligen Entsprechung der Transitions, die anderen Funktionen legen komplexere Abläufe in der Animation fest.

So können Sie mit Animationen festlegen, dass ein Objekt beim Hover erst kleiner wird, sich dann dreht, und wieder größer werden soll. Das ist, zugegebenermaßen, ein etwas extremeres Beispiel, verdeutlicht aber die Möglichkeiten.

Das Ganze würde dann in etwa so aussehen:

div.ubergang {
animation: animation 5000ms;
}
@keyframes animation {
0% {
transform: translate(0px);
}
20% {
transform: scale(.5);
}
50% {
transform: rotate(120deg);
}
80% {
transform: rotate(120deg) scale(2.0);
}
100% {
transform: translateX(0px) scale(1.0);
}
}

Innerhalb von 5 Sekunden wird also das angesteuerte Objekt bei 20 % auf die halbe Größe verkleinert, da scale unter 1 ist. Bei 50 % wird das Objekt um 120° gedreht, bei 80 % um weitere 120°. Zusätzlich wird es auf die doppelte Ursprungsgröße vergrößert und zum Ende wieder auf 1 gesetzt und um die letzten 120° gedreht. TranslateX deutet an, an welcher horizontalen Position das Objekt sich jeweils befindet.

Die Vorteile guter CSS-Animationen

Smartphone-Menüs machen es vor: Eine kleine Animation zeigt dem Benutzer, dass er an die richtige Stelle getippt hat. Das Burgermenü wird zu einem Kreuz, es klappt sich langsam aus oder der Button vergrößert sich kurz und wird wieder klein. Es liegt in der Natur des Menschen, auf bewegende Objekte zu schauen.

Ein weiteres sehr berühmtes Beispiel ist eine Ladeanimation. Wenn Sie auf einer Webseite auf einen Login-Button klicken, dauert es in der Regel etwas, bis Sie weiterkommen. Auch, wenn nicht jedem Besucher die technischen Hintergründe wie Datenbankabfragen klar sind, weiß jeder: Wenn ich einen Link oder einen Button klicke, komme ich nicht sofort weiter. Hier ist eine Ladeanimation sinnvoll, um dem Besucher zu zeigen, dass die Webseite die Anfrage entgegengenommen hat und gerade verarbeitet. Diese einfache Animation holt den Benutzer ab, sagt ihm, dass die Webseite gerade arbeitet und er so nicht nochmals auf den Button oder Link klicken muss, um das Ganze von vorne zu starten.

CSS-Animationen können, wenn sie richtig angewandt werden, animierte Bilder auf Webseiten überflüssig machen. Ebenfalls sind sie auch ein SEO-Ranking-Faktor. Wenn Ihre Seite wegen zu großer oder häufig vorkommender Bilder zu langsam geladen wird, überlegen Sie doch mal, die Animationen und Bilder per CSS-Animation laufen zu lassen.

Fazit

Richtig eingesetzt bereichern CSS-Animationen Ihre Webseite. Professionelle Animationen sind ein doppelter Gewinn, da sie nicht nur die Aufmerksamkeit der Besucher lenken, sondern auch die Webseiten-Geschwindigkeit erhöhen. Es lohnt sich also auf jeden Fall, einen näheren Blick auf CSS-Animationen zu werfen, wenn Sie eine aktuelle und interessante Webseite gestalten oder führen möchten.