Tuesday.css ist jetzt die heißeste Animationsbibliothek
Mittlerweile sollten Sie bereits vertraut sein Animate.css wie die primäre Animationsbibliothek unter den Webdesignern.
Aber es gibt ein neues Kind im Block Dienstag, und sein Webanimation mit Gewalt nehmen.
Diese neue Bibliothek unterscheidet sich hinsichtlich Format und Implementierung nicht wesentlich. Aber der Dienstag kommt mit einer Handvoll neue CSS-Animationen das du kann nirgendwo anders finden.
Diese neuen Effekte sind viel subtiler in der Natur so sie wirklich schön in eine Seite mischen. Hier ist ein kleine Liste der Effekte Sie können wählen aus:
- Ausblenden und erweitern
- Verblassen und verkleinern
- Stamp down & hüpfen
- Abgewinkelte Schaukel
- Fallen Sie von links / rechts ein
- Squash / Stretch
- Scharnier
Wenn Sie diese Liste auf der Demo-Seite durchgehen, werden Sie feststellen, dass alle Effekte Auswirkungen haben Eines ist gemeinsam: Physik.
Sie fühlen sich alle sehr realistisch zu den Grundlagen der Physik, und sie scheinen zu halten Sie sich an die Gesetze der Schwerkraft. Keine dieser Animationen ist übertrieben oder überflüssig. Sie sind subtil und doch auffällig und was noch wichtiger ist, sie sind glaubhaft.
Ich denke, Dienstag ist eine der besten modernen CSS-Animationsbibliotheken, weil er präsentiert wird eine realistische Ansicht der Webanimation.
Wir sollten keine verrückten Oberflächeneffekte entwerfen, die wie ein Daumen hervorstechen. Subtilität ist immer der Name des Spiels, weil es schafft ein Gefühl der Interaktivität von einer beliebigen Benutzereingabe, sei es ein Klick oder ein Bildlauf.
Das Problem war immer, diese Animationen von Grund auf zu schreiben und sie dazu zu bringen, genau richtig auszusehen. Aber jetzt mit Dienstag können Ihre Sorgen direkt aus der Tür fliegen.
Gerade Laden Sie eine Kopie von GitHub herunter und Ergänzen Sie die .css Datei auf Ihre Seite. Das kannst du eigentlich Verwenden Sie die CDN-Version direkt von GitHub wenn Sie nichts lokal herunterladen möchten.
Sobald dies zu Ihrer Webseite hinzugefügt wurde, klicken Sie einfach auf das anhängen .animieren Klasse zusammen mit einer der proprietären Klassen im GitHub-Repo aufgeführt. Ihr Code könnte ungefähr so aussehen:
Es ist Dienstag.
Schauen Sie sich das an vollständige Dokumentation sehen eine Liste aller In / Out-Animationsklassen.
Wenn Sie mit JavaScript arbeiten, können Sie dies auch tun Fügen Sie diese Klassen dynamisch hinzu auf Click / Hover-Events. Auf diese Weise können Sie die animierte Klasse nur hinzufügen, wenn ein Benutzer auf eine Schaltfläche klickt, die beim Klicken animiert zu sein scheint.
Mit Dienstag kann man so viel machen, und es ist wirklich das neue Animate.css für pragmatische UI-Animationen.
Werfen Sie einen Blick auf die Demo-Seite um es live in Aktion zu sehen, und Sie können mehr durch das Lesen durchlesen “in der Produktion” Post was darüber spricht, wie das Shakr-Team am Dienstag entstand.
