Transition – Der magische CSS Befehl

Animierter Content auf Webseiten ist definitiv keine Neuheit mehr. Trotzdem wird er beim Erstellen einer Homepage leider noch zu oft vernachlässigt. Mit animiertem Content sind in diesem Fall nicht einmal mehr unbedingt Elementen gemeint, die beim Scrollen der Seite aufwendig in diese eingeblendet werden. Nein es geht um die kleinen Dinge, wie z.B. das Verhalten eines Links oder Buttons, wenn man mit der Maus über diesen fährt. Die dabei eingesetzten Animationen bzw. Übergänge mögen dem Kunden nicht unbedingt instinktiv auffallen, jedoch nimmt er z.B. das Verhalten eines Buttons beim Mouse-Over dank eines soften Übergangs zwischen zwei Farben einfach als harmonisch war.

Unsere Tipps für Sie

Bevor Sie nun aber anfangen Ihre Website nur so mit Animationen vollzustopfen hier ein paar nützliche Tipps zu dem Thema:

Weniger ist mehr. Halten Sie Ihre Animationen schlicht und dezent. Zu überladene Effekte können zwar auf den ersten Blick einmal ganz nett aussehen, jedoch sollten vor allem Buttons, die wiederholt auf der Seite auftauchen, dezent gehalten werden.

Mehrwert bieten. Elemente, die Sie mit einer Animation bei einem Mouse-Over versehen sollten auch eine Funktion haben. Der Besucher ihrer Seite wird schnell irritiert sein, wenn die Elemente, die Ihn gerade zum Klick auf diese verleitet haben, keine Funktion bieten.

Die richtige Dauer. Animationen sollten keineswegs zu lang sein. Wenn der Besucher jedes Mal erst 3 Sekunden warten muss bis die Animation ausgeführt wurde könnte er dadurch seine Geduld verlieren und Ihre Webseite verlassen. Zu kurz dürfen die Übergänge jedoch auch nicht sein, da diese sonst evtl. gar nicht sichtbar sind und abgehackt wirken.

Animationen sollten zudem zum Fluss der Seite passen und dem Besucher niemals aufgedrückt werden. Natürlich können sie viel Zeit und Arbeit in eine Animation gesteckt haben, jedoch sollten Sie deshalb den Besucher Ihrer Seite nicht zwingen diese unbedingt anzusehen, ob er will oder nicht, bevor er den Rest der Seite voll nutzen kann. Stellen Sie sich doch einfach einmal vor, Sie müssten jedes Mal eine 5 Sekunden Animation überstehen, bevor Sie eine Google-Suche starten können.

Verwendung

Wie bekommt man nun eine einfache Animation zwischen zwei Zuständen hin? Das Zauberwort hierfür lautet Transition. Mit dem Transition-Befehl in Ihrer CSS Datei können Sie einfach softe Übergänge z.B. bei einem Farbwechsel schaffen.

Nehmen wir als Beispiel diesen Button:

Der CSS Code dazu sieht folgendermaßen aus:

CSS

.btn{
    padding: 10px 35px;
    background-color: #B9D531;
    border: 2px solid #B9D531;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}

.btn:hover{
	background-color: #fff;
    color: #B9D531;
}

Wenn Sie mit der Maus über diesen fahren erkennen Sie das Verhalten des Buttons bei einem Mouse-Over. Jedoch wirkt dieses noch nicht ganz stimmig und auch eher hektisch als harmonisch.

Fügen wir dem Code nun noch einen Transition-Befehl hinzu, erscheint die ganze Sache gleich in einem anderen Licht.

CSS

.btn{
	/* ... */
    transition: all 0.3s ease;
}

Und so einfach funktioniert es. Es mag nur eine kleine Code-Zeile sein, doch sie kann bereits große Wunder bewirken.