Wicked CSS - Eine heiße neue Animationsbibliothek in Pure CSS3

Dank CSS3 können Sie einige verrückte Animationen im Web erstellen. Diese können arbeiten über alle Browser und Seitenelemente Um Navigationselemente, Dropdowns und Registerkarten zu steuern, geben Sie ihnen einen Namen.

Sie können diese Codes sogar mithilfe von Animationswerkzeugen dynamisch generieren. Diese sind jedoch im Vergleich zu einer voll entwickelten Animationsbibliothek recht begrenzt.

Wicked CSS ist die neueste Bibliothek dieser Art. Das erinnert mich an das frühe Animate.css war ziemlich einfach und rudimentär, könnte jedoch in so ziemlich jeder Website verwendet werden.

Werfen Sie einen Blick auf die Homepage für eine Live-Demo mit einer Liste aller unterstützten Animationen. Zum Zeitpunkt des Schreibens dieses Artikels zähle ich 24 Animationsstile insgesamt von Folien bis zu Rotationen und pulsierende / springende Effekte.

Bei vielen dieser Animationen handelt es sich um einmalige Funktionen, mit denen ein Element sichtbar gemacht werden kann. Dies ist praktisch für Seiten mit Bildlaufanimationen, die auf bestimmte Seitenelemente abzielen.

Aber du kannst es auch Verwenden Sie diese Option, um zusätzliche Seitenelemente anzuzeigen (oder auszublenden) B. Dropdown-Menüs, Suchleisten, ausgeblendete Anmeldeformulare oder andere Elemente. Hier ist eine kleine Liste von Animationen, aus denen Sie auswählen können:

Shake
Rein / rauszoomen
Schieben Sie nach oben / unten
Ein- / Ausblenden
Ein- / Ausrollen
Bounce und Pop
Zirkulardrehung ein / aus

Alle diese Animationsstile sind für den einmaligen Gebrauch bestimmt. Sie können jedoch mehrmals pro Seite und pro Element aufgerufen werden Dies sind keine sich wiederholenden Animationen.

Stattdessen verwenden Sie diese basierend auf dem Klick-, Hover- oder Swipe-Effekt eines Benutzers. Sie können auch auf CTA-Tasten für pulsierende / pulsierende Effekte verwendet werden, dies erfordert jedoch eine JavaScript-Timing-Funktion.

Schauen Sie sich die Beispielseite für eine Live-Vorschau und weitere Details an. Die vollständige Dokumentation finden Sie auf der Hauptseite zusammen mit dem GitHub-Repo.

Wicked CSS ist eine neuere Bibliothek, daher hat sie noch keine große Anhängerschaft. Aber die Bibliothek ist stabil und es wird wahrscheinlich noch Jahre dauern.