12 großartige CSS-Animationsressourcen
Das Erstellen aussagekräftiger und schöner CSS-Animationen kann schwierig und zeitaufwändig sein, aber zum Glück gibt es einige großartige Ressourcen, mit denen Sie Ihren kreativen Prozess beschleunigen können. Diese Ressourcensammlung enthält die besten CSS-Animationsbibliotheken.
Wählen Sie eine aus, die zu Ihrem Projekt passt, und beginnen Sie sofort, oder verwenden Sie sie als Ausgangspunkt, um etwas zu erstellen, das auf Ihre Marke zugeschnitten ist. Es gibt auch einige praktische Spickzettel und Verknüpfungen, die Ihr Lernen ergänzen.
Wenn Sie sich nicht sicher sind, was Sie erstellen möchten, schauen Sie sich doch unsere Inspiration an Beispiele für CSS-Animationen Post für einige Ideen. Eine neue Site entwerfen? Hier sind unsere Anleitungen zur Auswahl eines Webseitenersteller und bekommen Ihre Web-Hosting Service richtig.
01. Animista
Animista ist eine Art Spielplatz, auf dem Sie eine Sammlung vorgefertigter CSS-Animationen bearbeiten und herumspielen können. Kopieren Sie dann den gewünschten Code zur Verwendung in Ihren Projekten. Animista begann sein Leben als Nebenprojekt für die Front-End-Entwicklerin Ana Travas, die es noch entwickelt. Beginnen Sie mit diesem Tool mit unserem Anleitung zum Beherrschen von On-Demand-CSS-Animationen mit Animista .
02. CSS3 Animation Spickzettel
Dieses hilfreiche Projekt bietet eine Reihe von voreingestellten Plug-and-Play-Animationen, die Sie in Ihren Webprojekten verwenden können. Es gibt klare Anweisungen, die Ihnen den Einstieg erleichtern. Im Wesentlichen fügen Sie jedoch einfach das Stylesheet zu Ihrer Website hinzu und wenden die vorgefertigten CSS-Klassen auf die Elemente an, die Sie animieren möchten. Dieser Spickzettel verwendet CSS3-Keyframes. Sie müssen sich also nicht um die Positionierung des Elements kümmern, um Platz für die Animationen zu schaffen.
03. Animate.css
Diese Bibliothek enthält nicht weniger als 77 Animationen, die alle in CSS erstellt und einsatzbereit sind. Verweisen Sie einfach auf die CSS-Datei. Wenn Sie einem Element Klassen hinzufügen, wird die Animation ausgeführt. Dies funktioniert am besten, wenn Sie Klassen mit JavaScript hinzufügen oder entfernen.
Die Bibliothek hat eine beeindruckend kleine Dateigröße, wenn sie verkleinert und komprimiert wird. Wenn Sie jedoch nicht das gesamte Objekt auf Ihre Website laden möchten, ist das Projekt auch eine großartige Inspirationsquelle. Diese von Dan Eden zusammengestellte Bibliothek enthält fast alle CSS-Animationen, die Sie benötigen könnten, von den Grundlagen (Bounce, Einblenden) bis zu etwas Aufregenderem (Jack in the Box, Jello). Verwenden Sie das Dropdown-Menü auf der Startseite, um den Titel der Bibliothek in den verschiedenen Stilen zu animieren.
04. Hover.css
Ähnlich wie Animate.css ist Hover.css eine Sammlung von CSS-Effekten, die Sie in Ihren Projekten verwenden können. Diese Bibliothek wurde speziell für Animationen von Schaltflächeninteraktionen erstellt. Die Bibliothek kann in Vanilla CSS, Sass oder Less heruntergeladen werden - sie passt also in so ziemlich jedes Projekt. Die Bibliothek enthält fast alle Animationen, die Sie für die Interaktion benötigen. (Weitere alternative Speichertypen finden Sie in diesen Cloud-Speicher Optionen.)
05. CSShake
CSShake ist eine Bibliothek mit CSS-Animationen, die sich dem Erschüttern von Elementen widmen. Die Bibliothek verfügt über eine Reihe von Klassen, die Sie zu Elementen hinzufügen können, um eine von vielen verschiedenen Shake-Animationen anzuwenden. Die Animationen verwenden Keyframes und verwenden die Transformationseigenschaft, um Animationen zu erstellen, die manchmal verrückt aussehen, aber definitiv schwer zu ignorieren sind. Jetzt gibt es auch eine Schwesterbibliothek - Neu schütteln - bietet die Shake-Effekte als React-Funktionskomponente.
06. Obnoxious.css
Obnoxious.css wurde von Tim Holman erstellt und entspricht genau dem Namen. Die Bibliothek untersucht, was mit CSS-Animationen möglich ist, zeigt jedoch perfekt, was Sie mit CSS-Animationen nicht tun sollten. Obwohl es als produktreife Animationsbibliothek präsentiert wird (und es ist), soll es ein Augenzwinkern sein. Mach dich bereit.
07. Replainless.CSS
Replainless.css ist eine kleine und leichtgewichtige CSS-Animationsbibliothek mit dem Schwerpunkt auf der Erstellung von Animationen, die kein Repaint über den Browser verursachen (sofern sie ordnungsgemäß verwendet werden). Da kein Reflow oder Repaint erforderlich ist, sind diese Animationen superschnell und performant!
08. Animieren Sie Plus
Stripe ist bekannt für seine wunderschön animierten Produktseiten. Einer der Masterminds dahinter, Benjamin De Cock, hat eine CSS- und SVG-Animationsbibliothek erstellt, die performant und leicht ist und sich daher besonders gut für Mobilgeräte eignet.
09. Motion UI
Diese Sass-Bibliothek von ZURB erleichtert das Anwenden benutzerdefinierter Animationen auf Ihre Benutzeroberfläche. Es ist etwas komplizierter als einige der anderen Bibliotheken auf dieser Liste, aber sehr leistungsfähig. Sie können Animationen erstellen und optimieren, um sie Ihren Anforderungen anzupassen, und sie dann mit JavaScript aufrufen.
10. BounceJS
Dies ist ein nützliches Tool, wenn Sie eine eigene Animationsbibliothek erstellen möchten. Es hat viele lustige Voreinstellungen und erleichtert das Schreiben von komplexem Animationscode. Es verwendet erweiterte Transformationsoperationen, um die Animationen zu erstellen, die dann zu Ihrer eigenen Animations-CSS-Datei hinzugefügt und nach Ihren Wünschen angewendet werden können.
elf. GreenSock-Animationsplattform
GSAP ist ein JavaScript-Animationsframework. Wenn Sie komplexere Animationen erstellen (z. B. in Bannerwerbung oder Heldenbildern), bietet GSAP eine Reihe von Tools für die Wiedergabe, das SVG-Tweening und vieles mehr. Dies ist großartig, wenn Sie weiter gehen möchten als in CSS-Animationen möglich, aber eine gewisse Lernkurve darstellen. Um mehr zu erfahren, werfen Sie einen Blick auf unsere Leitfaden zu GSAP .
12. Easings Funktionen Cheatsheet
Timing-Funktionen geben die Änderungsrate im Laufe der Zeit an. Auf dieser Website können Sie die richtige für Ihre Animation oder Ihren Übergang auswählen. Es verfügt über eine Galerie mit Bézier-Kurven, in der Sie eine Vorschau anzeigen und den Code schnell kopieren können.
Weiterlesen:
- Animieren Sie SVG mit JavaScript
- Erstellen Sie coole UI-Animationen mit CSS
- Verstehe die 12 Prinzipien der Animation
