CSS-Animationsbibliotheken

Es gibt eine ganze Menge von Bibliotheken, die uns dabei helfen wollen, Dinge im Web zu animieren. Das sind keine Bibliotheken, die bei der Syntax oder der Technologie von Animationen helfen, sondern eher direkt verwendbare Bibliotheken. Möchten Sie eine Klasse wie „animate-flip-up“ anwenden und beobachten, wie sich ein Element, äh, nach oben dreht? Dann sind dies die Bibliotheken, die Sie sich ansehen sollten.

Ich bin der festen Überzeugung, dass Sie sowohl 1) lernen sollten, wie man Dinge in CSS animiert, indem Sie die Syntax selbst lernen, als auch 2) Animationen anpassen sollten, um das Gefühl für Ihre Website zu optimieren. Dennoch hilft das Durchstöbern solcher Bibliotheken dabei, Ideen zu fördern, Sie mit Codebeispielen in Gang zu bringen und könnte eine Grundlage für Ihre eigenen Projekte bilden.

Werfen wir einen Blick auf die Landschaft dieser Bibliotheken. Einige Bibliotheken haben unterschiedliche Ansätze: nur das Nötigste per Klassen, Sass-Mixins, leichte JavaScript-Bibliotheken zum Hinzufügen/Entfernen von Klassen usw. Aber im Wesentlichen sind sie alle „CSS-Animationsbibliotheken“. (Einige von ihnen sind ziemlich komisch, da sie „CSS3“ im Titel haben, was sie etwas veraltet erscheinen lässt. Das sagt heute keiner mehr so wirklich.)

Während Animationen sowohl Spaß machen als auch nützliche Interaktionen schaffen können, sollte man bedenken, dass nicht alle Benutzer sie beim Surfen im Web wünschen. Sehen Sie sich Eric Baileys Artikel „Revisiting prefers-reduced-motion, the reduced motion media query“ für Informationen an, wie Sie Benutzer, die wenig oder keine Bewegung bevorzugen, berücksichtigen können.

Animista

Sie wählen eine Animation, die Ihnen gefällt, und sie liefert Ihnen einen Klassennamen, den Sie verwenden können, der eine Keyframe-Animation aufruft (Sie kopieren und fügen beides ein). Der Punkt ist, dass Sie nur das mitnehmen, was Sie brauchen.

Siehe den Pen
Animista Example von Chris Coyier (@chriscoyier)
auf CodePen.

Animate.css

Eine der großen, ursprünglichen klassischen CSS-Animationsbibliotheken von Dan Eden.

Siehe den Pen
Animate.css (Part 3) von Hudson Taylor (@Hudson_Taylor11)
auf CodePen.

tachyons-animate

Tachyons selbst ist eine atomare CSS-Bibliothek mit einer Vielzahl von Utility-Klassen, um im Grunde alles zu gestalten, indem man Klassen zu dem hinzufügt, was man braucht. tachyons-animate erweitert diese, indem es „Single-Purpose-Klassen hinzufügt, um Ihnen bei der Orchestrierung von CSS-Animationen zu helfen“. Es kann alleine verwendet werden, aber selbst die Dokumentation schlägt vor, dass es in Kombination mit anderen Animationsbibliotheken verwendet werden kann, da Hilfsklassen allgemein nützlich sind.

Siehe den Pen
tachyons-animate von Chris Coyier (@chriscoyier)
auf CodePen.

Infinite

Diese Animationen, wie z. B. Rotationen und Pulse, sind speziell darauf ausgelegt, für immer zu laufen und sich zu wiederholen.

Siehe den Pen
BgrYZo von Chris Coyier (@chriscoyier)
auf CodePen.

Motion UI

Eine Sass-Bibliothek zum Erstellen flexibler CSS-Übergänge und Animationen.

Siehe den Pen
Motion UI von Chris Coyier (@chriscoyier)
auf CodePen.

micron

eine [μ] Microinteraction-Bibliothek, die mit CSS-Animationen erstellt und von JavaScript angetrieben wird.

Siehe den Pen
Micron von Chris Coyier (@chriscoyier)
auf CodePen.

Vivify

Vivify ist ähnlich wie Animate.css in dem Sinne, dass es viele der gleichen Arten von Animationen enthält. Es bietet aber auch viele eigene.

Siehe den Pen
Vivify von Chris Coyier (@chriscoyier)
auf CodePen.

Hover.css

Eine Sammlung von CSS3-gesteuerten Hover-Effekten, die auf Links, Buttons, Logos, SVGs, Featured Images usw. angewendet werden können. Einfach auf Ihre eigenen Elemente anwenden, modifizieren oder nur zur Inspiration nutzen. Verfügbar in CSS, Sass und LESS.

Siehe den Pen
Hover.css von Chris Coyier (@chriscoyier)
auf CodePen.

AllAnimationCss3

Siehe den Pen
All Animation von Chris Coyier (@chriscoyier)
auf CodePen.

Magic Animations CSS3

Siehe den Pen
Magic Animations von Chris Coyier (@chriscoyier)
auf CodePen.

It’s Tuesday.

Eine skurrile CSS-Animationsbibliothek.

Siehe den Pen
Tuesday von Chris Coyier (@chriscoyier)
auf CodePen.

vhs

Siehe den Pen
vhs von Chris Coyier (@chriscoyier)
auf CodePen.

ReboundGen

Siehe den Pen
ReboundGen von Chris Coyier (@chriscoyier)
auf CodePen.

CSShake

Siehe den Pen
CSSShake von Chris Coyier (@chriscoyier)
auf CodePen.

Motion CSS

cssanimation.io

Siehe den Pen
cssanimation.io von Chris Coyier (@chriscoyier)
auf CodePen.

WickedCSS

Siehe den Pen
WickedCSS animations von Chris Coyier (@chriscoyier)
auf CodePen.

Woah.css

Siehe den Pen
Woah.css von Chris Coyier (@chriscoyier)
auf CodePen.

Obnoxious

Siehe den Pen
Obnoxious.css von Chris Coyier (@chriscoyier)
auf CodePen.

Hexa

Mimic.css

Siehe den Pen
mimic.css von Eric Treacy (@etreacy)
auf CodePen.