Animacije na spletni strani lahko privabijo več uporabnikov. Vprašajte se - če bi videli spletno stran, ki ima precej animacije, ali ne bi želeli raziskati več? Zdaj, s prehodi CSS, lahko svoje delo oživite z nekaj odličnimi animacijami. In, pozor, to je treba storiti pravilno. Raziščimo svet prehodov CSS v naslednjem vrstnem redu:
- Zakaj CSS prehodi?
- Prehodna lastnina
- Kaj morate določiti?
- Lastnost funkcije Prehod-časovna funkcija
- Lastnost prehodnega zamika
Zakaj CSS prehodi?
Vzemimo primer. Če bi barvo elementa spremenili iz bele v modro, je ta sprememba skoraj takojšnja. Za bolj animiran učinek lahko spremenite postopoma. Tudi to izgleda precej vizualno privlačno. Z omogočanjem prehodov CSS lahko prilagodite način nastanka sprememb. Določite lahko, kako se spremembe v elementih pojavljajo v določenih časovnih intervalih, ki sledijo krivulji pospeška.
Prehodi CSS vam omogočajo, da določite spremembe za elementi, specifični časovni intervali, hitrost krivulje pospeševanja in še veliko več. Vse to lahko storite brez uporabe Flash ali JavaScript .
Za boljše razumevanje si lahko ogledate spodnjo sliko:
Na zgornji sliki se bo element HTML v nekaj sekundah spremenil iz rdeče v modro. Med prehodom boste videli tudi vmesno barvo. Če ne boste uporabljali prehodov CSS, boste opazili, da je sprememba barve iz rdeče v modro takojšnja - vmesne barve ne boste videli. Pri prehodih CSS boste opazili animirani učinek, ko se elementi HTML spremenijo iz starega v novega.
Prehodna lastnina
Lastnost okrajšave prehoda lahko uporabite za nadzor prehodov CSS. Uporaba te okrajšave ni le enostavna, temveč se lahko tudi izogne nesinhroniziranim parametrom, ki so lahko zelo moteči pri odpravljanju napak v CSS.
Lastnost prehoda določa lastnosti CSS, v katere želite učinek prehoda. Samo te lastnosti CSS so animirane.
Sintaksa:
prehod:
Kot začetnik se boste morda soočili s težavami pri uporabi stenografije. Če menite, da je uporaba stenografije trenutno za vas nekoliko zapletena, lahko lastnosti prehodov določite ločeno. Za element HTML lahko določite lastnosti prehoda eno za drugo, kot je prikazano v spodnjem primeru:
div {širina: 100px višina: 100px ozadje: lightblue prehod-lastnost: širina-trajanje prehoda: 2s prehod-časovna funkcija: linearni prehod-zakasnitev: 1s} div: hover {širina: 300px}Premaknite miškin kazalec nad polje
V zgornjem primeru smo ločeno določili lastnosti (lastnost prehoda, trajanje prehoda, funkcija prehoda-časa in zakasnitev prehoda) in njihove vrednosti. O teh prehodnih lastnostih bomo izvedeli kmalu.
Kaj morate določiti?
Za ustvarjanje prehodov CSS morate navesti predvsem dve stvari: lastnost CSS, ki želi dodati učinek, in časovno trajanje tega učinka.Upoštevati morate eno stvar - ko ne določite časovnega trajanja, bo prehod privzeto 0 , in ne bo nobenega učinka.
Oglejmo si primer:
Spodnja koda definira učinek prehoda lastnosti širine za pet sekund.
div {širina: 100px višina: 100px ozadje: modri prehod: širina 5s} div: hover {širina: 600px}Premaknite kazalec miške nad element div zgoraj, da vidite učinek prehoda.
V zgornji kodi boste videli, da ko miškin kazalec premaknete nad modro polje, modro polje postopoma poveča svojo širino za pet sekund. Opazili boste tudi, da ko odstranite kazalec iz modrega polja, se bo modro polje postopoma (ne takoj) vrnilo v prvotno velikost. Prav tako lahko spremenite vrednosti za širino in čas trajanja, da vidite, kako ta lastnost prehoda vpliva na element HTML.
Učinek prehoda lahko dodate tudi več kot eni lastnosti. To lahko storite z vejicami za ločevanje lastnosti. Oglejmo si primer:
V spodnji kodi je lastnost prehoda podana za širino, višino in preoblikovanje.
div {oblazinjenje: 15px širina: 150px višina: 100px ozadje: zeleni prehod: širina 2s, višina 2s, preoblikovanje 2s} div: lebdenje {širina: 300px višina: 200px preoblikovanje: zasuk (360deg)} Pozdravljen, svet (Premaknite miškin kazalec nad mene)
kako uporabljati tabelo javnosti
Z zgornjim primerom boste videli, kako se zeleno polje premika, ko premaknete miškin kazalec nad polje.
Določili smo samo lastnost in čas trajanja. Oglejmo si druge parametre z različnimi primeri.
Lastnost funkcije Prehod-časovna funkcija
Ta lastnost definira krivuljo hitrosti za učinek prehoda. Lahko ima naslednje vrednosti:
- Vrednost enostavnosti: To je privzeta vrednost, kjer je učinek na začetku počasen, nato hitrejši in se počasi konča.
- Linearna vrednost: Ta učinek ne spreminja hitrosti prehoda - ohranja hitrost konstantno od začetka do konca.
- Vrednost enostavnosti: Ta učinek se začne počasi.
- Vrednost sprostitve: Ta učinek se počasi konča.
- Vrednost enostavnega izstopa: Ta učinek ima počasen začetek in tudi počasen konec.
- Vrednost Cubic-Bezier (n, n, n, n): V funkciji cubic-bezier lahko določite svoj nabor vrednosti.
Spodnja koda prikazuje učinke prehoda za linearne, enostavne, enostavne in enostavne vrednosti.
div {širina: 100px višina: 100px ozadje: roza prehod: širina 2s} # div1 {prehodna-časovna funkcija: linearna} # div2 {prehodna-časovna-funkcija: enostavnost} # div3 {prehodna-časovna-funkcija: enostavnost } # div4 {prehodna-časovna-funkcija: enostavnost-out} # div5 {prehodna-časovna-funkcija: enostavna-izstopna} div: lebdenje {širina: 300px}Premaknite miškin kazalec nad spodnje elemente div
linearno
lahkotnost
enostavnost
sprostitev
enostavnost-out-out
Lastnost prehodnega zamika
Včasih želite, da se animacija pojavi po določenem času. Lastnost zakasnitve prehoda vam omogoča, da določite zakasnitev učinka prehoda. Zakasnitev lahko določite v sekundah.
Vzemimo primer, da vidimo zamudo pri učinku prehoda:
div {širina: 100px višina: 100px ozadje: rumeni prehod: širina 3s prehodna zakasnitev: 1s} div: hover {širina: 300px}Premaknite miškin kazalec nad spodnji element div
Opomba: Opazite lahko 1 sekundo zakasnitve pred začetkom učinka
V zgornji kodi boste, ko se s kazalko pomaknete nad rumeno polje, opazili (za eno sekundo), da ni učinka. Po čakanju ene sekunde boste opazili učinek.
S tem smo prišli do konca tega članka o prehodih CSS. Zdaj lahko na svoje spletne strani dodate animacije. Preizkusite te primere.
Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega projekta. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.
Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje bloga 'CSS Transition' in mi se vam bomo oglasili.