Mga Halimbawa ng CSS Animation

Ang mundo ng mga animation ay mas naroroon araw-araw, mayroong maraming mga programa na tumutulong sa amin na lumikha ng mga detalyadong edisyon ng video. Kung hindi mo pa alam ang CSS, dumating na ang oras para simulan mong maging pamilyar dito at tuklasin ang lahat ng maaaring gawin.

Ngunit dahil ayaw naming magdetalye, hatid namin sa iyo ang isang post na puno ng mga animation, marami sa kanila ang tumutupad sa isang partikular na function, ang iba ay idinisenyo lamang upang aliwin at pasayahin. Sa post na ito, ipinapakita namin sa iyo ang ilan sa mga pinakamahusay na animation ng CSS at bilang karagdagan, ipinapakita namin sa iyo ang iba pang mga programa ng interes kung saan maaari mong ipagpatuloy ang iyong paglalakbay bilang isang taga-disenyo o taga-disenyo ng animation.

CSS

Ang CSS ay tinukoy bilang a uri ng mapagkukunan na karaniwang malawakang ginagamit sa sektor ng disenyo ng web page. Iyon ay, ito ay isang serye ng mga code na idinisenyo upang matupad ang ilang mga function. Kung alam mo ang terminong HTML, tiyak na malalaman mo ang terminong CSS, dahil magkasabay ang mga ito at pareho silang dalawang pangunahing haligi sa paglikha at pagbuo ng maraming iba pang mapagkukunan ng internet.

Para mas maunawaan mo ito, mayroon nang mga idinisenyong template kung saan maaari mong simulan ang pag-edit ng mga ito at sa gayon ay lumikha ng iyong sariling web page. Ngunit kung ang gusto mo ay baguhin ang mga link address o ang link ng iyong page, kakailanganing gumamit ng ilang code na dapat malaman ng bawat programmer.

Mga pangkalahatang katangian

• Bagama't sa unang tingin ay tila pareho ang HTML at CSS, hindi. Sa HTML maaari mong i-redirect at ipamahagi ang impormasyong kailangan mo o gusto mula sa iyong web page. Sa kabilang banda, sa CSS, ang pinapayagan mo ay ang pagkakasunud-sunod ng bawat isa sa mga pahina na iyong idinisenyo. No pareho sila ngunit tulad ng nabanggit sa itaas, pareho ang dalawang pangunahing haligi sa pagbuo ng mga web page.
• Ang katangian ng CSS ay maaari itong magamit sa maraming mga browser, wala itong anumang itinatag na pattern, ngunit ang wika nito ay pangkalahatan at angkop din para sa lahat ng magagamit na mga aparato. Pinapadali nito ang gawain dahil walang uri ng extension ang kailangan, lalo na ang isang programmer.
• Gaya rin ng tinukoy, Ito ay isang mahusay na tool kung ano ang gusto mong idisenyo at sa ganitong paraan baguhin o baguhin ang anumang aspeto ng interface ng iyong web page. Ito ay nagmula sa parehong mga font at tono, iyon ay, Mayroon kang malawak na hanay ng mga posibilidad.
• Madali itong pangasiwaan at may mga pre-established na code para magsimula sa mundo ng pagbuo ng ganitong uri ng format, nangangailangan ng mga taon ng pagsasanay ngunit CSS Mayroon itong paunang base kung saan maaari kang lumikha ng iyong mga unang animation at pakiramdam tulad ng isang propesyonal na web page designer. Bilang karagdagan, ito ay isang sistema na bukas para sa lahat na gustong simulan ang pagbuo ng kanilang mga unang proyekto. Sa madaling salita, kung ang iyong hinahanap ay higit pa sa isang template o isang awtomatikong tagalikha ng web page, gamit ang CSS maaari mong simulan ang iyong pakikipagsapalaran.

mga halimbawa ng animation

Dodecahedron

Ang Dodecahedron ay isang animation na nilikha ng animator na si Wontem. Ang animation ay batay sa pagiging ganap na nilikha sa pamamagitan ng CSS kung saan ang disenyo ng umiikot na dodecahedron ay ipinapakita sa isang madilim na background na nagpapatibay sa ningning nito. Ang isa pang detalye na dapat isaalang-alang ay ang mga epekto na inilapat sa pigura.

Ang pinaka-nailalarawan sa animation na ito ay mayroon itong tiyak na tendensya na maging isang three-dimensional na disenyo, na mas kawili-wili. Ito ay walang alinlangan na isang mahusay na animation kung ang gusto mo ay ang 3D na mundo at paglalaro sa dami ng mga bagay.

animated goblin

Ang animation na ito ay pinamagatang animated na goblin at nilikha ng taga-disenyo na si Avaz Bokiev, walang duda na ito ay isang maliit na sequence kung saan ang isa sa mga bida sa panahon ng video game, si Mario Bros.

Isa itong istilo ng animation na kilala bilang stop-motion dahil tumutugtog ito nang may direksyong paggalaw sa pamamagitan ng maikling pagkakasunod-sunod. Walang alinlangan, ito ay isang star animation na nakakakuha ng lahat ng pagkilala kung ikaw ay isang manliligaw ng Mario Bros. Ito ay isa sa mga pinakamahusay na animation na ginawa sa CSS.

Photographic camera

Nagtatampok ang mahusay na animation na ito ng isang animated na photographic camera. Ito ay isang animation na nilikha ni Damiem Pereira at nagbibigay-daan sa camera na gayahin ang pagkuha ng isang imahe sa pamamagitan lamang ng pagpindot sa pindutan. Ito ay isang kawili-wiling animation kung gusto mo ang mundo ng photography at kailangan mo ng isang seksyon sa iyong web page na kasing animated ng isang ito.

