Slik bruker du CSS3-overganger

Alle elsker bevegelse. Å legge til den fjerde dimensjonen (tid) til et webdesign er hovedveien på skjermbasert design som skiller seg ut fra utskriftsdesign. CSS Overganger er en enkel metode for å animere egenskaper til et element som gjør at du kan berikke bestemte hendelser i ditt webdesign uten behov for Flash eller JavaScript.

W3C beskriver passende overganger på deres nettside som "CSS Transitions gjør at eiendomsendringer i CSS-verdier kan forekomme jevnt over en spesifisert varighet". Med andre ord gir CSS-overganger oss mulighet til å endre en eiendom inkrementalt, skape en følelse av bevegelse og imbuber design med subtilitet og følelser som ikke er mulig med en rask forandring.

Nettleserstøtte

Alle moderne nettlesere (ja selv IE!) Støtter nå CSS-overganger. Men viktigst, hvis overganger ikke støttes i nettleseren som brukes, ignoreres overgangen, og egenskapene endres vil bli brukt umiddelbart. Denne grasiøse nedbrytningen er en hjørnestein i beste praksis.

For å utvide omfanget av nettleserstøtte kan vi bruke leverandørprefikser, dette utvider funksjonen til å omfatte Firefox 4-15, Opera 10.5-12 og de fleste versjoner av Chrome og Safari. Koden, inkludert leverandørprefiksalternativer, ser slik ut:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Den ikke-forhåndsdefinerte eiendommen legges til bunnen av stakken for å sikre at endelig implantering vil trompe alle de andre, da eiendommen beveger seg fra utkast til ferdig status.

Overgangsparametere

Det er fire parametre for CSS-overganger:

• overgangseiendom: egenskapen som skal tweened, eller søkeordet "alle" skal gjelde for alle eiendommer;
• overgangsperiode: varigheten av overgangen;
• Overgangs-timing-funksjon: lettelsen som skal brukes, dette skaper mer naturlig utseende bevegelse
• transtion-forsinkelse: angir en forsinkelse til begynnelsen av overgangen.

I tillegg kan du også bruke shorthandegenskapen (som i eksempelet ovenfor) der parametrene er spesifisert som egenskap, varighet, tidsfunksjon, forsinkelse.

Egenskaper som kan overføres

Du kan bare overgangseiendommer som kan oversettes til en matematisk verdi. Så for eksempel kan du overføre skriftstørrelse; Du kan ikke skifte font-face.

Den komplette listen over eiendommer som for tiden kan overføres er som følger:

Bakgrunnsposisjon, kantbunnfarge, kantlinjebredde, kantlinje-venstre-farge, kantlinje-venstre bredde, kantlinje-høyre-farge, kantlinje-høyre bredde, kantlinjeavstand, kantlinjefarge, border-top-bredde, bunn, klipp, farge, skriftstørrelse, font-vekt, høyde, venstre, letteravstand, margin-bunn, margin-venstre, margin-høyre, margin-topp, maksimal høyde, bredde, min-høyde, min bredde, opasitet, konturfarge, kontur-bredde, polstring-bunn, polstring-venstre, polstring-høyre, polstringstopp, høyre, tekstinntrykk, tekstskygge, topp, vertikal- justere, bredde, ordavstand, z-indeks.

Bruk av overganger

Overgangsdeklarasjoner er knyttet til elementets normale tilstand. Derfor erklæres kun en gang for flere stater som: fokus,: aktiv og pseudoklasser.

Ved hjelp av følgende kode kan vi sette opp en grunnleggende meny og et stykke tekst. Den er utformet slik at menyelementene endrer farge og bakgrunnsfarge når de rulles over, og slik at inline-lenken endrer underskriftsfarge fra hvitt til grønt når det svinger over:

Business
  Kode 
  Design 
  Inspirasjon 
  Diverse 
  Mobil 
  Nyheter 
  ressurser 
  Usability 
  Helt helhetlig er det en ante inline link   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Helt helhetlig er det en god måte å oppnå alt du trenger.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Slik ser det ut:

Bruker du CSS3-overganger? Hvilke effekter har du opprettet? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, bevegelsesbilde via Shutterstock.