Im modernen Webdesign ist der Einsatz von Animationen ein wichtiger Bestandteil. Das können Hintergrundvideos sein, animierte Gifs, Parallax-Effekte oder CSS Animationen. Richtig eingesetzt, verleihen sie einer Webseite mehr Dynamik und können auch die Usability für den Besucher erhöhen. Eine gute Möglichkeit etwas mehr Bewegung und Effekte in das Design zu bringen, bieten CSS Animationen. Einige sofort einsetzbare CSS Bibliotheken und hilfreiche CSS Generatoren findest du in diesem Beitrag.
CSS Animation Bibliotheken
Um eine Webseite lebendiger zu gestalten, genügen häufig schon kleine Animation und dezente Effekte wie Hover, Fade, Zoom, Bounce, Slide… Anwenden kann man diese dann auf Texte, Bilder, Buttons und weitere Elemente.
Aus Performance-Gründen nutzt man für die Umsetzung am besten reine CSS Animationen. Denn diese benötigen kein JavaScript. Und werden mittlerweile auch von den meisten Browsern unterstützt.
Die Effekte kann man natürlich von Hand als Style einfügen oder man nutzt eine schon bestehende CSS-Library. So spart man Zeit und kann gleich loslegen.
CSS Animationen einbinden
Die CSS-Bibliotheken können ganz einfach in Webprojekten verwendet werden:
- CSS-Bibliothek downloaden
- Die Datei in den entsprechenden Ordner kopieren, z.B. webseite/css
- Anschließend das Stylesheet in den Head der HTML-Seite einbinden. Hier ein Beispiel für die Verwendung von Animate.css
<head> <link rel=“stylesheet“ href=“animate.min.css“> </head> - Dem gewünschten Element eine Klasse zuweisen, wie beispielsweise für einen Fade-in Effekt:
<div class=“animated fadeIn“></div>
CSS in WordPress einbinden
Möchte man eine weitere CSS-Datei in WordPress nutzen, sollte man diese nicht einfach wie bei statischen HTML-Seiten in den Header einfügen.
Am besten bindet man Styles und auch Skripte in der functions.php innerhalb eines Child-Themes ein. Alternativ kann man auch ein seitenspezifischen Plugins erstellen.
Hier der Code für die Datei functions.php: das Stylesheet animate.css befindet sich in diesem Beispiel im Ordner Childtheme/css
function add_animate_library() {
wp_register_style('animate', get_stylesheet_directory_uri().'/css/animate.css');
wp_enqueue_style('animate');
}Die Zuweisung der Animation erfolgt dann wie bereits im HTML-Beispiel beschrieben.
Animate.css
Just-add-water CSS animations
Das kostenlose animate.css beinhaltet über 70 coole Effekte. Neben den üblichen Animationen wie FadeIn, Slide oder Bounce, gibt es auch noch einige andere Spielereien. Wer möchte, kann die CSS-Bibliothek natürlich auch mit jQuery kombinieren.
Dateigröße: 52 KB
Hover.css
Hover.css bietet eine nützliche Sammlung von CSS3 Hover Effekten. Diese lassen sich einfach auf Links, Buttons, Logos, SVGs und Bilder anwenden und können Webseiten dezent aufpeppen.
Dateigröße: 104.2 kB
Repaintless.css
Repaintless.css ist eine kleine (10KB) und auf Performance bedachte Animation-Library. Es werden nur CSS-Animationen eingesetzt, die keine Reflows und Repaints der Webseite verursachen. D.h. die Elemente der Webseite müssen beim Rendern nicht neu berechnet werden und verlangsamen somit nicht die Ladezeit der Seite.
Imagehover.css
Um Portfolios oder Bildergalerien aufzuhübschen, werden häufig Hovereffekte genutzt. Mit Imagehover.css kann man schnell und einfach skalierbare Hover Effekte in die eigene Webseite einbauen. Insgesamt beinhaltet die CSS Bibliothek 44 verschiedene Effekte und ist gerade mal 19KB groß.
CSS Animation Cheat Sheet
CSS3 Animation Cheat Sheet ist eine Sammlung vorgefertigter CSS Animationen für den schnellen Einsatz in Webprojekten. Die Bibliothek nutzt CSS3 @keyframes und funktioniert problemlos in aktuellen Browsern.
Hamburgers
Tasty CSS-animated hamburgers
Die meisten Webseiten setzten das Hamburger Icon als Symbol für die mobile Navigation ein. Mit Hamburgers kann man die 3 Linien mit kleinen Effekten aufpeppen. Die Sammlung von animierten Icons nutzt CSS3 3D transforms und wird von den meisten Browsern unterstützt.
CSSShake
Some CSS classes to move your DOM!
Bei CSShake gibt es eine große Auswahl an wackligen CSS-Animationen. Wie der Name schon verrät, kann man einzelnen Elementen einen Shake-Effekt zuweisen. Damit die Webseite nicht zu unruhig wird, sollte man beim Einsatz allerdings sparsam sein. Am häufigsten genutzt wird der Wackeleffekt beispielsweise bei Login-Fenstern oder Popups.
Die Dateigröße beträgt 78.8 kB.
SpinKit
Genau wie Loaders, bietet auch SpinKit CSS-basierte Loading Spinners.
Hint.css
A pure CSS tooltip library for your lovely websites
Hint.css ist eine kleine CSS-Bibliothek speziell für Tooltips mit einer Dateigröße von 1,5KB.
Balloon.css
Ganz ohne JavaScript kann man mit Balloon.css Tooltips einbinden.
StarWarsIntro.css
Für Star Wars Fans gibt es die kleine Library Star Wars Intro. Diese reine CSS Animation verleiht Text den typischen Intro-Effekt von Star Wars Filmen.
CSS Tools & Generatoren
Manchmal möchte man nur einen einzigen kleinen CSS-Effekt in seine Webseite einbauen. Wer hierbei Unterstützung benötigt, kann nach Code-Snippets im Internet suchen oder einen der vielen CSS Generatoren nutzen. Die Online Tools sind leicht zu bedienen, selbst für CSS-Einsteiger, und bieten eine anschauliche Preview der Animation.
CSS Gradient Animator
Der Gradient Animator ist ein kleines CSS Tool, mit dem man den Farbverlauf von Hintergründen animieren kann.
CSS Generator
Der CSS Generator bietet viele nützliche Funktionen, so auch einen Generator für CSS Animationen. Ganz einfach kann man die gewünschten Werte eingeben, die Animation in einer Vorschau ansehen und den CSS Code kopieren. Ganz ohne JavaScript.
Stylie
A fun web animation Tool
Mit Stylie kann man auf einfache Weise komplexe Animationen erstellen und den generierten Code in seine Webseite einbauen.
Wait!Animate
Das Tool WAIT! Animate hilft beim Berechnen einer Pause zwischen Keyframe Animationen. Neben ein paar Beispielen, kann man auch eigene Einstellungen vornehmen und das Ergebnis einfach in die Zwischenablage kopieren.
Fazit:
Ich selbst habe bisher noch keine CSS Bibliothek für Animationen in einem Webprojekt verwendet, da ich mit Animationen generell eher sparsam umgehe. Möchte ich ein Element animieren, füge ich nur den benötigten Code in das Stylesheet ein.
Allerdings nutze ich CSS-Libraries gerne zur Inspiration und werde mir sicher aus einigen ein paar nützliche CSS-Snippets kopieren.