På min tvättlista av todo saker som jag ska göra? Someday? är idén att skapa ett förbyggt bibliotek med användbara CSS-animationer. Den dåliga nyheten är att jag sannolikt aldrig kommer att komma runt för att göra det här. Den goda nyheten är att utvecklaren Dan Eden slog mig till den.
Idag ska vi kolla in Animate.css, en fantastisk och fri samling av CSS-animationer som du kan tillämpa på dina projekt med nästan ingen ansträngning. Det är en jättebra att leka med så följ och gå med i roligt.
Vad är Animate.css?
Det finns inget banbrytande eller speciellt om hur Animate.css är byggt, om du vet hur du använder CSS, så vet du hur du använder den. Det är helt enkelt en massa fördefinierade keyframe-animationer som rullas in i vissa klasser. Om du vill använda en av animeringarna tillämpar du klassen. Det är allt!
Om dessa var alla extremt enkla övergångar, kan det här verktyget inte vara värt din tid. Men det är komplexa, noggrant byggda animationer som är fullt anpassningsbara. Om du vill använda keyframes på vilken nivå som helst, kan Animate.css spara dig mycket tid.
Jag vill inte ha några stinkande klasser
Den minsta uppmärkningspolisen är redo att sova in för en arrestering vid denna tidpunkt. Vem vill klunga sin HTML upp med en massa extraklasser? I den här handledningen brukar vi hålla fast vid den här metoden, men om du inte godkänner det är det enkelt att helt enkelt kopiera och klistra in koden för en animering i en semantisk krok.
Också i slutet av det här stycket ska jag visa dig en alternativ väg som gör det möjligt för dig att skrapa extra markup genom användandet av vår goda vän Sass @extend.
Skapa en anpassad byggnad
Du har två alternativ för att ladda ner Animate.css. Du kan antingen fånga allt från Github (bra för att experimentera) eller skapa en anpassad nedladdning som bara innehåller effekterna du behöver för det specifika projektet du arbetar med (bra för faktisk användning).
Ett snyggt tips på den anpassade byggsidan, försök sväva över varje animeringsetikett. Det visar dig exakt vad animationen gör så att du kan bestämma om du vill inkludera den.
Hämta
Om du väljer att ladda ner allt som jag gjorde, får du en stor CSS-fil som innehåller alla animeringsklasserna och en mapp full av enskilda CSS-filer, som alla innehåller en animering.
Du kan enkelt välja en viss CSS-fil om du bara vill tillämpa en enda animering, men var medveten om att den inte kommer att stå på egen hand. Som vi ser är det en animerad? klass i den stora filen som du behöver för att få allt att fungera.
Bygga en snabb demo
Nu när vi har laddat ner våra filer är det dags att räkna ut hur man använder den här dåliga pojken. Vi behöver något för att testa det men låter oss bygga ett snabbt bildgalleri. Du behöver inte gå ut, bara kasta några bilder i en div, stila dem lite och flyta dem till vänster.
html
Inte riktigt gå nötter
Rådgivningen ovan är mestadels för teständamål. När du sparkar däcken på Animate.css, uppmuntras att gräva in och försöka allt. Men om du planerar att genomföra detta till ett riktigt arbetsflöde, är det mycket att tänka på.
Tänk först på webbläsarsupport. Keyframe-animationer stöds äntligen i IE 10, men inget under det. Men enligt CanIUse fungerar de bra över nästan allt annat: Safari, Chrome, Firefox, Opera och även vissa mobila webbläsare som de för Android och iOS. Med tanke på bristen på IE-stöd, behåll dina animationer strikt i kategorin ögonkocker och lita inte på dem för att strukturera dina interaktioner eller du lämnar många användare ut.
Nästa upp, överväga det faktum att keyframe-animationer kan vara ganska häftiga åtgärder som verkligen slår ner användarupplevelsen om du går för långt. Använd lite fasthållning och utför massor av test för att se hur sidan utför på olika plattformar.
Blandar det med Sass
Ser över Animate.css Jag tycker att jag vill skriva om hela saken i Sass. Jag kan inte låta bli att tänka på hur mycket mer koncis och lätt implementerbar det skulle vara med preprocessors magi. Hela biblioteket kan byggas på liknande sätt som Compass, vilket gör genomförandet av en effekt lika enkelt som att kalla en mixin.
Under tiden, eftersom Sass mixar perfekt med vanlig CSS, kan du fortfarande ge dig en bra funktionalitetshöjning utan att skriva om någonting. Nyckeln här är att tillämpa animationerna med @extend, vilket eliminerar behovet av att implementera extra klasser i din markering. Tänk på följande:
Här har jag skapat ett par enkla knappklasser och utnyttjat Sasss kraft för att studsa dem på svävaren. Resultatet blir DRY CSS, inte längre upprepad. Jag tycker att Sass är fantastisk för saker som detta, det visar verkligen användbarheten hos förprocessorer.
Vad tror du?
Jag hade mycket roligt att leka med Animate.css. Jag är inte säker på hur mycket jag ska använda den i naturen, men jag är väldigt tacksam att Dan Eden tog sig tid att sätta ihop det och erbjuda det gratis.
Lämna en kommentar nedan och låt oss veta vad du tycker.Är du förvånad över hur långt CSS har vågat ut på det område som vi brukade använda jQuery för? Är det här en bra idé eller ska vi lämna saker så här till JavaScript? Jag skulle gärna höra dina åsikter.