Animate.css har eksistert noen år nå, og jeg må innrømme å være ganske sent på festen. Jeg oppdaget det bare for et par måneder siden mens jeg søkte på nettet etter noen CSS-animasjonsveiledninger og fant det som må være den raskeste, enkleste måten å animere rundt, Animate.css.
Opprettet av en fyr som heter Dan Eden, er Animate.css en rask måte å se hvordan CCS fungerer og få litt animasjonshandling på nettstedet ditt.
Beskrevet som 'Just-add water CSS animation' Animate.css er litt morsomt med en seriøs side. Det gjør det mulig for selv amatørnettdesignere som meg å raskt få tak i det grunnleggende i CSS-animasjon og skape enkle, men effektive effekter for nettsteder. Fra en animert overskrift til mer involverte bevegelser, kan dette verktøyet gjøre det.
Animate.css
Animate.css er tilgjengelig for nedlasting fra GitHub og er egentlig et bibliotek med enkle CSS-effekter samlet på ett sted. Hver animasjon er pent pakket og klar til bruk. Alt du trenger å gjøre er å finne animasjonen du liker og bruke klassen. Det er virkelig alt det er for det.
Du trenger ikke å laste ned hele biblioteket hvis du ikke vil, for det er 2500 kodelinjer i det. Du kan besøke Animate.css-siden, finne en animasjon og klikke på Last ned Animate.css-koblingen. Den laster klassen på en webside for deg å kopiere og bruke slik du vil.
Det er enklere å bruke GitHub selv og bore ned for å finne effekten du leter etter.
- Naviger til css GitHub-siden.
- Klikk på kilden for å få tilgang til listen over elementer.
- Velg effekttype du leter etter fra listen. Bounce er en oppmerksomhetssøker, så velg linken oppmerksomhet_søkere.
- Velg bounce.css.
- Kopier koden og legg den på siden din for å bruke animasjonen.
Så enkelt er det. Du vil åpenbart velge forskjellige alternativer for de forskjellige effektene, men sluttresultatet er det samme. Tilgang til koden som er nødvendig for å gjøre det tunge løftet på siden.
Bygge et animert objekt med Animate.css
Å bygge noe kult med Animate.css er enkelt. Det gjelder bare å finne CCS-koden og legge den til din egen CSS. Hvis jeg kan gjøre det, kan hvem som helst!
Det første alternativet på Animate.css-siden er sprett, så la oss bruke det i dette eksemplet.
- Lim inn ' ' innsiden i stilarket ditt.
- Finn CSS for animasjonen du ønsker, og legg den til elementet du vil animere. Legg for eksempel til ' å legge til den avvisningseffekten for å teste, et bilde eller hva som helst.
- Legg til følgende CSS-kode for at det hele skal fungere. Tatt fra bounce.css ovenfor.
@keyframes spretter {
fra, 20%, 53%, 80%, til {
animasjon-timing-funksjon: kubikk-bezier (0.215, 0.610, 0.355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
animasjons-timing-funksjon: kubikk-bezier (0, 755, 0, 050, 0, 85, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
animasjons-timing-funksjon: kubikk-bezier (0, 755, 0, 050, 0, 85, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.sprett {
animasjons-navn: sprett;
transform-opprinnelse: senterbunn;
}
Tar du animasjonen videre med Animate.css
Den ovennevnte sekvensen gir en avvisningseffekt når siden først lastes inn, noe som er kult, men en engangsting. Hva med at vi legger den til svevet. På den måten spretter det når noen svir over testen. Det er ikke noe jeg ville gjort på et produksjonsnettsted, men det er en fin måte å demonstrere hvordan alt fungerer.
Legg til følgende kode i CSS-en din for å legge til avvisningseffekten. Hver gang musen svever over elementet, skal den sprette.
. vedtatt: sveve {
-webkit-animasjon-varighet: 1s;
-moz-animasjon-varighet: 1s;
-ms-animasjon-varighet: 1s;
-o-animasjon-varighet: 1s;
animasjon-varighet: 1s;
-webkit-animasjon-fyll-modus: begge deler;
-moz-animasjon-fyll-modus: begge deler;
-ms-animation-fill-mode: begge deler;
-o-animasjon-fyll-modus: begge deler;
animasjonsfyll-modus: begge deler;
}
Hvis du kjenner CSS, vil du vite mye bedre enn jeg om hvordan du implementerer forskjellige effekter på forskjellige handlinger. Som nybegynner hjelper dette og bibliotekene i Animate.css meg å lage grunnleggende, men effektive animasjoner for websidene mine.
Jeg vet ikke hvor mange jeg vil bruke på et live nettsted, da de ikke alltid går for godt ned og mobilbrukere ikke ser ut til å like dem i det hele tatt. Som en leksjon i hvordan CSS fungerer og hvordan den kan brukes til å forbedre nettet, er det imidlertid en stor ressurs. Jeg er bare en nybegynner, men selv tilbringe et par timer med Animate.css for denne opplæringen har lært meg mye. Jeg tror jeg vil spille med det mye mer før jeg er ferdig. Hva med deg?
