Ang CSS ay isa sa pinakamakapangyarihang paraan upang gawing interactive ang webpage. Binabago nito ang hitsura at pakiramdam ng aming pangunahing Pahina ng web. Isa sa mga mahalaga at kapanapanabik na tampok na inaalok ng CSS ay pinapayagan kaming magsagawa ng mga animasyon. Pinapayagan kaming ilipat ang mga elemento sa loob ng aming pahina. Simulan natin ang aming Paglalakbay ng Mga Animasyon sa CSS sa sumusunod na pagkakasunud-sunod:
Mga animasyon sa CSS
Ang pagdaragdag ng mga animasyon sa aming website ay isang mahusay na paraan upang maakit ang pansin ng mga gumagamit. Hindi lamang ito nagdaragdag ng halaga sa aming pahina ngunit nagpapayaman din sa karanasan ng gumagamit. Ang animasyon sa CSS ay binuo sa dalawang bahagi. Sila ay
- Mga Keyframe
- Animasyon
Ang mga animasyon na CSS ay suportado sa lahat ng mga browser. Gayunpaman, ang ilang mas matandang mga browser tulad ng Safari (hanggang sa Bersyon 8.0) ay nangangailangan ng paunahan (-webkit-) upang bigyang kahulugan ang mga katangian ng animasyon. Halimbawa:
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% -webkit-animation-name: cssanim / * old browser * / -webkit-animasyon-animasyon: 5s / * old browser * / animasyon -name: cssanim animasyon-tagal: 5s} / * mga lumang browser * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {natitira: 300px}}Maaari naming gamitin ang sample na pahina ng html mula sa itaas at palitan ang CSS code sa style tag para sa pagsubok ng karagdagang mga halimbawa.
Mga keyframe sa CSS
Ito ang block ng mga animasyon sa CSS. Ginamit nito upang tukuyin ang mga tukoy na sandali at istilo ng animasyon sa aming webpage. Sa madaling salita, kapag tinukoy namin ang @keyframes sa loob ng aming CSS, nakakakuha ito ng kontrol upang baguhin ang kasalukuyang estado sa isang bagong estado o buhayin ang mga bagay sa isang tiyak na tagal.
Ang @keyframes ay kailangang magkaroon ng ilang mga pag-aari upang makontrol ang animation tulad ng pangalan ng animasyon, yugto, at pag-aari.
Pangalan - Ang isang pangalan ay kinakailangan upang maging para sa bawat animasyon upang ilarawan ang mga pag-uugali nito.
Mga yugto - Ang yugto ay kumakatawan sa pagkumpleto ng isang animasyon. Maaari itong gawin denoted alinman sa 'to' at 'mula' keyword o bilang isang porsyento, samantalang ang 0% ay kumakatawan sa simula ng estado at 100% ay kumakatawan sa pagtatapos ng estado ng isang animasyon. Ang pakinabang ng paggamit ng porsyento ng representasyon ay maaari naming tukuyin ang maraming mga intermediate na yugto sa pagitan ng ibig sabihin kung ano ang dapat na pag-uugali ng animasyon sa 50% yugto o 75% atbp.
Ari-arian - Ang mga pag-aari na ito ay nagbibigay sa amin ng kontrol sa @keyframes upang manipulahin ang mga ito sa panahon ng animasyon.
.anim {taas: 200px lapad: 200px background: posisyon ng lightblue: kamag-anak border-radius: 100% pangalan ng animasyon: tagal ng animasyon ng cssanim: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Ngayon dahil malinaw na namin ang tungkol sa pagtukoy ng mga keyframe. Ipaalam sa amin galugarin ang mga katangian ng animasyon, upang ilarawan kung paano i-animate ang aming mga elemento at object. Ang dalawang pag-aari alinsunod sa pagmamana at paunang maaaring magamit sa lahat ng mga uri ng animasyon. Ang mga katangiang ito ay karaniwang ginagamit kasama ang div tag upang maipakita ang iba't ibang mga pag-uugali.
paunang: Itinatakda ang pag-aari na ito sa default na halaga.
manain: Nagmamana ng pag-aari na ito mula sa elemento ng magulang.
Mga Katangian sa Animasyon
- pangalan ng animasyon
Tinutukoy nito ang pangalan ng animasyon, na ginagamit sa @keyframes upang manipulahin.Ang mga posibleng halaga ay:
- pangalan: Tinutukoy nito ang pangalan upang maiugnay sa keyframe para sa animasyon.
- wala: Ito ang default na halaga at maaaring magamit upang ma-override ang minana o cascading na mga animasyon.
Syntax:
pangalan ng animasyon: pangalan | wala | paunang | magmamana
kung paano isara ang isang programa sa java
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% animasyon-animasyon: tagal ng animasyon ng cssanim: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- tagal ng animasyon
Tinutukoy nito ang oras na kinakailangan para sa isang animasyon upang makumpleto ang isang pagpapatupad. Ito ay tinukoy sa mga segundo o milliseconds (hal., 4s o 400ms). Ang default na halaga ng pag-aari na ito ay 0, kaya kung ang pag-aaring ito ay hindi tinukoy sa gayon ang animasyon ay hindi magaganap.
Syntax:
tagal ng animasyon: oras
.anim {taas: 200px lapad: 200px background: asul na posisyon: kamag-anak border-radius: 100% animasyon-animasyon: tagal ng animasyon ng cssanim: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- pagkaantala ng animasyon
Pinapayagan kami ng pag-aari ng pagkaantala ng animation na tukuyin ang pagkaantala sa animasyon. Tinutukoy nito kung kailan magsisimula ang isang pagkakasunud-sunod ng animasyon.
Ang halaga ng pag-aari na ito ay maaaring ideklara sa alinman sa (mga) segundo o milliseconds (ms). Maaari itong maghawak ng parehong positibo at negatibong mga halaga. Ipinapahiwatig ng isang positibong halaga na ang animasyon ay magsisimula pagkatapos na maipasa ang tinukoy na oras at hanggang doon mananatili itong walang pagkakaisa. Sa kabilang banda, ang isang negatibong halaga ay agad na sisisimulan ang animasyon mula sa punto na para bang nagpapatupad na para sa isang tinukoy na time frame.
Syntax:
animasyon-pagkaantala: oras
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% animasyon-animasyon: cssanim animasyon-animasyon: 4s animasyon-pagkaantala: 4s} @keyframes cssanim {0% {left: 0px} 100% {kaliwa: 250px}}- Bilang-animasyon-animasyon
Ipinapahiwatig ng pag-aari na ito ang bilang ng beses na dapat i-play ang isang pagkakasunud-sunod ng animasyon. Ang default na halaga ng pag-aari na ito ay 1.Ang mga posibleng halaga ay:
- numero - nagsasaad ng bilang ng mga pag-ulit
- walang hanggan - Ipinapahiwatig na ang animation ay dapat ulitin magpakailanman
Syntax:
animation-iteration-count: numero | walang hanggan
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% animasyon-animasyon: tagal ng animasyon ng cssanim: 2s animasyon-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {kaliwa: 100px}}- direksyon-animasyon
Tinutukoy nito ang direksyon ng animasyon. Ang direksyon ng elemento ay maaaring itakda upang i-play ang pasulong, paatras o sa mga kahaliling cycle.Ang default na halaga ng pag-aari na ito ay normal, at nakakakuha ito ng mga pag-reset sa bawat cycle.Ang mga posibleng halaga ay:
normal - Ito ang default na pag-uugali at ang animasyon ay pinatugtog nang pasulong. Matapos ang bawat pag-ikot ang animasyon ay makakakuha ng paunang estado at muling nilalaro
baligtarin - Ang animation ay nilalaro sa pabalik na direksyon. Matapos ang bawat pag-ikot ang animation ay makakakuha ng sa estado ng pagtatapos at nilalaro nang paatras
kahalili - Ang direksyon ng animation ay baligtad ibig sabihin, nagpapatugtog muna ito at pagkatapos ay paatras sa bawat pag-ikot. Ang bawat kakaibang ikot ay nagbibigay ng pasulong na animasyon at bawat pantay na pag-ikot ay nagpaatras ng pabalik na paggalaw.
kahalili-baligtad - Ang direksyon ng animasyon ay nabaligtaran ng halili. Dito nilalaro nang paatras muna ang animas at pagkatapos ay pasulong sa bawat pag-ikot. Ang bawat kakaibang ikot ay gumagalaw ng pabalik o paatras at bawat pantay na pag-ikot ay nagbibigay ng pasulong na animasyon.
Syntax:
direksyon ng animasyon: normal | baligtarin |kahalili | kahalili-baligtad
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% animasyon-animasyon: tagal ng animasyon ng cssanim: 2s animasyon-iterasyon-bilang: walang katapusan} @keyframes cssanim {0% {left: 0px} 100% {kaliwa: 100px}}- pag-andar ng animasyon-oras
Tinutukoy ng pag-aari na ito ang bilis ng kurba o ang istilo ng paggalaw ng animasyon. Ito ay itinalaga upang gawin ang pagbabago sa estilo ng animasyon nang maayos mula sa isang form patungo sa isa pa. Kung walang naitalagang halaga ay nagde-default ito upang madali.Ang mga posibleng halaga para sa pag-andar ng animasyon-oras ay:
kadalian - Ito ang default na halaga ng pag-aari. Dito nagsisimulang mabagal ang animasyon, unti-unting nagiging mabilis sa gitna at pagkatapos ay dahan-dahang nagtatapos nang dahan-dahan.
guhit-guhit - Ang animasidad ay nagpapanatili ng parehong bilis sa buong ikot ikot mula simula hanggang dulo.
madali-in - Ang animasyon ay dahan-dahang nagsisimula.
madali-out - Ang animation ay dahan-dahang natapos.
madali-sa-labas - Ang animation ay gumagalaw nang dahan-dahan pareho sa pagsisimula at pagtatapos.
cubic-bezier (n, n, n, n) - Hayaan sa amin ang advanced na tampok na ito na lumikha ng isang pasadyang pagpapaandar ng tiyempo sa pamamagitan ng pagtukoy sa aming sariling mga halaga. Ang posibleng halaga ay mula sa 0 hanggang 1.
Syntax:
animation-timing-function: linear | kadalian | kadalian | kadalian-in | kadalian-sa-labas |cubic-bezier (n, n, n, n)
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% animasyon-pangalan: cssanim animasyon-animasyon: direksyon ng anim na direksyon: baligtarin} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: dilaw na kaliwa: 200px itaas: 200px} 100% {background: asul na kaliwa: 100px}}- animation-fill-mode
Ito ay isang espesyal na pag-aari dahil tinutukoy nito ang istilo ng animasyon bago o pagkatapos i-play ang animasyon.Bilang default, ang istilo ng elemento ay hindi maaapektuhan ng animasyon bago ang simula o matapos ito. Kapaki-pakinabang ang pag-aari na ito dahil nakakatulong ito sa pag-override sa default na pag-uugaling ito ng animasyon.Ang mga sumusunod ay mga posibleng halaga para sa pag-aari ng animation-fill-mode:
wala - Ito ang default na halaga ng pag-aari halimbawa ang mga istilo ng animasyon ay hindi inilalapat sa elemento, bago o pagkatapos ng animasyon.
pasulong - Ang mga estilo ay pinapanatili ng elemento sa panghuling pagkakasunud-sunod ng animation ibig sabihin matapos ang animasyon ay natapos.
paurong - Ang mga estilo ay pinapanatili ng elemento sa paunang pagkakasunud-sunod ng animation ibig sabihin bago ang animation ay tinititigan lalo na sa pagkaantala ng animasyon.
pareho - Ito ay nagpapahiwatig na ang animasyon ay susundan sa parehong direksyon ibig sabihin pasulong at paatras
Syntax:
animation-fill-mode: wala | pasulong | paatras | pareho
.anim {lapad: 50px taas: 50px background: lightblue na kulay: puting font-weight: naka-bold na posisyon: kamag-anak na pangalan ng animasyon: cssanim na tagal ng animasyon: 5s animasyon-iterasyon-bilang: walang hanggan border-radius: 100%} # anim1 { animasyon-oras-pag-andar: madali} # anim2 {animation-timing-function: linear} # anim3 {animasyon-oras-pag-andar: madali-sa} # anim4 {animasyon-oras-pag-andar: madali-out} # anim5 {animasyon- pag-andar ng oras: madali-sa-labas} @keyframes cssanim {mula sa {kaliwa: 0px} hanggang {kaliwa: 400px}}- state-play-state
Tinutukoy ng pag-aari na ito ang isang animasyon na maaaring nasa paglalaro o naka-pause na estado. Gayundin, kapag ipinagpatuloy ang isang animasyon mula sa pag-pause nagsisimula ito mula sa kung saan ito umalis.Ang mga posibleng halaga ay:
- naglalaro - Upang mai-render ang animation sa pagpapatakbo
- naka-pause - Upang mai-render ang animasyon sa estado ng pag-pause.
Syntax:
animation-play-state: naka-pause | naglalaro
.anim {lapad: 100px taas: 100px background: lightblue na posisyon: kamag-anak na animasyon-animasyon: tagal ng animasyon ng cssanim: tagal ng 3-animasyon: 2-animasyon-punan ang mode: paurong na border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animasyon
Ito ay kilala bilang ang anim na maikling katangian ng pag-aari. Ginagamit ito para sa mas malinis na code. Kapag nasanay na tayo sa lahat ng mga pag-aari ng animasyon, pinapayuhan na gamitin namin ang animasyon na maikli para sa pag-coding nang mas mabilis at pagtukoy sa lahat ng mga pag-aari sa isang linya.
Syntax:
animasyon: [pangalan ng animasyon] | [tagal ng animasyon] | [animation-timing-function] |[pagkaantala ng animasyon] | [animation-iteration-count] | [direksyon ng animasyon] |[animation-fill-mode] | [animasyon-play-estado]
Ang lahat ng mga epekto ng animation na ipinakita namin sa itaas gamit ang iba't ibang mga katangian ng animasyon ay maaaring makamit sa pamamagitan ng paggamit ng maikling salitaanimasyon pag-aari
.anim {taas: 200px lapad: 200px background: lightblue na posisyon: kamag-anak border-radius: 100% animasyon-pangalan: cssanim animasyon-tagal: direksyon ng animasyon na anim: normal na animasyon-play-estado: naka-pause} @keyframes cssanim {0% {background: orange sa itaas: 0px} 50% {background: dilaw na kaliwa: 200px itaas: 200px} 100% {background: asul na kaliwa: 100px}}Tinatapos nito ang lahat ng mga katangian ng animasyon na maaaring magamit sa CSS. Dapat naming subukan ang iba't ibang mga pagkakaiba-iba ng mga pag-aari na ito upang makakuha ng isang mas malinaw na larawan. Kapag naging komportable kami, ang animation na maikli ang pag-aari ay maaaring maging malaking tulong upang magsulat ng mas malinis at mas mabilis na code. Ito ang isa sa mahahalagang kasanayan upang malaman sa CSS para sa mga web developer. Dahil may posibilidad kaming mag-focus nang higit pa sa paglipat ng mga bagay sa halip na mga static na mga, ang mga animasyon ay maaaring makatulong sa amin na makamit iyon at bumuo din ng mahusay na kapansin-pansin na mga webpage.
Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na 'Mga Animasyon sa CSS' at babalikan ka namin.