Wicked CSS - et varmt nyt animationsbibliotek i ren CSS3
Takket være CSS3 kan du bygge nogle skøre animationer på nettet. Disse kan arbejde på tværs af alle browsere og sideelementer at styre navigationsartikler, dropdowns, faner, du navngiver det.
Faktisk kan du endda generere disse koder dynamisk ved hjælp af animationsværktøjer. Men de er ret begrænsede i forhold til et fuldt udviklet animationsbibliotek.
Wicked CSS er det nyeste bibliotek af sin art. Dette minder mig om tidligt Animate.css, som var ret simpelt og rudimentært, endnu kunne bruges på stort set enhver hjemmeside.
Tag et kig på hjemmesiden for en live demo sammen med en liste over alle understøttede animationer. Som ved at skrive denne artikel tæller jeg 24 samlede animationsformer fra dias til rotationer og pulserende / hoppende effekter.
Mange af disse animationer er engangsfunktioner, der bruges til at bringe et element ind i visning (eller ude af betragtning). Dette er praktisk for sider med scroll-to-view-animationer, der er målrettet mod bestemte sideelementer.
Men det kan du også Brug dette til at vise (eller skjule) ekstra sideelementer som dropdown-menuer, søgefelter, skjulte tilmeldingsformer eller andet. Her er en lille liste over animationer, du kan vælge fra:
- Ryste
- Zoom ind / ud
- Skub op / ned
- Fade ind / ud
- Rullende ind / ud
- Bounce og pop
- Cirkulær rotation ind / ud
Alle disse animationsstile er designet til en enkelt brug. De kan kaldes flere gange pr. Side og pr. Element, men disse gentager ikke animationer.
I stedet bruger du disse baseret på en brugers klik, sving eller swipe-effekt. De kan også bruges på CTA knapper til pulserende / bankende effekter, men det kræver en JavaScript timing funktion.
Se eksemplet på et live preview og nogle flere detaljer. Du finder også fuld dokumentation på hovedstedet sammen med GitHub repo.
Wicked CSS er et nyere bibliotek, så det har endnu ikke noget stort. Men biblioteket er stabilt, og det vil sandsynligvis være i de kommende år.
