Hvernig á að nota CSS3 Transitions

Allir elska hreyfingu. Að bæta fjórða vídd (tíma) við síðuhönnun er aðal leiðin að skjár-undirstaða hönnun stendur út úr prenthönnun. CSS Transitions eru einföld aðferð til að hreyfa eiginleika frumefni sem gerir þér kleift að auðga ákveðna atburði í vefhönnun þinni, án þess að þurfa Flash eða JavaScript.

W3C lýsir viðeigandi yfirfærslum á vefsíðunni sem "CSS Transitions gerir eignarbreytingum á CSS-gildum kleift að eiga sér stað slétt á tilteknu tímabili". Með öðrum orðum, CSS umbreytingar leyfa okkur að breyta eignum stigvaxandi, skapa tilfinningu um hreyfingu og imbuing hönnun með subtlety og tilfinningar sem ekki er hægt með fljótur breytingu.

Vefur stuðningur

Allir nútíma vafrar (já jafnvel IE!) Styðja nú CSS umbreytingar. Hins vegar skiptir miklu máli, ef umbreytingar eru ekki studdir í vafranum sem notaður er, þá er yfirsýnin hunsuð og eignarbreytingin verður beitt þegar í stað. Þessi tignarlega niðurbrot er hornsteinn bestu starfsvenja.

Til þess að lengja úrval af stuðningi við vafra getum við notað seljandaforskeyti, þetta nær til þess að fela í sér Firefox 4-15, Opera 10.5-12 og flestar útgáfur af Chrome og Safari. Kóðinn, þ.mt seljanda forskeyti valmyndir lítur svona út:

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

Eignin sem ekki er fyrirfram er bætt við neðst á staflinum til að tryggja að endanlegri implemantation muni trompa öllum öðrum, þar sem eignin færist frá drög að lokinni stöðu.

Breytingar breytur

Það eru fjórir breytur fyrir CSS umbreytingar:

• Umskiptareign: eignin sem á að tweened eða leitarorðið "allt" á við um allar eignir;
• breytingartímabil: Lengd umskipti;
• Umskipti-tímasetning-virka: slökunin á að beita, þetta skapar meira náttúrulegt útlit hreyfingu
• Transtion-seinkun: tilgreinir seinkun á upphaf breytinganna.

Að auki getur þú líka notað shorthand eignina (eins og í dæminu hér að ofan) þar sem breytur eru tilgreindir sem eign, lengd, tímasetning virka, tefja.

Eiginleikar sem hægt er að skipta um

Þú getur aðeins skipt yfir eiginleikum sem hægt er að þýða í stærðfræðileg gildi. Svo til dæmis, þú getur umskipti leturstærð; Þú getur ekki skipt um leturlitið.

Fullur listi yfir eignir sem nú er hægt að skipta um er eftirfarandi:

bakgrunnsstilling, landamærisbundin-litur, landamæri-botnbreiddur, landamærin-vinstri-litur, landamærin-vinstri-breidd, landamærin-hægri-litur, landamæri-hægri breidd, landamæri, hámark, breidd, breidd, framlegð-botn, framlegð-vinstri, framlegð-hægri, framlegð, hámarkshæð, hámarkshæð, breidd, lágmarkshæð, lágmarkshæð, ógagnsæi, útlínurit, útlínurit, breiddar-botn, padding-vinstri, padding-hægri, padding-toppur, hægri, textaritun, textaskuggi, samræma, breidd, orðaforða, z-vísitölu.

Notkun umbreytinga

Yfirlýsing yfirlýsingar fylgja eðlilegu ástandi frumefnisins. Því lýsti aðeins einu sinni fyrir nokkrum ríkjum, svo sem: áherslur,: virkir og gervitunglar.

Með því að nota eftirfarandi kóða getum við sett upp grunnvalmynd og textaritgerð. Það er sniðið þannig að valmyndin breyti lit og bakgrunnslit þegar hún er runnin yfir og þannig að innsláttarlínan breytir undirstöðu lit sinni frá hvítu til grænu þegar sveiflast yfir:

Business
  Kóði 
  Hönnun 
  Innblástur 
  Ýmislegt 
  Mobile 
  Fréttir 
  Resources 
  Nothæfi 
  Heiltu stillt er á ante inline link   Venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Hefðbundin stilling er fyrirfram aðgengileg fyrir alla.  Þú ert sem stendur ekki búin / nn að innskrá þig. Þú ert ekki innskráð / ur. 

Hér er hvernig það lítur út:

Notarðu CSS3 Transitions? Hvaða áhrif hefur þú getað búið til? Láttu okkur vita í athugasemdunum.

Valin mynd / smámyndir, hreyfimyndir um Shutterstock.