Overganger er en grunnleggende form for CSS-animasjon som du kan bruke til å lage vakre effekter.

Viktige takeaways

  • CSS-overganger endrer jevnt eiendomsverdier, legger til tilbakemelding og visuell appell til nettelementer, og forbedrer brukeropplevelsen.
  • Overgangsegenskaper som overgangsegenskap, overgangsvarighet, overgangstidsfunksjon og overgangsforsinkelse er nøkkelen til å kontrollere atferden og tidspunktet for overganger.
  • Nybegynnere bør starte med enkle overganger, forstå boksmodellen, planlegge overganger på forhånd, optimalisere for ytelse, vurdere tilgjengelighet og bruke Chromes utviklerverktøy for sømløs utvikling.

Å lage eksepsjonelle nettsteder krever en balanse mellom et tiltalende grensesnitt og engasjerende interaksjoner. Disse interaksjonene spiller en viktig rolle i å forme brukeropplevelsen. Som utvikler vil du ofte stole på ulike metoder for å oppnå dette. Blant dem skiller CSS-overganger seg ut som en av de enkleste måtene å skape enkle interaksjoner på en nettside.

instagram viewer

Du trenger en forståelse av CSS-overganger, egenskaper, beste fremgangsmåter og mer før du kan begynne å lage sømløse, interaktive nettsteder.

Forstå CSS-overganger

En CSS-overgang endrer jevnt en egenskapsverdi, fra en starttilstand til en siste, over en spesifisert varighet. Slike overganger gir tilbakemelding og visuell appell til webelementer, og kan forbedre brukeropplevelsen. Overganger er en av mange funksjoner du kan bruke for å gjøre et nettsted responsivt.

En overgang skjer som svar på en triggerhendelse, som å holde musepekeren over en knapp. For eksempel, når du holder musepekeren over en knapp, kan en CSS-overgang endre bakgrunnsfargen fra én tilstand (initial) til en annen (endelig). Denne overgangen skjer over varigheten du angir, og skaper en visuelt tiltalende effekt.

Overgangsegenskaper

Uavhengig av effekten du prøver å skape, må du forstå overgangsegenskapene som er tilgjengelige. Du kan bruke disse til å finjustere oppførselen til overgangene dine.

overgangs-eiendom

Denne egenskapen bestemmer hvilken CSS-egenskap (eller egenskaper) som skal gjennomgå overgangseffekten. Du kan liste flere egenskaper, atskilt med komma, for å overføre samtidig. Ta med et spesifikt egenskapsnavn for å få bare den egenskapen til å endres under overgangen. Eller bruk nøkkelordet alle å overføre alle CSS-egenskaper som støtter overgang.

Her er syntaksen:

transition-property: property1, property2, ...;

overgang-varighet

Denne egenskapen angir varigheten av overgangseffekten, og spesifiserer hvor lang tid animasjonen skal ta å fullføre. Spesifiser verdien ved å bruke sekunder (s) eller millisekunder (ms), som 0,5 s eller 300 ms. Dette er syntaksen:

transition-duration: time;

overgang-timing-funksjon

Denne egenskapen kontrollerer overgangens timing, og definerer animasjonens akselerasjon og retardasjon. Du kan bruke den i stylingen av elementer for å lage forskjellige lettelseseffekter. Her er noen verdier/tidsfunksjoner du kan prøve ut:

  • letthet: Sakte start, deretter rask og deretter sakte slutt (standard).
  • lineær: Konstant hastighet.
  • lette inn: Sakte start.
  • lette ut: Sakte slutt.
  • lette inn-ut: Sakte start og slutt.

Her er syntaksen:

transition-timing-function: timing-function;

overgangsforsinkelse

Denne egenskapen introduserer en forsinkelse før overgangen starter. Du kan angi verdien i sekunder (s) eller millisekunder (ms). Syntaksen er:

transition-delay: time;

Disse egenskapene styrer samlet hvordan overgangen oppfører seg, inkludert hvilke egenskaper som animerer og nøyaktig hvordan animasjonens timing oppfører seg.

Komme i gang med enkle overganger

Å forstå CSS-overgangsegenskapene er én ting, men hvordan fungerer de i praksis? Her er noen trinn du bør følge når du vil style et element ved hjelp av overganger.

1. Velg ditt HTML-element

Velg HTML-elementet du vil bruke en overgang til. Dette kan være en knapp, lenke, bilde eller et hvilket som helst annet element du vil legge til en interaktiv effekt på.

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

Denne markeringen vil gi deg en grunnleggende standardknapp for å begynne å jobbe med:

2. Identifiser eiendommen til overgang og definer den opprinnelige tilstanden

