Wicked CSS - Ett varmt nytt animationsbibliotek i ren CSS3
Tack vare CSS3 kan du bygga några galna animationer på webben. Dessa burkar arbeta över alla webbläsare och sidelement för att styra navigeringsobjekt, rullgardinsmenyer, flikar, du heter det.
Faktum är att du även kan generera dessa koder dynamiskt med hjälp av animeringsverktyg. Men de är ganska begränsade jämfört med ett heltäckande animationsbibliotek.
Wicked CSS är det nyaste biblioteket i sitt slag. Detta påminner mig om det tidiga Animate.css vilket var ganska enkelt och rudimentärt, men kan ändå användas i stort sett alla webbplatser.
Ta en titt på hemsidan för en live demo tillsammans med en lista över alla animerade animationer. När jag skriver den här artikeln räknas jag 24 totalt animationsstilar från objektglas till rotationer och pulserande / studsande effekter.
Många av dessa animeringar är engångsfunktioner som används för att få ett element in i synvinkel (eller ur synvinkel). Detta är användbart för sidor med bläddra-till-vy-animeringar som riktar in specifika sidelement.
Men du kan också använd detta för att visa (eller dölja) extra sidobjekt som rullgardinsmenyer, sökfält, dolda anmälningsblanketter eller något annat. Här är en liten lista över animationer du kan välja från:
- Skaka
- Zooma in / ut
- Skjut upp / ner
- Fade in / out
- Rullande in / ut
- Bounce och pop
- Cirkulär rotation in / ut
Alla dessa animationsstilar är utformade för en enda användning. De kan kallas flera gånger per sida och per element, men Dessa upprepar inte animeringar.
I stället använder du dessa baserat på en användares klick, svängning eller svepseffekt. De kan också användas på CTA-knappar för pulserande / störande effekter, men det kräver en JavaScript-timingfunktion.
Ta en titt på exempelsidan för en live förhandsvisning och några fler detaljer. Du hittar också fullständig dokumentation på huvudsidan tillsammans med GitHub repo.
Wicked CSS är ett nyare bibliotek så det har inte ett stort följe ännu. Men biblioteket är stabilt och det kommer sannolikt att finnas kvar i flera år framåt.
