CSS Animationen: Bibliotheken & Tools
  • Zuletzt aktualisiert am
  • Webtimiser
  • Webdesign
  • 0

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 findet Ihr 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 Element.
Aus Performance-Gründen nutzt man für die Umsetzung am besten reine CSS Animationen. 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:

  1. CSS-Bibliothek downloaden
  2. Die Datei in den entsprechenden Ordner kopieren, z.B. webseite/css
  3. 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>
  4. 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

Animate css
Just-add-water CSS animations
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

 

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

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

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

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

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

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.

Loaders.css

loaders css
Delightful and performance-focused pure css loading animations.
Wenn das Laden einer Seite etwas länger dauert, werden häufig Page Loader Animationen eingesetzt. Damit wenigstens der Spinner schnell lädt, bietet Loaders.css einige nette css-basierte Spinner.

SpinKit

spikit

Genau wie Loaders, bietet auch SpinKit CSS-basierte Loading Spinners.

Hint.css

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

Balloon css

 

Ganz ohne JavaScript kann man mit Balloon.css Tooltips einbinden.

StarWarsIntro.css

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

css gradient animator

Der Gradient Animator ist ein kleines CSS Tool, mit dem man den Farbverlauf von Hintergründen animieren kann.

CSS Generator

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.

CSS3 Keyframes Animation Generator

css animation generator

Auch der CSS3 Keygrames Animation Generator unterstützt bei der Erstellung einer komplexen CSS Animation. Ganz ohne Coden kann man seine eigenen Styles erstellen und für die eigene Webseite nutzen.

Stylie

A fun web animation Tool

stylie animation tool

Mit Stylie kann man auf einfache Weise komplexe Animationen erstellen und den generierten Code in seine Webseite einbauen.

Wait!Animate

Wait Animate TOol

 

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.

Wie hat Dir dieser Beitrag gefallen? 1 Star2 Stars3 Stars4 Stars5 Stars (1 Bewertungen, Ø: 5,00 von 5)
loadingLoading...

Schreibe einen Kommentar

Menü schließen