Mga animation ng CSS

Mayroong maraming mga programa kung saan maaari kang mag-edit, lumikha ng mga montage o kahit na lumikha mga animation, sa bawat oras na mayroong maraming mga software na nagdaragdag ng ganitong uri ng mga interactive na proyekto. Sa post na ito hindi lang namin ipapakilala sa iyo ang mundo ng mga animation, ngunit ipapakilala ka rin namin sa isang bagong kaibigan.

Tulad ng alam mo na, ang mundo ng computing ay puno ng mga utos at kapaki-pakinabang na tool para sa pagbuo ng mga web page o online media, na kasalukuyang magkakasamang nabubuhay. Manatili sa amin at tuklasin sa bagong tutorial na ito ang isa pang paraan upang mapataas ang iyong antas sa computing at interaktibidad.

Ano ang mga animation?

Nais naming ganap mong ipasok ang tutorial, ngunit para dito, kinakailangan na pumasok sa mundo ng mga animation o kung ano ang pag-aalala sa graphic na disenyo, ang mundo ng interactive na disenyo. 

Ang mga animation ay bahagi din ng audiovisual na mundo, sa katunayan sila ay wala kung o dahil sa kanila, isang audio at isang gumagalaw na imahe ay ipinakilala. Para sa kadahilanang ito, kapag nagsasalita tayo ng "animation", tinutukoy natin ang mas kilala bilang "mga cartoon."

Bilang summarized sa itaas, ang animation ay nagmumula sa kakayahang magbigay ng paggalaw sa isang bagay, sa kasong ito ay mga cartoons. Ngunit paano nakamit ang lahat ng mga paggalaw na ito? pagkakasunud-sunod ng mga guhit o litrato na sa pamamagitan ng sunud-sunod na pag-utos, isa-isa, nagagawa nilang makabuo ng isang mapagkakatiwalaang kilusan sa harap ng ating mga mata, na nagpapahiram sa kanilang sarili at pumasok sa laro ng visual illusion.

Dati, ang mga unang animation ay idinisenyo sa mga sheet ng papel, sa bawat isa sa kanila, ang animated na karakter ay iginuhit na gumagawa ng mga hakbang, at sa sandaling ang dulo ng sheet ay naabot, ito ay naipasa nang paisa-isa upang makamit ang epekto ng paggalaw sa pagguhit.

Mga uri ng animation

Mayroong iba't ibang uri ng animation:

Cartoon o Tradisyunal na Animasyon

Ang istilong ito ay binubuo ng pagbibigay ng paggalaw sa pangunahing tauhan sa bawat frame. Sa simula, kapag walang sapat na audiovisual na paraan, isinagawa ang mga ito sa pamamagitan ng pagguhit at pagpipinta ng bawat frame (kabilang ang background, entablado o background ng animation), upang mai-film sa ibang pagkakataon sa kilala natin bilang isang film tape.

Itigil ang Paggalaw

Ang Stop Motion ay isang animation technique na walang kinalaman sa mga cartoons. Higit pa rito, ang pangunahing layunin nito ay upang gayahin ang mga paggalaw ng mga bagay na sa katotohanan ay ganap na static at ito ay nahahati sa dalawang yugto: animation ng clay o claymotion at animation ng mga matibay na bagay.

Pixelation

Ang Pixelation ay isang diskarteng nagmula sa Stop Motion at binubuo ng pagtatrabaho sa mga bagay na hindi mga manika o mga modelo, ngunit karaniwang mga bagay o tao. Ang mga bagay ay kinukunan ng larawan nang maraming beses at bahagyang lumilipat sa bawat frame.

Rotoscopy

Binubuo ito ng direktang pagguhit ng isa pang guhit, tulad ng pagsubaybay ng isang guhit sa isa pang guhit o ng isang tunay na tao. Itinuturing itong precursor sa mocap, iyon ay, sa motion capture na ginagamit upang muling likhain ang mga digital na character sa mundo ng sinehan.

