10 CSS3-Animationswerkzeuge, die Sie mit einem Lesezeichen versehen sollten

Da Menschen dazu neigen, Dinge, die sich bewegen, leichter wahrzunehmen, können intelligent benutzte Animationen die Benutzererfahrung einer Website verbessern auf wichtige Elemente aufmerksam machen, die der Benutzer schnell bemerken muss.

CSS3 hat eine neue Animationssyntax eingeführt, mit der Sie viele interessante Dinge in Ihren Designs erreichen können. Das Erstellen cooler Animationen kann jedoch manchmal kompliziert und zeitaufwändig sein. Dann können Animationsbibliotheken und Generatoren hervorragend verwendet werden.

Schauen Sie sich einige der mit CSS möglichen Animationen an:

38 Inspirierende CSS3-Animationsdemos
15 Schöne Texteffekte, die mit CSS erstellt wurden
30 coole CSS-Animationen, die Sie sehen müssen
So erstellen Sie den Bounce-Effekt mit der CSS3-Animation

In diesem Beitrag werfen wir einen Blick auf 10 brillante Werkzeuge, mit denen Sie Ihre eigenen Animationen einfacher und schneller erstellen können.

1. CSS3Gen CSS3 Animationsgenerator

CSS3Gen bietet einen benutzerfreundlichen Animationsgenerator, mit dem Sie schnell grundlegende Animationen erstellen können. Obwohl Sie mit diesem Werkzeug keine komplizierten Grafiken erstellen, ist dies eine gute Wahl, wenn Sie eine Standardanimation ohne großen Aufwand erstellen möchten.

Sie Sie müssen Ihre Hände nicht mit Code schmutzig machen, Da Sie die Eigenschaften in einem Formular festlegen können, zeigen Sie eine Vorschau des Ergebnisses an, kopieren Sie den Code und fügen Sie ihn in Ihre eigene CSS-Datei ein.

2. CSS animieren

Wenn du brauche kompliziertere Animationen, du wirst vielleicht finden CSS animieren sinnvoll. Es verfügt über eine ausgereiftere Benutzeroberfläche, Sie können etwas mehr Eigenschaften festlegen und Sie können die Animation mithilfe einer intuitiven Zeitleiste verfolgen, stoppen und erneut starten.

Es gibt auch Beispielanimationen wie “Prallen”, “Shake”, und “Swing”, dass Sie in den Generator laden und den Code entsprechend Ihren Anforderungen ändern können.

3. Coveloping-CSS-Animationsgenerator

CovelopingDer Animationsgenerator ist wahrscheinlich die beste Wahl Wenn Sie mit CSS3-Animationen neu sind, und wollen schnell verstehen, wie sie funktionieren. Mit diesem einfachen, aber leistungsstarken Tool können Sie die verschiedenen Arten von Animationen testen, die CSS3 bietet, und auf einfache Weise herausfinden, was der Unterschied zwischen ihnen ist.

Sie müssen nur 4 Parameter einstellen: Animationstyp, Animationsfunktion, Dauer in Sekunden und wenn die Animation unendlich ist. Wenn Sie bereit sind, müssen Sie sich nur noch den generierten HTML- und CSS-Code holen.

4. Magische Animationen

Magische Animationen ist eine coole CSS-Bibliothek, die es möglich macht Platzieren Sie einfach Animationen mit Spezialeffekten auf deiner Seite. Sie können zum Beispiel Elemente ein- und ausblenden lassen, nach links oder rechts öffnen und dann zurückkehren, nach unten, oben, links oder rechts und viele andere drehen

Alles, was Sie tun müssen, ist den Code herunterzuladen, die CSS-Datei in Ihre HTML-Seite aufzunehmen und die entsprechende Klasse mit Hilfe von jQuery auf folgende Weise hinzuzufügen:

 $ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn'););

Sie können auch die Einstellungen des Timers ändern und die Animation mit Hilfe von jQuery unendlich gestalten (weitere Informationen finden Sie in der Readme-Datei)..