Bestem hvilken CSS-egenskap for det valgte elementet du vil animere og angi den opprinnelige stilen til elementet ved hjelp av CSS. Denne tilstanden representerer hvordan elementet vises når brukere ikke samhandler med det.

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

Knappen din vil nå ha noen stiler som du kan øve på overganger med:

3. Spesifiser Hover State

Lag en CSS-regel som gjelder når du holder markøren over elementet. Innenfor denne regelen endrer du CSS-egenskapen du identifiserte i det andre trinnet til dens endelige tilstand.

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. Bruk overgangsegenskaper

Bruke overgangs-eiendom, overgang-varighet, og overgang-timing-funksjon egenskaper for å spesifisere overgangsdetaljene.

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

Dette eksemplet viser hvordan du lager en enkel knapp med en bakgrunnsfargeovergang som kjører når pekeren svever over den. Bakgrunnsfargen går jevnt over fra blått til rødt i løpet av 0,5 sekunder med en lettelseseffekt. Du kan se hele effekten på dette GitHub demo.

Bruk disse trinnene som et grunnlag for å utforske mer komplekse overganger og animasjoner i nettutviklingsprosjektene dine. Prøv noen prosjekter der du kan tilpasse avmerkingsbokser og alternativknapper, lære å lage et enkelt trekkspill, og mer.

Beste praksis og tips for nybegynnere

Her er noen beste fremgangsmåter og tips for å hjelpe deg å begynne å jobbe med CSS-overganger.

  • Start med enkle overganger. Hvis du er ny til CSS-overganger, kan du begynne med enkle animasjoner som fargeendringer eller opasitetsjusteringer. Det vil hjelpe deg å forstå det grunnleggende før du takler mer komplekse overganger.
  • Forstå boksmodellen. Gjør deg kjent med CSS-boksmodellen, som inkluderer egenskaper som bredde, høyde, polstring og margin. Å forstå hvordan disse egenskapene fungerer er avgjørende når du animerer elementer.
  • Planlegg overgangene dine. Før du implementerer overganger, planlegg hva du ønsker å oppnå. Skisser overgangstilstandene, timingen og effektene på papir eller digitalt for å unngå unødvendig prøving og feiling.
  • Optimaliser for ytelse. Vær oppmerksom på ytelsen når du bruker overganger. Unngå overbruk av komplekse overganger, spesielt på mobile enheter, da de påvirker lastetider og brukeropplevelse.
  • Vurder tilgjengelighet. Sørg for at overgangene dine er tilgjengelige for alle brukere. Gi alternative måter å få tilgang til innhold eller funksjoner som er avhengige av overganger, spesielt for funksjonshemmede.
  • Bruk Chromes utviklerverktøy. Få mest mulig ut av Chromes utviklerverktøy for sømløs overgangsutvikling. Bruk DevTools til å inspisere og endre overgangsegenskaper i sanntid og eksperimentere med ulike tidsfunksjoner.

Ved å følge disse beste fremgangsmåtene og tipsene kan du bygge et solid grunnlag i arbeidet med CSS-overganger og gradvis utvikle ferdighetene dine for å skape engasjerende og interaktive nettopplevelser.

Cross-Browser-kompatibilitet

Kompatibilitet på tvers av nettlesere er en avgjørende faktor når du arbeider med CSS-overganger for å sikre at animasjonene og interaksjonene dine fungerer konsekvent på tvers av ulike nettlesere. Her er noen beste fremgangsmåter og tips for å oppnå kompatibilitet på tvers av nettlesere med CSS-overganger:

  • Bruk prefikser for leverandørspesifikke egenskaper. Ulike nettlesere kan kreve leverandørprefikser for spesifikke CSS-egenskaper. Det kan for eksempel hende du må bruke -webkit- for Safari og Chrome, -moz- for Firefox, og -o- for Opera. Inkluder alltid disse prefiksene når det er nødvendig for å dekke et bredt spekter av nettlesere.
  • Test på flere nettlesere. Test overgangene dine regelmessig i ulike nettlesere, inkludert Chrome, Firefox, Safari, Edge og Opera. Bruk nettleserutviklerverktøy for å identifisere og fikse problemer.
  • Inkluder reservestiler for egenskaper som animerer med overganger. I tilfelle overganger ikke støttes, vil disse stilene gjelde.

Ved å følge disse fremgangsmåtene kan du lage CSS-overganger som fungerer jevnt og konsekvent på tvers av ulike nettlesere.

Fortsett å øve med CSS-overganger

Hold deg oppdatert på de siste nettutviklingstrendene og beste fremgangsmåter i CSS-overganger. Eksperimenter gjerne med ulike overgangsegenskaper og verdier for å oppnå unike effekter. Læring involverer ofte prøving og feiling, så gjenta og juster overgangene dine over tid.