15 CSS-Animationsbibliotheken, die du kennen solltest

Der Übergang von einer CSS-Stilkonfiguration zur nächsten lässt sich mit CSS-Animationen bewegen. Eine CSS-Animation besteht aus einem Stil, der die Animation beschreibt, und aus einer Reihe von Keyframes, die den Anfangs- und den Endzustand des Animationsstils festlegen, dazu mögliche Zwischenstationen.

Gegenüber klassischen, skriptbasierten Animationstechniken haben CSS-Animationen drei große Vorteile:

1. Für einfache Animationen sind sie leicht zu handhaben, JavaScript musst du dafür nicht einmal können.
2. Auch bei mäßiger Systemlast laufen sie sauber. In JavaScript geraten schon einfache Animationen oft ins Stocken. Die Rendering-Engine kann Frames überspringen und andere Kniffe anwenden, damit die Darstellung so flüssig wie möglich bleibt.
3. Weil der Browser den Ablauf der Animation selbst steuert, kann er Leistung und Effizienz verbessern, etwa indem er Animationen in Tabs, die gerade nicht sichtbar sind, seltener aktualisiert.

Die meisten Animationen lassen sich mit reinem CSS umsetzen, doch mit Bibliotheken und Animations-Frameworks kommst du in weniger Zeit zu besseren Ergebnissen.

1️⃣ Animate.css – CSS-Animationen von Daniel Eden

2️⃣ Anime.js – Anime.js ist eine leichtgewichtige JavaScript-Animationsbibliothek mit einer schlichten, aber mächtigen API. Sie arbeitet mit CSS-Eigenschaften, SVG, DOM-Attributen und JavaScript-Objekten.

3️⃣ CSShake – CSShake hält genau das, was der Name verspricht: eine CSS-Bibliothek, die eigens dafür gebaut wurde, Elemente deiner Webseite zu schütteln.

4️⃣ Hover.css – Hover.css ist eine CSS-Animationsbibliothek für Buttons und andere Oberflächenelemente deiner Website.

5️⃣ AniJS – AniJS ist eine Animationsbibliothek, mit der du Elementen Animationen in einer einfachen, satzähnlichen Schreibweise zuweist.

6️⃣ Animista – CSS-Animationen auf Abruf

7️⃣ Tachyons Animate – Tachyons ist eine atomare CSS-Bibliothek mit einer Fülle von Utility-Klassen, mit denen sich alles gestalten lässt, indem du genau die Klassen ergänzt, die du brauchst.

8️⃣ Sequence.js – Sequence.js ist eine JavaScript-Bibliothek mit einem responsiven CSS-Framework für Slider, Präsentationen, Banner und andere schrittbasierte Anwendungen.

9️⃣ Infinite – Diese Animationen, etwa Drehungen und Pulsieren, sind eigens dafür gebaut, endlos weiterzulaufen.

🔟 OBNOXIOUS.CSS – Animationen für Starke im Herzen und Schwache im Geist

1️⃣1️⃣ MOTION UI – Eine Sass-Bibliothek für flexible CSS-Transitions und -Animationen.

1️⃣2️⃣ Keyframes.app – Eine grafische Oberfläche, um eigene CSS-Animationen über Keyframes zu erzeugen.

1️⃣3️⃣ AnimXYZ – AnimXYZ hilft dir, Animationen für deine Website zu erstellen, anzupassen und zu kombinieren. Gemacht für Vue, React, SCSS und CSS.

1️⃣4️⃣ Whirl – Lade-Animationen in CSS mit minimalem Aufwand!

1️⃣5️⃣ Hamburgers – Hamburgers ist eine Sammlung schmackhafter, in CSS animierter Hamburger-Icons. Der Quellcode liegt auch als Sass-Bibliothek bei. Alles ist modular und anpassbar, also bereite dir deinen eigenen Hamburger zu.