Alt du trenger å vite for å implementere animasjoner i CSS



Denne artikkelen vil gi deg en detaljert og omfattende kunnskap om hvordan du implementerer animasjoner i CSS med eksempler.

CSS er en av de kraftigste måtene å gjøre websiden interaktiv. Det forvandler utseendet og følelsene til grunnleggende nettside. En av de viktige og spennende funksjonene som CSS tilbyr, er at den lar oss utføre animasjoner. Det lar oss flytte elementene på siden vår. La oss starte Journey of Animations i CSS i følgende rekkefølge:

Animasjoner i CSS

Å legge til animasjoner på nettstedet vårt er en fin måte å trekke brukernes oppmerksomhet på. Det gir ikke bare verdien til siden vår, men beriker også brukeropplevelsen. Animasjonen i CSS er bygget på to deler. De er





  • Keyframes
  • Animasjon
    Animasjoner i CSS

CSS-animasjonene støttes i alle nettlesere. Noen eldre nettlesere som Safari (opptil versjon 8.0) krever imidlertid prefiks (-webkit-) for å tolke animasjonsegenskapene. For eksempel:

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% -webkit-animasjonsnavn: cssanim / * gamle nettlesere * / -webkit-animasjon-varighet: 5s / * gamle nettlesere * / animasjon -navn: cssanim animasjonsvarighet: 5s} / * gamle nettlesere * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}

Vi kan bruke html-eksemplet ovenfra og erstatte CSS-koden i stilkoden for å prøve ut flere eksempler.



Keyframes i CSS

Dette er byggesteinen for animasjoner i CSS. Det pleide å definere spesifikke øyeblikk og stiler av animasjonen på nettsiden vår. Med andre ord, når vi spesifiserer @keyframes inne i CSS-en vår, får den kontrollen til å endre den nåværende tilstanden til en ny tilstand eller animere objektene i en viss varighet.

@Keyframes må ha visse egenskaper for å kontrollere animasjonen, for eksempel navnet på animasjonen, stadier og egenskaper.



  • Navn - Det kreves et navn for hver animasjon for å beskrive atferd.

  • Stadier - Scenen representerer fullføringen av en animasjon. Det kan gjøres betegnet enten med 'til' og 'fra' nøkkelord eller i prosent, mens 0% representerer begynnelsestilstanden og 100% representerer slutttilstanden til en animasjon. Fordelen med å bruke den prosentvise representasjonen er at vi kan definere flere mellomtrinn mellom, dvs. hva som skal være oppførselen til animasjon på 50% eller 75% etc.

    konvertere dobbelt til int java
  • Egenskaper - Disse egenskapene gir oss kontroll over @keyframes for å manipulere dem under animasjonen.

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 5s} @keyframes cssanim {0% {transform: skala (0.5) opasitet: 0} 50 % {transform: skala (1.5) opasitet: 1} 100% {transform: skala (1)}}

Nå siden vi er klare på å definere nøkkelbilder. La oss utforske animasjonsegenskaper, for å beskrive hvordan vi kan animere elementene og objektene våre. De to egenskapene, dvs. arve og initial, kan brukes med alle animasjonstyper. Disse egenskapene brukes vanligvis sammen med div-koden for å utvise ulik oppførsel.

  • første: Setter denne egenskapen til standardverdien.

  • arve: Arver denne egenskapen fra det overordnede elementet.

Animasjonsegenskaper

  • animasjonsnavn

Den spesifiserer navnet på animasjonen, som brukes i @keyframes for å manipulere.De mulige verdiene er:

  • Navn: Dette spesifiserer navnet som skal bindes til nøkkelbildet for animasjon.
  • ingen: Dette er standardverdien og kan brukes til å overstyre de nedarvede eller kaskaderende animasjonene.

Syntaks:

animasjonsnavn: navn | ingen | innledende | arve

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 5s} @keyframes cssanim {0% {venstre: 0px} 100% {venstre: 300px} }
  • animasjon-varighet

Den spesifiserer tiden det tar for en animasjon å fullføre en utførelse. Den er definert i sekunder eller millisekunder (f.eks. 4s eller 400ms). Standardverdien for denne egenskapen er 0s, så hvis denne egenskapen ikke er spesifisert, vil ikke animasjonen finne sted.

Syntaks:

animasjon-varighet: tid

