Auf meiner Wäscheliste mit Aufgaben, die ich eines Tages erledigen werde? ist die Idee, eine vorgefertigte Bibliothek nützlicher CSS-Animationen zu erstellen. Die schlechte Nachricht ist, dass ich wahrscheinlich nie dazu komme. Die gute Nachricht ist, dass der Entwickler Dan Eden mich dafür geschlagen hat.
Heute sehen wir uns Animate.css an, eine fantastische und kostenlose Sammlung von CSS-Animationen, die Sie fast ohne Aufwand auf Ihre Projekte anwenden können. Es ist eine tolle Zeit, mit zu spielen, also folgt mit und macht mit.
Was ist Animate.css?
Die Art und Weise, wie Animate.css erstellt wird, ist weder bahnbrechend noch besonders. Wenn Sie wissen, wie man CSS verwendet, dann wissen Sie, wie es verwendet wird. Es handelt sich lediglich um eine Reihe vordefinierter Keyframe-Animationen, die in einigen Klassen enthalten sind. Wenn Sie eine der Animationen verwenden möchten, wenden Sie die Klasse an. Das ist es!
Wenn dies alles extrem einfache Übergänge waren, lohnt sich dieses Dienstprogramm möglicherweise nicht. Dies sind jedoch komplexe, sorgfältig erstellte Animationen, die vollständig anpassbar sind. Wenn Sie Keyframes auf einer beliebigen Ebene verwenden möchten, können Sie mit Animate.css viel Zeit sparen.
Ich will keine stinkenden Klassen
Die Polizei für minimale Aufschläge ist bereit, an diesem Punkt für eine Festnahme einzusteigen. Wer möchte sein HTML mit ein paar zusätzlichen Klassen durcheinander bringen? In diesem Lernprogramm bleiben wir bei dieser Methode. Wenn Sie jedoch nicht zustimmen, können Sie den Code für eine Animation einfach kopieren und in einen semantischen Hook einfügen.
Am Ende dieses Stücks zeige ich Ihnen auch eine alternative Route, die es Ihnen ermöglicht, den zusätzlichen Markup mithilfe unseres guten Freundes Sass @extend zu entfernen.
Erstellen eines benutzerdefinierten Builds
Sie haben zwei Möglichkeiten, Animate.css herunterzuladen. Sie können entweder das Ganze von Github (gut zum Experimentieren) nutzen oder einen benutzerdefinierten Download erstellen, der nur die Effekte enthält, die Sie für das spezifische Projekt benötigen, an dem Sie gerade arbeiten (gut für die tatsächliche Verwendung).
Wenn Sie auf der benutzerdefinierten Build-Seite einen ordentlichen Tipp haben, bewegen Sie den Mauszeiger über jedes Animationslabel. Es zeigt Ihnen genau, was die Animation bewirkt, so dass Sie entscheiden können, ob Sie die Animation einfügen möchten oder nicht.
Der Download
Wenn Sie alles wie ich herunterladen möchten, erhalten Sie eine große CSS-Datei mit allen Animationsklassen und einen Ordner mit einzelnen CSS-Dateien, die jeweils eine Animation enthalten.
Sie können einfach eine bestimmte CSS-Datei auswählen, wenn Sie nur eine einzige Animation anwenden möchten, beachten Sie jedoch, dass diese nicht für sich alleine steht. Wie wir sehen werden, gibt es eine "animierte". Klasse in der großen Datei, die Sie benötigen, um alles zum Laufen zu bringen.
Eine schnelle Demo erstellen
Jetzt, da wir unsere Dateien heruntergeladen haben, ist es an der Zeit herauszufinden, wie Sie diesen bösen Jungen verwenden können. Wir brauchen etwas, um es zu testen, aber lassen Sie uns eine schnelle Bildergalerie erstellen. Sie müssen nicht alles raus, werfen Sie einfach einige Bilder in ein div, gestalten Sie sie ein wenig und schwenken Sie sie nach links.
HTML
Gehen Sie nicht wirklich Nüsse
Der obige Hinweis dient hauptsächlich zu Testzwecken. Wenn Sie die Reifen von Animate.css kicken, sollten Sie dazu ermutigt werden, alles zu probieren. Wenn Sie dies jedoch in einen echten Workflow implementieren möchten, müssen Sie eine Menge beachten.
Denken Sie zunächst an die Browserunterstützung. Keyframe-Animationen werden schließlich im IE 10 unterstützt, aber nichts davon. Laut CanIUse funktionieren sie jedoch in fast allen anderen Bereichen gut: Safari, Chrome, Firefox, Opera und sogar einige mobile Browser, z. B. für Android und iOS. Da es keine IE-Unterstützung gibt, sollten Sie Ihre Animationen strikt in der Kategorie Eye Candy halten und sich nicht darauf verlassen, dass sie Ihre Interaktionen strukturieren. Andernfalls werden viele Benutzer ausgelassen.
Berücksichtigen Sie als Nächstes die Tatsache, dass Keyframe-Animationen recht heftige Aktionen sein können, die die Benutzererfahrung wirklich beeinträchtigen, wenn Sie zu weit gehen. Verwenden Sie etwas Zurückhaltung und führen Sie viele Tests durch, um zu sehen, wie die Seite auf verschiedenen Plattformen funktioniert.
Mischen Sie es mit Sass
Wenn ich über Animate.css schaue, möchte ich die ganze Sache in Sass umschreiben. Ich kann nicht anders als darüber nachzudenken, wie viel prägnanter und leicht umsetzbarer es wäre, die Magie von Präprozessoren zu nutzen. Die gesamte Bibliothek könnte auf ähnliche Weise wie Compass erstellt werden, wodurch die Implementierung eines Effekts so einfach ist wie das Aufrufen eines Mixins.
In der Zwischenzeit, da sich Sass perfekt mit einfachem CSS vermischt, können Sie sich trotzdem einen schönen Funktionszuwachs verschaffen, ohne etwas neu zu schreiben. Der Schlüssel hier ist das Anwenden der Animationen mit @extend, sodass keine zusätzlichen Klassen in Ihrem Markup implementiert werden müssen. Folgendes berücksichtigen:
Hier habe ich ein paar einfache Knopfklassen erstellt und die Kraft von Sass genutzt, um sie im Schwebeflug zu hüpfen. Das Ergebnis ist DRY CSS ohne Wiederholung. Ich finde, Sass ist fantastisch für solche Sachen, es zeigt wirklich die Nützlichkeit von Präprozessoren.
Was denkst du?
Ich hatte viel Spaß mit Animate.css zu spielen. Ich bin mir nicht sicher, wie viel ich es in freier Wildbahn gebrauchen kann, aber ich bin sehr dankbar, dass Dan Eden sich die Zeit genommen hat, es zusammenzustellen und kostenlos anzubieten.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken.Sind Sie erstaunt darüber, wie weit sich CSS in das Gebiet bewegt hat, für das wir jQuery verwendet haben? Ist das eine gute Idee oder sollten wir so etwas JavaScript überlassen? Ich würde gerne deine Meinungen hören.