Ang kawili-wiling bagay tungkol sa animation na ito ay maaari mong ilagay ang imahe na gusto mo at ipapakita ito ng camera kapag pinindot mo ang pindutan. Ito ay walang alinlangan na isa sa mga pinaka-creative na animation na idinisenyo sa CSS.

waterfall solar system

Ang animation na ito tungkol sa solar system ay ginawa ni Tady Walsh, kung saan nagpapakita ito ng maliit na modelo o simulation ng ating solar system. Ito ay isang mahusay na animation dahil makikita mo kung paano gumagalaw ang bawat isa sa mga planeta sa iba't ibang bilis. 

Ito ay isa sa mga pinaka-makatotohanan at pinakakahanga-hangang mga animation. Maaari mong makitang kawili-wili ito kung nagtatrabaho ka sa mundo ng astronomiya o isang tagahanga ng uniberso at mga planeta nito. Ito ay tiyak, ito ay isang animation na kumukuha ng premyo bilang isa sa pinakamahusay at nakakagulat.

animation ng star wars

Kung gusto mo ang Star Wars hindi mo makaligtaan ang animation na ito na ginawa ni Donovan Hutchinson. Ito ay walang duda na isang animation na may mga espesyal na epekto ng headline ng sikat na Star Wars saga. Ang nakakagulat na bagay tungkol sa animation na ito ay kung paano ito naglaro sa paggalaw ng iba't ibang mga font.

Walang alinlangan na isa ito sa mga star animation dahil isinasaalang-alang nito ang bawat isa sa mga kathang-isip na elemento na inaalok ng saga: mga galaxy, LED lights, madilim na background at kapansin-pansing mga font.

Bilang karagdagan, ang mga epekto ng paggalaw ay medyo matagumpay din at nakakakuha ng maraming atensyon mula sa manonood.

Mga application upang lumikha ng mga animation

Adobe Spark

Ang Adobe Spark ay isang tool na bahagi ng Adobe at responsable para sa paglikha ng mga kamangha-manghang animation at sa gayon ay gumawa ng walang katapusang animated at nakakatuwang mga video. Ang nakakakuha ng pansin ng tool na ito at walang alinlangang isang punto sa pabor nito ay magagamit ito para sa mga mobile device, tablet at computer. Gayundin, kung naghahanap ka upang lumikha ng kalidad ng nilalaman para sa iyong website, ito ay ang perpektong tool, dahil mayroon itong libu-libong mga pandekorasyon na template upang gawing isang kaakit-akit na lugar ang iyong espasyo upang bisitahin.

Animation Desk

Isa ito sa mga star application kung isa kang illustrator at hindi mo pa alam kung paano bibigyan ng buhay ang iyong mga drawing, salamat sa tool na ito, makakapagbigay ka ng twist sa iyong mga artistikong proyekto at gayundin, ikaw ay magiging magagawang gawin ang bawat isa sa iyong mga guhit doon mismo. Buweno, mayroon itong kumpletong pakete ng mga brush, mga lapis ng iba't ibang mga tip, isang medyo malawak na hanay ng mga kulay at mayroon ka ring pagpipilian na gawin ang iyong unang paunang mga sketch, ito ay walang alinlangan kung ano ang kailangan mo upang magsimula sa mundo ng animation sa pamamagitan ng sarili mong mga gawa. Subukan ito at huwag manatili sa pagnanais.

Synfig studio

Ang Synfig ay isa sa mga pinakamahusay na programa upang lumikha ng 2D animation. Isa ito sa mga pangunahing tool kung gusto mo ang mundo ng animation sa pinakadalisay na istilo ng Disney. Sa Synfig, mayroon ka ring malawak na hanay ng mga brush, filter at kahit na mga epekto na maaari mong ilapat sa iyong mga guhit.

Gayundin, kung ikaw ay isang tagahanga ng 2D hindi mo maaaring palampasin ang pagkakataong subukan ang ganitong uri ng programa, dahil nag-aalok sila ng posibilidad na magbigay ng paggalaw at buhay sa iyong mga guhit. Kung nakatrabaho mo na ang mga vectors dati, ang program na ito ay hindi magiging iba o kumplikado para sa iyo.

Premiere Pro

Ang Premiere Pro ay isa pa sa mga pangunahing tool sa Adobe package. Ito ay isa sa mga pinakaginagamit na programa ng mga propesyonal na video editor at ng maraming animation studio. Sa Premiere maaari kang lumikha ng iyong mga unang animation at madala sa maraming epekto na nilalaman nito.

Bilang karagdagan, kung ikaw ay isang baguhan sa sektor ng audiovisual, mayroon itong ilang maliliit na tutorial upang ipakilala sa iyo ang interface nito at hayaan kang madala ng iyong imahinasyon at ang iyong pinaka-creative na bahagi.

Ito ay magagamit para sa parehong Android at iOS. Ang tanging disbentaha ay hindi ito isang libreng application, nangangailangan ito ng isang maliit na gastos.

Konklusyon

Ang paggawa ng mga animation sa CSS ay napakasimple, ang kailangan mo lang gawin ay matuto at maging inspirasyon ng mga taong nasa sektor na ito nang maraming taon. Tulad ng nakita mo, mayroong maraming mga animation na umiiral, bilang karagdagan mayroong iba pang mga taga-disenyo na gumagamit ng higit na functional na mga mapagkukunan, tulad ng disenyo ng sikat na basura ng Windows sa anyo ng isang eroplano kung saan ito gumagalaw sa buong desktop at inaalis kung ano ang ay hindi mo gusto.

Sa madaling salita, maraming ideya at henyo ang na-disenyo, ngunit ngayon ay turn mo na upang simulan ang programming at pagbuo ng iyong mga unang animation gamit ang CSS.