Animate.css har funnits några år nu och jag måste erkänna att jag var ganska sent på festen. Jag upptäckte det bara för ett par månader sedan när jag sökte på nätet efter CSS-animationsstudier och fann vad som måste vara det snabbaste, enklaste sättet att animera runt, Animate.css.
Skapad av en kille som heter Dan Eden, är Animate.css ett snabbt sätt att se hur CCS fungerar och få lite animationsåtgärder på din webbplats.
Beskrivs som 'Just-add water CSS animation' Animate.css är lite kul med en allvarlig sida. Det gör att även amatörswebdesignare som jag själv snabbt kan ta sig an grunden till CSS-animering och skapa enkla men effektiva effekter för webbplatser. Från en enda animerad rubrik till mer involverade rörelser kan detta verktyg göra det.
Animate.css
Animate.css är tillgängligt att ladda ner från GitHub och är i huvudsak ett bibliotek med enkla CSS-effekter samlade på ett ställe. Varje animering är snyggt förpackad och redo att användas. Allt du behöver göra är att hitta den animering du gillar och tillämpa klassen. Det är verkligen allt som behövs för det.
Du behöver inte ladda ner hela biblioteket om du inte vill eftersom det finns 2500 rader med kod i det. Du kan besöka Animate.css-webbplatsen, hitta en animation och klicka på länken Hämta Animate.css. Den laddar klassen på en webbsida för dig att kopiera och använda som du vill.
Det är lättare att använda GitHub men borra ner för att hitta effekten du letar efter.
- Navigera till css GitHub-sidan.
- Klicka på källlänken för att öppna listan över element.
- Välj effekttyp du letar efter från listan. Bounce är en uppmärksamhetssökande, så välj länken uppmärksamhetssökare.
- Välj bounce.css.
- Kopiera koden och placera den på din sida för att tillämpa animationen.
Det är verkligen så enkelt. Du skulle självklart välja olika alternativ för de olika effekterna men slutresultatet är detsamma. Tillgång till koden som krävs för att göra tunga lyft på sidan.
Bygga ett animerat objekt med Animate.css
Att bygga något coolt med Animate.css är enkelt. Det handlar bara om att hitta CCS-koden och lägga till den i din egen CSS. Om jag kan göra det kan vem som helst göra det!
Det första alternativet på sidan Animate.css är studsa, så låt oss använda det i det här exemplet.
- Klistra in ' ' inuti i ditt formatmall.
- Hitta CSS för den animering du vill ha och lägg till den till det element du vill animera. Lägg till exempel till ' för att lägga till den studseffekten att testa, en bild eller vad som helst.
- Lägg till följande CSS-kod för att allt ska fungera. Hämtad från bounce.css ovan.
@keyframes studsar {
från, 20%, 53%, 80%, till {
animation-timing-funktion: kubik-bezier (0, 215, 0, 610, 0, 355, 1, 000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
animation-timing-funktion: kubik-bezier (0, 755, 0, 050, 0, 85, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
animation-timing-funktion: kubik-bezier (0, 755, 0, 050, 0, 85, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.stoppa {
animationsnamn: studsa;
transform-origin: center botten;
}
Tar animationen vidare med Animate.css
Ovanstående sekvens lägger till en studseffekt när sidan laddas först, vilket är coolt men en engångssaker. Vad sägs om att vi lägger till det för att sväva. På så sätt studsar det när någon svävar över testet. Det är inte något jag skulle göra på en produktionswebbplats, men det är ett bra sätt att visa hur allt fungerar.
Lägg till följande kod i din CSS för att lägga till avvisningseffekten. Varje gång musen svävar över elementet bör den studsa.
. godkänd: sväva {
-webkit-animation-varaktighet: 1s;
-moz-animation-varaktighet: 1s;
-ms-animation-varaktighet: 1s;
-o-animation-varaktighet: 1s;
animationsvaraktighet: 1s;
-webkit-animation-fill-mode: båda;
-moz-animation-fill-mode: båda;
-ms-animation-fill-mode: båda;
-o-animation-fyll-läge: båda;
animation-fill-mode: båda;
}
Om du känner till CSS, vet du mycket bättre än jag om hur man implementerar olika effekter på olika åtgärder. Som nybörjare hjälper detta och biblioteken i Animate.css mig att skapa grundläggande, men effektiva animationer för mina webbsidor.
Jag vet inte hur många jag skulle använda på en live-webbplats eftersom de inte alltid går för bra och mobilanvändare verkar inte gilla dem alls. Men som en lektion i hur CSS fungerar och hur den kan användas för att förbättra webben är det en stor resurs. Jag är bara en nybörjare men till och med tillbringar ett par timmar med Animate.css för den här tutorialen har lärt mig mycket. Jag tror att jag kommer att spela mycket mer innan jag är klar. Och du då?
