Tuesday.css är det hetaste animationsbiblioteket just nu
Nu borde du redan vara bekant med Animate.css som det primära animationsbiblioteket bland webbdesigners.
Men det finns ett nytt barn på blocket heter tisdag, och det är det tar webanimering med våld.
Det här nya biblioteket är inte helt annorlunda i format eller implementering. Men tisdag kommer med en handfull nya CSS-animationer att ni kan inte hitta någon annanstans.
Dessa nya effekter är mycket mer subtila i naturen så de verkligen blanda in en sida snyggt. Här är en liten lista över effekterna du kan välja från:
- Fade & expandera
- Fade & krympa
- Stämpla ner och studsa
- Vinklad gunga
- Släpp in från vänster / höger
- Squash / sträck
- Gångjärn
Om du går igenom den här listan på demoversidan märker du att alla effekter har En sak gemensamt: fysik.
De känner alla mycket realistiskt mot fysikens grunder, och de verkar följa tyngdlagen. Ingen av dessa animeringar är över-topp eller extern. de är subtil men märkbar och ännu viktigare är de trovärdig.
Jag tror att tisdag är en av de bästa moderna CSS-animeringsbiblioteken eftersom den presenterar en realistisk syn på webbanimering.
Vi borde inte utforma gale gränssnittseffekter som sticker ut som en öm tumme. Subtilitet är alltid namnet på spelet eftersom det skapar en känsla av interaktivitet från användarens inmatning om det är ett klick eller en bläddring.
Problemet har alltid skrivit dessa animationer från början och få dem att se rätt ut. Men nu med tisdag kan dina bekymmer flyga precis ut genom dörren.
Bara ladda ner en kopia från GitHub och Lägg till .css filen till din sida. Du kan faktiskt använd CDN-versionen direkt från GitHub om du inte vill ladda ner något lokalt.
När det här är lagt till på din webbsida, bara lägg till .animera klass tillsammans med någon av de proprietära klasserna listad i GitHub repo. Din kod kan se ut så här:
Det är tisdag.
Ta en titt på fullständig dokumentation att se en lista över alla in / ut-animeringsklasserna.
Om du arbetar med JavaScript kan du också lägg till dessa klasser dynamiskt på klicka / sväva händelser. På så sätt kan du bara lägga till animera klassen när en användare klickar på en knapp, som tycks animera på klicka.
Det finns så mycket du kan göra med tisdag, och det är verkligen den nya Animate.css för pragmatiska UI-animationer.
Ta en titt på demo sida att se det leva i aktion, och du kan lära dig mer genom att läsa igenom deras “i skapandet” posta som talar om hur Shakr laget skapade tisdag.
