Wicked CSS - Een hete nieuwe animatiebibliotheek in Pure CSS3

Dankzij CSS3 kun je een aantal gekke animaties op het web bouwen. Deze kunnen werken in alle browsers en pagina-elementen om navigatie-items, vervolgkeuzelijsten, tabbladen te beheren, noem maar op.

In feite kunt u deze codes zelfs dynamisch genereren met behulp van animatiegereedschappen. Maar die zijn vrij beperkt in vergelijking met een volwaardige animatiebibliotheek.

Wicked CSS is de nieuwste bibliotheek in zijn soort. Dit doet me vroeg denken Animate.css wat vrij eenvoudig en rudimentair was, maar kan in vrijwel elke website worden gebruikt.

Neem een kijkje op de startpagina voor een live demo samen met een lijst met alle ondersteunde animaties. Vanaf het moment dat ik dit artikel schrijf, tel ik 24 totale animatiestijlen van dia's tot rotaties en pulserende / stuiterende effecten.

Veel van deze animaties zijn eenmalige functies die worden gebruikt om een element in beeld te brengen (of uit het zicht). Dit is handig voor pagina's met scroll-to-view-animaties die gericht zijn op specifieke pagina-elementen.

Maar je kunt ook gebruik dit om extra pagina-items te tonen (of verbergen) zoals vervolgkeuzemenu's, zoekbalken, verborgen aanmeldingsformulieren of iets anders. Hier is een kleine lijst met animaties waaruit je kunt kiezen:

Schudden
Zoom in / uit
Schuif omhoog / omlaag
Vervagen in
In- en uitrollen
Bounce en pop
Cirkelrotatie in / uit

Al deze animatiestijlen zijn ontworpen voor één enkel gebruik. Ze kunnen meerdere keren per pagina en per element worden genoemd, maar dit zijn geen herhalende animaties.

In plaats daarvan gebruikt u deze op basis van het klik-, zweeftekst- of veegeffect van een gebruiker. Ze kunnen ook op CTA-knoppen worden gebruikt voor pulserende / kloppende effecten, maar daarvoor is een JavaScript-timingfunctie vereist.

Bekijk de voorbeeldenpagina voor een live preview en nog meer details. Je vindt ook volledige documentatie over de hoofdsite samen met de GitHub-repo.

Wicked CSS is een nieuwere bibliotheek, dus het heeft nog geen enorme aanhang. Maar de bibliotheek is stabiel en zal er waarschijnlijk nog vele jaren zijn.