3 Beispiele zur einfachen Anwendung von CSS3 Animationen

Manchmal möchte man gerne Animationen auf seiner Website integrieren, ohne durch viele Codes die Seite langsamer zu machen. In der Vergangenheit hatte das Flash-Format eine Hochphase, jedoch hat es sich aufgrund der erschwerten Suchmaschinen-Optimierung nicht durchgesetzt. In diesem Beitrag möchte ich die Vorteile sowie einige Beispiele zur Anwendung der CSS3 Animation vorstellen.

Gestaltungsmöglichkeiten mit der neuen CSS Version 3

Die dritte Version von CSS bietet viele neue Gestaltungsmöglichkeiten. Dazu gehören u.A. Farbüberläufe und andere Kniffe. Hier soll es vor allem um das Feature der Animation gehen.

CSS ist eine Programmiersprache, mit der man Stile festlegen kann. Das geschieht indem man für einzelne Elemente bestimme Klassen oder ID-Namen verteilt. So kannst du in externen Dateien beispielsweise Hintergrundfarben definieren, Ecken abrunden und andere Verschönerungen vornehmen. Das geht seit CSS3 nicht nur geradlinig, sondern auch in Keyframe-Animationen.

Beispiele zur Anwendung von CSS3 Animationen

Im Folgenden möchte ich drei Beispiele zur Anwendung von CSS3-Animationen vorstellen.

Button Animationen

In diesem Beispiel möchte ich dir zeigen, wie man einen sanften Farbübergang bei Berührung eines Buttons mit der Maustaste erzielt. Im Video findest du die detaillierte Vorgehensweise ab Minute 4:35. Der Button ist in diesem Fall schon programmiert und auch die Farbänderung bei Berührung. Um den Farbübergang zu animieren, wird folgender Code im CSS Code des Hauptelementes (z.B. CSS Klasse: „button“) hinzugefügt:

transition: all 0.4s;

Diese Animation findet recht häufig Anwendung und erzielt bereits mit sehr geringem Aufwand einen schönen Effekt. Zu bedenken ist allerdings, dass durch die attribute „all“ gleich alle Änderungen beim Hovern animiert werden.

Bewegte Bilder

Dieser beliebte Effekt ist in vielen WordPress Themes vorprogrammiert. Es handelt sich um das Einfahren von Bildern in die Website. Dieser Effekt ist oft jedoch mit Java Script programmiert. Dies erschwert die Speed Optimierung. Es kann dabei passieren, dass solche Animationen plötzlich nicht mehr funktionieren. Dieses Problem kann mit der Anwendung von CSS3 folgendermaßen vermieden werden (Video ab Minute 8:35):

Vor dem Hauptelement:

@keyframes btnfade {
0% {opacity 0;
transform: translatex(0px)
}

100% {opacity 1;
transform: translatex(-100px)
}
}

und im Hauptelement (z.B. CSS Klasse: „button“):

animation-name: btnfade;
animation-duration: 2s;

Dieser Effekt ist zwar ein ganz klein wenig komplizierter, aber dennoch gut machbar. Bei der Page Speed Optimierung umgeht man hiermit das Risiko des Verlustes der animierten Elemente.

Bessere Conversion Rate durch bewegte Buttons

Kleiner Trick, der unter Umständen zu mehr Conversions führen kann: Ein bestimmtes Element „aufpoppen“ lassen. Zum Beispiel 10 Sekunden nach Öffnen der Seite. Das zieht Aufmerksamkeit auf sich! Auch diese Animation ist sehr einfach zu lösen. Fast wie die Buttonanimation selbst, nur etwas verzögert. Wie das geht können Sie im Detail im Video ab Minute 14:08 sehen.

Folgender Code wird verwendet:

@keyframes btnfade {
0% {
transform: scale(1,1);
}

50% {
transform: scale (1.2,1.2);
}

100% {
transform: scale(1,1);
}
}

und im Hauptelement

animation-duration: 0.7s;
animation-delay: 3s;

Recht simpel also.

Vorsicht mit den Animationen

Mit solchen Animationen sollte man es nicht übertreiben. Sie sollten nur an passenden Stellen eingesetzt werden. Dienen sollten sie nur dazu, die Aufmerksamkeit direkt auf ein bestimmtes Element zu lenken. Geschickt eingesetzt kann man hiermit die Conversion Rate steigern.

Falsch eingesetzt können sie allerdings auch das Gegenteil bewirken. Ein extremes Beispiel wäre ein Skript, das nicht richtig lädt. So könnte plötzlich der Verkaufsbutton komplett fehlen! Oder die Ladezeit ist zu lang und der Besucher zu ungeduldig, um zu warten. Dann würde er die Seite direkt wieder verlassen.

Ich selbst verwende kaum Animationen. Weder auf meinen eigenen Seiten, noch auf den Seiten, die ich für meine Kunden erstelle. Das Risiko, dass ein Besucher nicht sofort das findet, was er sucht, ist leider zu hoch. Außerdem möchten die meisten Unternehmen seriös wirken und nicht verspielt.

Ich freue mich über Fragen und Anregungen in den Kommentaren. Um auch in Zukunft auf dem Laufenden gehalten zu werden, melde dich gerne zum Newsletter an.

Bis zum nächsten Mal,