5. Animate.css

Animate.css liefert Ihnen eine Reihe von coole, browserübergreifende CSS3-Animationen. Die Animationen sind in Gruppen unterteilt, z. B. Aufmerksamkeitssucher, springende Eingänge, springende Ausgänge, verblassende Eingänge und viele andere. Sie können sich also nicht über mangelnde Auswahl beschweren.

Sie können den Code von Github herunterladen. Dann müssen Sie nur noch die CSS-Datei zu Ihrer HTML-Seite und die entsprechenden CSS-Klassen zu den HTML-Elementen hinzufügen, die Sie animieren möchten.

6. Bounce.js

Bounce.js ist eine praktische JavaScript-Bibliothek, die es Ihnen ermöglicht Erstellen Sie komplizierte Animationen. Bounce.js verfügt über eine ausgereifte Benutzeroberfläche, die es Ihnen ermöglicht, verschiedene Komponenten (z. B. Beschleunigung, Dauer, Verzögerung und Anzahl der Sprünge) manuell zu Ihrer Animation hinzuzufügen, oder Sie wählen ein einsatzbereites Preset aus und spielen dann die Animation ab. und passen Sie die Eigenschaften an, wenn dies erforderlich ist.

7. AniJS

AniJS ist eine supercoole JavaScript-Bibliothek, mit der Sie CSS3-Animationen zu Ihren Designs hinzufügen können komplexe Komponenten der Benutzeroberfläche erstellen Dazu gehören animierte Registerkarten, Akkordeons, Modals, Schiebemenüs, Benachrichtigungen zu mobilen Apps, Bildlaufleisten und vieles mehr.

Es funktioniert mit allen modernen Browsern, einschließlich iOS und Android, benötigt keine Bibliotheken von Drittanbietern und verfügt über ein spektakuläres Showcase namens AniCollection, in dem Sie mit den verschiedenen Effekten der Bibliothek problemlos experimentieren können.

8. Einzelelement-CSS-Spinner

Wollten Sie schon immer Ihre Designs verbessern? animierte Ladespinner? Wenn die Antwort ja ist, kann diese niedliche CSS-Spinner-Bibliothek eine ausgezeichnete Wahl für Sie sein. Der CSS-Code für die Spinner ist in LESS geschrieben. Es gibt keine Einstellungen, der Code ist fertig, Sie müssen ihn nur in Ihre eigenen HTML- und CSS-Dateien einfügen.

9. Kilometerzähler

Kilometerzähler ist ein brillantes Werkzeug dafür Platzieren Sie coole animierte Messgeräte auf Ihrer Website. Es ist eine CSS- und JavaScript-Bibliothek. Der CSS-Teil ist in Sass geschrieben, und Sie können aus verschiedenen Themen auswählen, z “Digital”, “Bahnhof”, und “Auto”.

Um den Kilometerzähler zu verwenden, müssen Sie die JavaScript-Datei und die ausgewählte Motivdatei zu Ihrer HTML-Seite hinzufügen Klasse = "Kilometerzähler" Wählen Sie das Element aus, das Sie zu einem animierten Messgerät machen möchten. Ideale Wahl, um Daten visuell darzustellen oder a “Demnächst” Seite mehr auffällig.

10. Snabbt.js

Snabbt.js ist eine minimalistische Animationsbibliothek hilft Ihnen, Dinge leicht zu bewegen. Wenn Sie ein wenig Inspiration benötigen, schauen Sie sich die Demos an, um zu sehen, was Sie mit diesem intelligenten Animationswerkzeug erreichen können. Das animierte Periodensystem im Screenshot unten ist nur eine der vielen Möglichkeiten, die Snabbt.js leicht implementieren kann.

Sie müssen ein wenig JavaScript schreiben, wenn Sie diese Bibliothek verwenden möchten, aber da das Ergebnis ziemlich spektakulär ist, ist es wahrscheinlich die Mühe wert.