.anim {høyde: 200px bredde: 200px bakgrunn: blå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 4s} @keyframes cssanim {0% {transform: skala (0.4) opasitet: 0} 50 % {transform: skala (1.4) opasitet: 1} 100% {transform: skala (1)}}
  • animasjonsforsinkelse

Egenskapen animasjonsforsinkelse lar oss spesifisere forsinkelsen i animasjonen. Den definerer når en animasjonssekvens vil starte kjøringen.

Verdien til denne egenskapen kan deklareres i sekunder eller millisekunder (ms). Det kan inneholde både positive og negative verdier. En positiv verdi indikerer at animasjonen vil starte etter at den angitte tiden er gått, og inntil da vil den forbli unanimert. På den annen side vil en negativ verdi umiddelbart starte animasjonen fra punktet som om den allerede har blitt utført i en spesifisert tidsramme.

Syntaks:

animasjonsforsinkelse: tid

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 4s animasjonsforsinkelse: 4s} @keyframes cssanim {0% {venstre: 0px} 100% {venstre: 250px}}
  • animasjon-iterasjon-telling

Denne egenskapen angir antall ganger en animasjonssekvens skal spilles. Standardverdien for denne egenskapen er 1.De mulige verdiene er:

  • Antall - angir antall iterasjoner
  • uendelig - indikerer at animasjonen skal gjenta for alltid

Syntaks:

animasjon-iterasjon-antall: antall | uendelig

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 2s animasjon-iterasjon-antall: 4} @keyframes cssanim {0% {venstre: 0px} 100% {left: 100px}}
  • animasjon-retning

Den definerer retningen til animasjonen. Retningen til elementet kan settes til å spille fremover, bakover eller i alternative sykluser.Standardverdien for denne egenskapen er normal, og den tilbakestilles for hver syklus.De mulige verdiene er:

  • normal - Dette er standard oppførsel og animasjonen spilles fremover. Etter hver syklus kommer animasjonen til sin opprinnelige tilstand og spilles fremover igjen

  • omvendt - Animasjonen spilles i bakoverretning. Etter hver syklus kommer animasjonen til slutttilstand og spilles bakover

  • alternere - Retningen til animasjonen er snudd, dvs. den spiller fremover først og deretter bakover på hver syklus. Hver odde syklus gjengir fremover animasjon og hver jevne syklus gjengir bevegelse bakover.

  • alternativ-omvendt - Retningen til animasjonen snur vekselvis. Her spilles animasjonen først bakover og deretter fremover på hver syklus. Hver odde syklus beveger seg bakover eller bakover, og hver jevne syklus gir fremover animasjon.

Syntaks:

animasjonsretning: normal | omvendt |alternativ | alternativ-omvendt

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 2s animasjon-iterasjon-antall: uendelig} @keyframes cssanim {0% {venstre: 0px} 100% {left: 100px}}
  • animasjon-timing-funksjon

Denne egenskapen bestemmer hastighetskurven eller bevegelsestilen til animasjonen. Det er tildelt å gjøre endringen i animasjonsstil jevnt fra ett skjema til et annet. Hvis ingen verdi er tildelt, er den standard for å lette.De mulige verdiene for animasjon-timing-funksjon er:

  • letthet - Dette er standardverdien til eiendommen. Her starter animasjonen sakte, blir gradvis rask i midten og ender så sakte opp igjen.

  • lineær - Animasjonen holder samme hastighet gjennom hele syklusen, dvs. fra start til slutt.

  • letthet - Animasjonen starter sakte.

  • lette ut - Animasjonen slutter sakte.

  • letthet ut - Animasjonen beveger seg sakte både under start og slutt.

  • kubikk-bezier (n, n, n, n) - Denne avanserte funksjonen lar oss lage en tilpasset tidsfunksjon ved å definere våre egne verdier. Den mulige verdien varierer fra 0 til 1.

Syntaks:

konvertering av c ++ type

animasjon-timing-funksjon: lineær | letthet | lette ut | letthet | enkel inn-ut |kubikk-bezier (n, n, n, n)

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 2s animasjonsretning: omvendt} @keyframes cssanim {0% {bakgrunn: oransje venstre: 0px } 50% {bakgrunn: gul venstre: 200 px topp: 200 px} 100% {bakgrunn: blå venstre: 100 px}}
  • animasjon-fyll-modus

