Animationen und Übergänge mit Animate.css erstellen
Kommentare

Website-Elemente mit Animationen oder Übergängen zu versehen, ist eines der Features, das beim Benutzen von CSS3 besonders beliebt ist. Wo man früher noch JavaScript inkludieren musste, um solche Effekte

Website-Elemente mit Animationen oder Übergängen zu versehen, ist eines der Features, das beim Benutzen von CSS3 besonders beliebt ist. Wo man früher noch JavaScript inkludieren musste, um solche Effekte zu erzielen, lassen sie sich nun einfach direkt mit CSS erstellen. Libraries wie Animate.css erleichtern einem die Arbeit dabei enorm. Sara Viera beschreibt in einem Tutorial, wie man mit der Library arbeiten kann.

Animate.css statt JavaScript-Äquivalente

Warum sollte man sich nicht die Arbeit mit CSS erleichtern, wenn es dafür die Möglichkeit gibt? Zwar ist es möglich, Animations- und Übergangseffekte mit JavaScript zu erzeugen – an deren Nutzung ist man eh schon gewöhnt – , doch die Arbeit mit einer Library wie Animate.css kann einem viel Mühe ersparen.

Besonders von Vorteil bei Animate.css ist zum Beispiel auch, dass die Animationen Cross-Browser-kompatibel sind und sich so für fast jedes Projekt nutzen lassen.

Wofür sich Animate.css nutzen lässt

Die Nutzung von Animate.css ist simpel. Zunächst muss die CSS-Datei der Library nach dem Download in den HTML-Code eingebunden werden. Sobald sie in die Website geladen ist, hat der Nutzer Zugriff auf sämtliche Animationen, die in der Library beschrieben sind.

Damit sie auf ein Element angewendet werden können, wird es mit der Klasse animated versehen und der Name der Animation hinzugefügt.

Damit das Element animiert dargestellt wird, wenn ein Button gedrückt wird oder der Nutzer eine andere Aktion durchführt, wird das Click-Event mit der Einbindung von JavaScript ausgelöst und dem Element dann die Klassen hinzugefügt.

Ebenso lässt sich die Geschwindigkeit der Animation sowie ihre Verzögerung definieren.

Grundsätzlich ist die Nutzung von Animate.css eine nützliche Hilfe, um Animationen und Übergänge in eine Website einzubinden. In ihrem Tutorial gibt Sara Vieira noch weitere Anregungen für die Nutzung der Library und unterstreicht alle Schritte mit hilfreichen Codebeispielen.

Aufmacherbild: closeup hand putting a tablet pc in the shelves in the library von Shutterstock / Urheberrecht: Ermolaev Alexander

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -