CSS Transitions — elegant animiert

Ihre Webseite kann sich bewegen — wenn ihr Webdesigner sie lässt... Ach, das sind Sie ja dank einfachem CMS selbst.

zuerst erschienen am 14. Oktober 2019

Ein wenig Bewegung ist nicht nur für uns alle gut, sondern bringt auch Webseiten ein wenig in Schwung. Gut, dass moderne Webbrowser in der Lage sog. "Transitions" — also Übergänge — in einer angegebenen Zeitspanne auszuführen. Und zwar für alle Objekte und ihre Werte wie Position, Größe, Abstände, Farben, etc. 

Nicht immer ist es das nur ein ausgeflippter Design-Wunsch, so manche Transition löst sogar Probleme von Visualisierungen, die anders nicht so gut funktionieren. Manchmal will man als Mouse-Over für Links etwa nicht den klassischen Farbwechsel, sondern benötigt eine andere Form der Animation beim Überfahren eines Objektes mit dem Mauszeiger. 

Auch wenn hier mal ein wenig mehr CSS nötig ist, bekommt man das mit ein wenig gutem Willen recht einfach hin...

Zur Vorbereitung muss das zu animierende Objekt — schon im "normalen" Zustand — ein wenig vorbereitet werden. Zumindest die Art und Zeitdauer sollte man angeben und nicht alle "display" Werte funktionieren.

a.grow {

transition:

200ms ease-out;

}

Es gibt dabei mehrere Varianten, die Animation über die angegebene Zeitspanne zu "verteilen" und zwar:

ease

— langsam an Anfang und Ende, schneller Ablauf dazwischen (Standard)

linear

— gleichbleibende Geschwindigkeit

ease-in

— langsamer Start

ease-out

— langsames Ende

ease-in-out

— langsamer Start, langsames Ende

cubic-bezier(n,n,n,n)

— eigene Funktion definieren

Nun zur Animation, hier für den Fall, dass die Maus das Objekt mit der "grow"-Klasse überfährt:

a.grow:hover {

transform:

scale(1.05);

transform-origin:

center center;

}

Das Objekt soll hier konkret von der Mitte aus (horizontal wie vertikal, deswegen zweimal "center") auf 105% seiner Größe skalieren.

Anstelle einer CSS-Transformation — dazu hier mehr — kann auch die Veränderung "normaler" Styles wie etwa von Breite oder Höhe mit CSS-Transitions animiert werden. Dazu wird einfach ein von der Basis-Definition des Objekts abweichender Wert für den :hover-Status bestimmt. 

Für mehr Kompatibilität mit älteren Browsern kann es sinnvoll sein, die Transition-Anweisungen mit "vendor prefix" im CSS zu wiederholen, laut caniuse.com ist dies jedoch aktuell nicht mehr notwendig. Wie bei allen derartigen Design-Tricks gilt natürlich, dass man es mit dem Einsatz dieser Techniken nicht übertreiben sollte. 

Und das Ganze in einfach?

Gerade in Kombination mit CSS-Transformationen ist dieser Trick ggf. nicht mehr für jeden "ganz einfach". Deswegen definieren wir als Service zum einfachen CMS metatag® derartige Tricks einfach für die gewünschten Objekte vor, dann passiert später für Sie quasi alles wie von Geisterhand — und eben: einfach!

Ausführliche Infos zu Transitions

w3schools.com/css/css3_transitions.asp

Wir verwenden Cookies, um Ihnen den bestmöglichen Service zu gewährleisten. Wenn Sie auf der Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu.

×ausblenden