Gjør nettsidene dine levende med CSS-animasjoner og overganger

Nettsidedesign er i stadig utvikling. Fra responsiv design, vakker typografi, perfekte fargekodingsskjemaer, illustrasjoner, kommer nettsideskaperne med nye ideer og design hver dag.

Brukere i dag har høye forventninger til brukergrensesnittene på grunn av slik høykvalitets innhold tilgjengelig over internett. Ettersom nettsidegrensesnittene utvikler seg, utvikler teknologien bak dem. En hovedkomponent som er ansvarlig for å forbedre nettstedets grensesnitt er CSS.

CSS eller Cascading Style Sheets er ansvarlige for å gjøre nettsteder mye interaktive ved å definere stil, layout og design. Den nyeste standarden for CSS, det vil si, CSS3 har introdusert konseptet med animasjoner og transformasjoner som forbedrer brukeropplevelsen ved å legge til ekstra dybde til brukergrensesnittet. Med CSS-animasjoner og overganger kan du fortelle historier, skape overdådige effekter og gjøre brukerinteraksjon med nettstedet ditt mye effektivt og meningsfylt.

En animasjon er bare en simulering av bevegelse som skapes ved å vise en serie objekter som bilder etter hverandre. Overgang, på den annen side, er i utgangspunktet en prosess der et objekt endres fra en tilstand til en annen. Men når vi snakker om nettanimasjoner er det i hovedsak tre typer – CSS-animasjoner eller keyframe-animasjoner, CSS-overganger og JavaScript-animasjoner.

CSS-animasjoner

For å lage animasjoner i CSS må vi endre CSS-egenskapene til et element som et bilde eller en tekst, for en viss tidsperiode. Vi kan endre egenskapene til elementer så mange ganger vi vil, og kan også angi varigheten av animasjonen.

Spesifiserer @keyframes

CSS-animasjoner er definert bit med keyframes. Disse nøkkelbildene er de mellomliggende punktene i animasjonen. Alle CSS-animasjonene er spesifisert under @keyframes-regelen. Disse nøkkelbildene spesifiserer hva som skjer med elementet i et bestemt øyeblikk, dvs.

• hvilke egenskaper som endrer seg
• når elementet animerer
• hvordan elementet animerer

Du kan definere din egen nøkkelramme som:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Her spesifiserer ’til’ og ‘fra’ starten og slutten av animasjonen. Vi kan også spesifisere animasjoner for mellomliggende øyeblikk mellom start og slutt slik:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Her representerer 0 % starten på animasjonen, 100 % representerer slutten av animasjonen, og 50 % betyr endringen mellom starten og slutten. Men hvordan forteller vi nettleseren hvor lang tid animasjon skal finne sted? Vi gjør dette ved hjelp av visse animasjonsegenskaper. Disse animasjonsegenskapene er knyttet til elementet som skal animeres. For eksempel:

element_name
{
animation_property: value;
style_property: value;
}

Her kan elementet være en hvilken som helst HTML-tag som div, span, img, p osv. og style_propertyer en hvilken som helst CSS-stilegenskap som background_color, width, height osv. La oss nå se på noen animasjonsegenskaper i detaljer.

1. @keyframes: Keyframes brukes til å spesifisere animasjonskoden som diskutert ovenfor.
2. animasjonsnavn: Navnet spesifisert med @keyframes er navnet på animasjonen. Dette navnet brukes til å referere til nøkkelbildene med elementet som skal animeres.
3. animasjon-varighet: Den brukes til å spesifisere varigheten av animasjonen i sekunder eller millisekunder. For eksempel, hvis vi setter den til 5 sekunder, vil animasjonen bare kjøre i 5 sekunder. Hvis vi ikke angir denne egenskapen, vil ikke animasjonen kjøre i det hele tatt ettersom standardverdien er 0.
4. animation-delay: Vi kan utsette starten av animasjonen ved å spesifisere animasjonsforsinkelsestid. For eksempel, hvis du ønsker å starte animasjonen 5 sekunder etter at siden er lastet inn i nettleseren, setter du bare animasjonsforsinkelsen til 5s.
5. animation-direction: Vi kan fortelle nettleseren om en animasjon beveger seg i motsatt retning eller veksler med denne egenskapen. For eksempel, hvis du vil at animasjonen skal kjøre fra start til slutt, må du angi verdien for animasjon-varighet som "normal". Hvis du vil at den skal kjøre fra ende til start, er det bare å sette verdien til ‘revers’.
6. animation-fill-mode: Vi kan spesifisere stilen til elementet når animasjonen ikke spiller med denne modusen, dvs. når animasjonen er forsinket eller ferdig, hva skal stilen til elementet være.
7. animation-iteration-count: Antall ganger en animasjon kan spilles er representert av denne egenskapen. For eksempel, hvis du vil spille av animasjonen en gang, sett den til 1, eller hvis du vil at animasjonen skal spille for alltid, sett den bare til "uendelig".
8. animation-timing-function: Denne egenskapen brukes til å spesifisere hastighetskurven for animasjon som lineær, akselerasjon eller de-akselerasjon.
9. Animasjon: Det er stenografiegenskapen for å angi alle animasjonsegenskapene.

Du kan for eksempel animere et sprettobjekt med følgende kodebit. Legg merke til hvordan stenografinotasjon for animasjon har blitt brukt her.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Overganger