Animation sa pamamagitan ng Cutouts o Cut out Animation

Ito ay isang pamamaraan na binubuo ng pagputol ng mga figure, ang mga figure na ito ay maaaring kinakatawan sa papel o sa mga litrato. Ang katawan ng mga character ay binuo batay sa mga ginupit at paggalaw at animation na lumabas mula sa isang kapalit ng nasabing mga cutout.

3d animation

Ang 3D animation ay nagmula sa isang editor program, na nagbibigay-daan sa mga simulation at animation na maisagawa. Sa loob ng dalawang variant na ito, nagkakaroon ng contact ang magandang liwanag, paggalaw ng camera at mga special effect.

Sa kasalukuyan ay mayroon ding iba pang mga pamamaraan tulad ng: ang pagpipinta sa salamin, ang animation ng buhangin, ang screen ng gujas at ang pagpipinta sa celluloid. 

Ano ang CSS?

Ngayong alam mo na ang kaunti pa tungkol sa mundo ng mga animation, oras na para ipakilala namin sa iyo ang mundo ng mga acronym ng CSS.

Acronym CSS, sumangguni sa "cascading style sheets". Binubuo ito ng isang wika na ginagamit sa sektor ng disenyo at sa pagtatanghal ng mga web page, mas mabuti pa, ang mga ito ay isang serye ng mga tool at utos na namamahala sa pagpapakita ng isang web page tulad ng nakikita natin sa unang pagkakataon. ito ay nalikha na. Gumagana kasama ang tool HTML (nakaayos mula sa batayang nilalaman ng mga pahina).

Natutukoy ang pangalan nito sa bilang ng mga dahon na nilalaman nito at ang isa sa mga ito ay nagmamana ng mga katangian o katangian mula sa iba. Iyon ay, maaari kang magtrabaho sa isang simpleng template ng blog, ngunit kapag gusto mong i-customize ang hitsura ng isang site kakailanganin mong ipatupad ang CSS na kasama ng isang mahusay na CMS ay makakatulong sa iyo na mapahusay ang abot ng iyong nilalaman.

Para saan ang CSS?

Sa CSS, maaari mong ayusin ang iyong pahina, iyon ay, maaari mong sabihin sa iyong web page kung paano mo gustong hanapin ang lahat ng impormasyon upang ang tumitingin ay madaling hawakan at kapaki-pakinabang sa parehong oras. Dito ilagay ang lahat ng utos ng ilang elemento na bahagi ng istilo o disenyo ng web page, halimbawa, ang mga font, kulay, sukat atbp. 

Karaniwan, para mas maunawaan mo kung tungkol saan ang tool na ito, ang mga digital marketing specialist ang unang nakakaunawa tungkol dito dahil sila ang humahawak sa kanila.

Pagalawin sa CSS

Well, ngayon na alam mo na ang kaunti tungkol sa mundo ng mga animation at CSS. Oras na para simulan ang tutorial.

Hinahayaan ka ng mga animation ng CSS na i-animate ang paglipat sa pagitan ng isang istilo ng CSS at isa pa. Ang mga animation na ito ay binubuo ng dalawang bahagi: a istilo na naglalarawan ng CSS animation at isang set ng mga frame na nagpapahiwatig ng pasimula at panghuling estado nito, pati na rin ang posibleng mga intermediate na punto dito.

Ang bawat isa sa mga animation na ito ay may isang serye ng mga pakinabang:

• Napakadali ng paggamit nito para sa mga simpleng animation, magagawa mo ito kahit na walang kaalaman sa Javascript.
• Nagpapakita nang tama ang animation, kahit na sa mga computer na mababa ang kapangyarihan.
• Ang pagiging kontrolado ng isang browser, nagbibigay-daan ito sa pag-optimize ng pagganap at kahusayan nito, kaya binabawasan ang dalas at pagsasagawa ng mga tab sa paraang hindi nakikita ang mga ito.