Dette er en spesiell egenskap da den bestemmer animasjonsstilen før eller etter at animasjonen spilles.Som standard påvirkes ikke stilen til elementet av animasjonen før begynnelsen eller etter at den er avsluttet. Denne egenskapen er nyttig siden den hjelper til med å overstyre denne standardoppførselen til animasjonen.Følgende er mulige verdier for egenskapen animasjon-fyll-modus:

  • ingen - Dette er standardverdien for eiendommen, dvs. animasjonsstilene blir ikke brukt på elementet, før eller etter animasjonen.

  • fremover - Stilene beholdes av elementet i den endelige animasjonssekvensen, dvs. etter at animasjonen er ferdig.

  • bakover - Stilene beholdes av elementet i den første animasjonssekvensen, dvs. før animasjonen stirres, spesielt under animasjonsforsinkelsen.

  • både - Dette betyr at animasjonen vil følge i begge retninger, dvs. fremover og bakover

Syntaks:

animasjon-fyll-modus: ingen | fremover | bakover | både

.anim {bredde: 50px høyde: 50px bakgrunn: lyseblå farge: hvit skriftvekt: fet posisjon: relativ animasjonsnavn: cssanim animasjonsvarighet: 5s animasjon-iterasjon-antall: uendelig kantradius: 100%} # anim1 { animasjon-timing-funksjon: letthet} # anim2 {animasjon-timing-funksjon: lineær} # anim3 {animasjon-timing-funksjon: letthet-inn} # anim4 {animasjon-timing-funksjon: let-out} # anim5 {animasjon- timing-funksjon: let inn-ut} @keyframes cssanim {fra {venstre: 0px} til {venstre: 400px}}
  • animasjon-spill-tilstand

Denne egenskapen spesifiserer en animasjon som enten skal være i avspilling eller pause. Når en animasjon gjenopptas fra pause, begynner den også der den gikk.De mulige verdiene er:

  • spiller - Å gjengi animasjonen i løpet
  • stoppet - Å gjengi animasjonen i pausetilstand.

Syntaks:

animasjon-spill-tilstand: satt på pause | spiller

.anim {bredde: 100px høyde: 100px bakgrunn: lyseblå posisjon: relativ animasjonsnavn: cssanim animasjonsvarighet: 3s animasjonsforsinkelse: 2s animasjonsfyllmodus: bakover kantradius: 100%} @keyframes cssanim {0% {topp: 0 px bakgrunnsfarge: oransje} 50% {topp: 0 px bakgrunnsfarge: grønn} 100% {topp: 100 px bakgrunnsfarge: blå}}
  • animasjon

Dette er kjent som animasjonen stenografi. Den brukes til renere kode. Når vi er vant til alle animasjonsegenskapene, anbefales det at vi bruker animasjonsforkortelsen for å kode raskere og definere alle egenskapene i en enkelt linje.

Syntaks:

animasjon: [animasjonsnavn] | [varighet av animasjon] | [animasjon-timing-funksjon] |[animasjonsforsinkelse] | [animasjon-iterasjon-antall] | [animasjonsretning] |[animasjon-fyll-modus] | [animasjon-spill-tilstand]

Alle animasjonseffektene som vi viser ovenfor ved hjelp av forskjellige animasjonsegenskaper, kan oppnås ved å bruke stenografianimasjon eiendom.

.anim {høyde: 200px bredde: 200px bakgrunn: lyseblå posisjon: relativ kantradius: 100% animasjonsnavn: cssanim animasjonsvarighet: 2s animasjonsretning: normal animasjon-spill-tilstand: pauset} @keyframes cssanim {0% {bakgrunn: oransje topp: 0px} 50% {bakgrunn: gul venstre: 200px topp: 200px} 100% {bakgrunn: blå venstre: 100px}}

Dette avslutter alle animasjonsegenskapene som kan brukes i CSS. Vi bør prøve forskjellige varianter av disse egenskapene for å få et tydeligere bilde. Når vi blir komfortable, kan animasjonen forkortelse være til god hjelp for å skrive renere og raskere kode. Dette er en av de viktigste ferdighetene å lære i CSS for webutviklere. Siden vi har en tendens til å fokusere mer på bevegelige objekter i stedet for statiske, kan animasjoner hjelpe oss med å oppnå det og også utvikle flotte bemerkelsesverdige websider.

Sjekk ut vår som kommer med instruktørstyrt liveopplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.

Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet til 'Animasjoner i CSS' -bloggen, så kommer vi tilbake til deg.