CSS-overganger brukes på egenskaper til elementer for en viss varighet av tid basert på visse tidsfunksjoner, også kalt lettelsesfunksjoner. Med tidsfunksjon, mener vi en funksjon som vil endre egenskapene til elementene fra en tilstand til en annen som lineær progresjon, akselerasjon eller de-akselerasjon. Du har kanskje lagt merke til at et bilde glir eller forvandles til et annet bilde ved å holde musepekeren eller en lyd spilles av ved museklikk. Dette er alle overgangseffekter som kan gjøre et nettsted interaktivt.

Forenklingsfunksjoner er viktige for å skape overganger. De spesifiserer hvordan egenskapene vil endre seg. De kan også endre hastigheten med hvilken verdien av eiendommer endres fra startpunktet til sluttpunktet for en overgang. Du kan bruke overganger på følgende måte:

element
{
style_property: value;
transition_property: value;
}

Her spesifiserer element HTML-elementet du vil transformere som div, H1, img osv. style_property er CSS-stilen som brukes på det elementet. La oss nå se på noen overgangsegenskaper :

• transition-property: Overgangseffekt vil alltid bli brukt på CSS-egenskapen til et element, for eksempel dets bredde, høyde, farge eller form. Verdien til dette attributtet spesifiserer CSS-egenskapen til elementet. Overgangseffekten vil starte når denne egenskapen endres, for eksempel ved musepeker eller ved klikk.
• transition-timing-function: Dette er letthetsfunksjonen som skal brukes på elementet. Denne egenskapen brukes til å spesifisere hastighetskurven for overgang som ease-in, ease-out, lineær etc.
• transition-duration: Det er akkurat som animasjon-varighet-egenskapen. Den brukes til å spesifisere varigheten av overgangseffekten i sekunder eller millisekunder. For eksempel, hvis vi setter den til 5 sekunder, vil overgangen påvirke vil fullføres på 5 sekunder. Hvis vi ikke angir denne egenskapen, vil det ikke være noen overgang i det hele tatt, da standardverdien er 0.
• transition-delay: Med denne egenskapen kan vi spesifisere varigheten for å forsinke overgangseffekten. For eksempel, hvis du vil starte effekten 5 sekunder etter musepekeren, setter du bare overgangsforsinkelse til 5 sekunder.
• overgang: Det er stenografiegenskapen for å sette alle overgangsegenskapene ovenfor sammen.

For eksempel vil følgende kode endre bredden på div-elementet ved musepeker. Se egenskapen for overgangsstenografi som er brukt her.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animasjoner vs. overganger

Likheter mellom animasjoner og overganger

• Både overgang og animasjon brukes til å visualisere endringer i egenskapene til et element.
• Vi kan spesifisere varigheten for hvor lenge overgangen og animasjonen skal foregå.
• Vi har visse tidsfunksjoner for å endre hastigheten på å gå fra en verdi til en annen for overganger så vel som animasjoner.

Forskjeller mellom animasjoner og overganger

• CSS-overganger er reaktive. De må utløses av brukerne. Animasjoner på den annen side kjører hver gang siden lastes inn i nettleseren. Det kreves ikke at de utløses.
• Overganger går en gang og stopper deretter. Deretter må vi utløse dem igjen og igjen mens animasjoner kan sløyfe. De kan starte på sitt eget stopp og så starte igjen.
• Nettleseren tar seg av overgangene selv. Vi trenger bare å spesifisere starten og slutten av overgangen. Vi kan stille inn overgangseffekten, men vi kan ikke endre endringshastigheten for en overgang i mellom. For eksempel, hvis et bilde sklir ved musepeker, vil vi bare se at det tones inn eller ut når vi holder musepekeren over det.
• Animasjoner, derimot, gir fleksibiliteten til å endre egenskapene mellom start og slutt. Dette skjer ved hjelp av keyframes. For eksempel kan vi sette fargen på et bilde til rød de første 5 sekundene, deretter som blå i de neste 5 sekundene, deretter som grønn i de neste 5 sekundene og gul i de siste 5 sekundene av animasjonen. Derfor har vi kontroll over animasjoner.

Leverandørprefikser

Alle CSS3-funksjonene støttes ikke av alle nettlesere. Derfor bruker vi prefikser langs disse CSS-egenskapene for spesifikke nettlesere som -webkit- (Safari), -moz- (Firefox) eller -o- (Opera). Dette lar nettlesermarkørene legge til støtte for den CSS3-funksjonen. Disse prefiksene er kjent som leverandørprefikser eller CSS-nettleserprefikser. Derfor må vi også sette leverandørprefikser sammen med animasjons- og overgangsegenskapene. Tenk for eksempel på koden nedenfor og se hvordan leverandørprefiksene for Safari har blitt brukt:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Tips! Du kan unngå dette maset ved å bruke biblioteker som -prefix-free. Det er et JavaScript-bibliotek som vil legge til gjeldende nettlesers prefiks til enhver CSS-kode. Sjekk ut mange slike biblioteker tilgjengelig på nettet.

Konklusjon

Nettstedutviklere kan bruke animasjoner og transformasjoner for å tiltrekke brukere til nettsidene dine. Du kan bruke dem til å forbedre skjemaer, varsler, bakgrunnsgrafikk, bilder, diagrammer, kruseduller, handlingsfremmende knapper og hva ikke. Bare bruk fantasien din, og du kan finne en måte å overraske brukerne dine på. Husk at selv en liten endring på nettstedet ditt kan få det til å se mye bedre ut og øke verdien. Så, har du brukt animasjoner over nettstedet ditt ennå? Del tankene dine om bruk av animasjoner og overganger.