Mga setting ng animation

Upang magsimula ng isang animation, una sa lahat ay kailangan nating i-configure ito. Para magawa ito, pupunta tayo sa property animasyon at ang mga sub - properties nito. Ang tool na ito ay magbibigay-daan sa amin upang i-configure ang parehong ritmo at ang tagal ng animation at hindi kahit ang pagkakasunod-sunod nito.

Ang mga sub-properties ay:

animation - pagkaantala

Oras ng pagkaantala sa pagitan ng sandaling na-load ang elemento at simula ng pagkakasunud-sunod ng animation.

animation - direksyon

Isinasaad kung dapat bang bumalik ang animation sa panimulang frame sa dulo ng pagkakasunud-sunod o kung dapat itong magsimula sa simula kapag umabot na sa dulo.

animation - tagal

Isinasaad ang dami ng oras na inaabot ng animation upang makumpleto ang cycle nito (ang tagal)

animation - pag-ulit - bilang

Ang dami ng beses na inuulit. Maaari naming ipahiwatig walang katapusan upang ulitin ang animation nang walang katiyakan.

animation - pangalan

Ito ay ginagamit upang tukuyin ang pangalan na naglalarawan sa bawat isa sa mga frame ng animation.

animation - play - estado

Binibigyang-daan kang magawang i-pause at ipagpatuloy ang pagkakasunud-sunod ng animation.

animation - timing- function

Ipinapahiwatig nito ang ritmo ng animation, iyon ay, kung paano ipinapakita ang mga frame ng animation, para dito, itinatag ang mga acceleration curve.

animation - fill - mode

Tinutukoy kung anong mga halaga ang magkakaroon ng mga katangian pagkatapos ng animation.

I-set up ang pagkakasunod-sunod gamit ang mga frame

Kapag na-configure na namin ang oras, ang nomenclature atbp. Oras na para mag-alok ng hitsura o pakiramdam sa aming animation.

Upang gawin ito, magtatatag kami ng dalawang bagong frame at gagamitin ang panuntunan @keyframes. Sa pamamagitan nito, inilalarawan ng bawat frame kung paano matatagpuan ang bawat elemento sa sequence ng animation.

Upang ipahiwatig ang oras at ritmo, ginagamit ng frame bahagdan at mula at hanggangDahil dito, maaari naming ipahiwatig kung kailan naganap ang simula na may 0% at ang pagtatapos ay may 100%.

Frame at text animation

Upang magdagdag ng higit pang mga frame at i-animate ang mga ito gamit ang text, kailangan mong maglapat ng mas malaking laki ng font para sa header upang tumaas ang header habang gumagalaw ito para sa isang nakatakdang tagal ng oras, at pagkatapos ay bumaba sa orihinal nitong laki pagkatapos. Para dito, itatatag namin ang sumusunod na code:

75% font - laki: 300%; margin - kaliwa: 25%; lapad: 150%;

Gamit ang code na ito, iminumungkahi namin sa browser na sa 75% ng sequence, ang header ay may kaliwang margin na 25% at isang sukat na 200% na may lapad na 150%.

Ulitin ang animation

Upang maulit ang animation, kailangang gamitin ang sumusunod na property animation - pag-ulit - bilang at dapat nating ipahiwatig kung ilang beses natin gustong maulit ito. Magagamit din natin walang katapusan para laging paulit-ulit.

Konklusyon

Tulad ng nakita mo, sa CSS maaari kang lumikha ng mga animated na proyekto at maaari mong ipasok ito sa pamamagitan ng pagsunod sa mga hakbang na ibinigay namin sa iyo. Kung patuloy kang magtatanong at ipaalam sa iyong sarili, matutuklasan mo na maraming mga opsyon na magagamit sa amin.

Naglakas-loob ka na ba?