Paano Gumawa ng Magandang Paggamit ng Mga Animasyong CSS3: Tutorial, Sample Code, at Mga Halimbawa

Kapag ginagamit namin ang JS at jQuery mayroon kaming ganap na kontrol sa mga animation at maaari kaming lumikha ng ilang mga kahanga-hangang epekto, ngunit ang presyo ay lubos na mataas. Ang oras ng pagproseso, ang pagiging tugma ng cross-browser (mga mobile device, halimbawa, ay naiiba kapag dumating sa JS) at ang pagiging kumplikado ng code mismo ay mga puntos na dapat nating tandaan habang lumilikha ng mga animated na interface.

Kaya, ngayon makikita natin kung paano maiwasan ang JS sa pamamagitan ng paggamit ng CSS Animations at Transitions. Tatalakayin namin mula sa mga pangunahing hakbang sa ilang mga kahanga-hangang epekto, tulad ng mga panel ng akurdyon at animated na mga sub-menu.

Kumuha ng isang upuan, notepad at isang tunay na browser (kahit ano kundi IE) at magsimula.

Nagpapainit

Kami ay may kaunting mga pakinabang (at mga disadvantages bilang lahat sa aming buhay) sa paggamit ng mga animation ng CSS. Kung kailangan mong ibenta ang iyong mga boss o kliyente, ito ang dapat mong tandaan:

  • Ang mga ito ay potensyal na mas mabilis, dahil maaari silang gumamit ng pagpabilis ng hardware (tulad ng pagpapatupad ng HTML5)
  • Magagawa sila ng mas mahusay sa mga mobile device at hindi na kailangan ng tukoy na code upang masubaybayan ang mga kaganapan ng ugnay
  • Ang JS ay kailangang bigyang kahulugan ng browser at mas malaki ang mga posibilidad na masira ang browser. Kaya’t kapag nabigo ang CSS, nabigo ito nang tahimik habang masisira ni JS ang buong pahina
  • Mayroon silang lubos na magandang suporta sa browser (tutulungan ka ng site na ito na suriin ang mga tukoy na istatistika sa: http://caniuse.com/#search)

Mga halimbawa ng Mga Animasyong CSS3

Bago natin masimulan ang karne ng post na ito, tingnan natin ang ilang magagandang animasyon na ginawa sa purong CSS.

Puro CSS Twitter Fail Bigo

Animated Nabigo na Whale

 Ginawa ni Steven Dennis, tingnan ito sa pagkilos.

Pwede ang Pure CSS scroll Coke
Mga halimbawa ng CSS 3 Animation: Pag-scroll C Can Can

Ginawa ni Roman Cortes, tingnan ito sa pagkilos.

Pure CSS Walking Man

Mga halimbawa ng CSS 3 Animation: The Walking Man

 Ginawa ni Andrew Hoyer, tingnan ito sa pagkilos.

Pagkuha ng Iyong Mga Kamay na Marumi

Simulan natin ang code. Marami kaming gagamit ng mga klase ng pseudo ng CSS upang ma-trigger ang animation. Upang maging matapat, inirerekomenda ka ng maraming mga developer na gumamit ka ng JS upang maisaaktibo at i-de-aktibo ang mga animasyon, ngunit makikita natin ang mas madaling paraan:

#pagsusulit {
background: pula;
}
# Pinakamahusay: hover {
background: berde;
}
# Pinaka: aktibo {
background: asul;
}
# Pinaka-target: target {
background: itim;
}

Mayroon kaming ilang iba pang mga klase ng pseudo na gagamitin, ngunit nakuha mo ang ideya! Kaya narito ang mangyayari kung na-click mo ang # pinakamahalagang elemento (sa pag-aakalang isang link ito):

  • Normal na estado: Ang background ay magiging pula
  • Hover: Kapag ang mouse ay pumapasok sa elemento ng elemento magkakaroon ito ng berdeng background
  • Aktibo: Kapag na-click mo ang cursor dito at habang ang pindutan ng mouse ay pinindot pa rin ang kulay ng background ay magiging asul
  • Target: Kapag ang kasalukuyang pahina ay may pinakamagandang sa URL ang elementong ito ay magiging itim

Ang bawat isa sa mga ito ay maaaring magamit para sa mga animation ng CSS, halimbawa maaari kang lumikha ng 2 mga link upang maisaaktibo at i-deactivate ang CSS animation gamit ang target na elemento ng pseudo gamit ang code na ito:

buhayin
i-deactivate

Mga Transisyon ng CSS

Ang paglipat ng CSS ay magbabago mula sa paunang hanggang sa dulo ng estado nang maayos. Kaya’t ikaw ay tukuyin sa pangunahing tagapili gamit ang “paglipat” na ari-arian sa oras at bawat pag-aari na maaapektuhan at kung paano dapat ang animation. Tingnan ang isang halimbawa:

.pagsusulit {
/ * paglilipat-pag-aari ng tagal ng panahon-function, * /
kulay: asul;
paglipat: kulay 2, font-size 2s kadali-out;
}
.pagsubok: hover {
Kulay pula;
}
.pagsubok: aktibo {
laki ng font: 200%;
}

Kapag na-hover mo ang .tapos na elemento ay unti-unting mababago ang kulay mula sa asul hanggang pula (anong magandang palette, huh?). Kapag na-click mo ang elemento, ang laki ng font ay unti-unting tataas sa 200% ng default na laki ng font.

Mayroon din kaming “pag-uukol ng panahon ng paglipat”, na itinakda bilang kadalian, na kung paano magagamit ang “oras” para sa animation. Narito ang mga posibleng halaga:

  • Linya: Parehong bilis mula sa simula hanggang sa wakas
  • Ease-in: Mabagal na magsimula
  • Dali-out: Mabagal ang pagtatapos
  • Dali: Mabagal magsimula, mabilis sa gitna, pagkatapos ay mabagal ang pagtatapos
  • Ease-in-out: Mabagal ang pagsisimula, mabagal na pagtatapos
  • Cubic-bezier (a, b, c, d): Ang bilis ng pasadyang

Ang cubic na function ng cubier ay lilikha ng isang pasadyang animation na may 4 na mga numero na nag-iiba mula 0 hanggang 1, na kumakatawan sa curve ng matematika para sa bilis ng bilis ng X na tagal.

Para sa mas mahusay na pagiging tugma ng browser dapat mong isaalang-alang ang paggamit ng prefix ng vendor para sa opera, Firefox, at webkit tulad nito:

div {
lapad: 400px;
-o-transition: lapad 2s;
-moz-transition: lapad 2s;
-webkit-transition: lapad 2s;
paglipat: lapad 2s;
}

Gayundin, maaari mong gamitin ang mga query sa media upang tukuyin ang iba’t ibang mga paglipat depende sa lapad ng browser (mga mobile device, tablet). Ito ay isang simpleng halimbawa:

katawan {
laki ng font: 1em;
}
@media screen at (max-lapad: 800px) {
katawan {
laki ng font: 0.8em;
}
}
@media screen at (max-lapad: 400px) {
katawan {
Laki ng font: 0.7em;
}
}

Dito mababago ang laki ng font kapag nadagdagan mo ang lapad ng browser. Maiiwasan ng code na ito na mangyari, na nagbibigay ng isang mas maayos na paglipat:

katawan {
-o-transition: laki ng font-font .5s;
-moz-transition: sukat ng font-size .5s;
-webkit-transition: linya ng font-size .5s;
paglipat: laki ng font .5s linear;
}

Maaari mo ring gamitin ito kung mayroon kang iba’t ibang mga display o laki para sa portrait / landscape, kung nais mong baguhin ang mga lapad, kulay, paddings, menu display.

Animasyon ng CSS – Ang Tunay na Kasayahan Nagsisimula

Ang animation ay isang pagkakasunud-sunod ng mga paglilipat na tinukoy sa isang solong tagapili. Upang tukuyin ang mga animation ng CSS kakailanganin mong sundin ang 2 mga hakbang.

Ginagamit ang patakaran ng @keyframe upang tukuyin ang pagkakasunud-sunod ng mga hakbang sa animation, at tinukoy ito ng isang natatanging pangalan at mga estilo na naglalarawan kung paano gumagana ang animasyong ito. Tulad ng dati ay kakailanganin natin ang ilang mga prefix ng nagbebenta, tulad ng halimbawa na ito:

/ * ang parehong code para sa bawat nagtitinda * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * animation na pangalan * /
@keyframe my-animation {
/ * frame selector * /
0% {
/ * istilo ng frame * /
Kaliwa: 0px;
Nangungunang: 0px;
}
25% {
Kaliwa: 200px;
Nangungunang: 0px;
}
50% {
Kaliwa: 200px;
Nangungunang: 200px;
}
75% {
Kaliwa: 0px;
Nangungunang: 200px;
}
100% {
Kaliwa: 0px;
Nangungunang: 0px;
}
}

Kaya, ang bawat istilo ay tinukoy ng frame / timeframe (tulad ng mga frame mula sa isang flash animation) bilang isang porsyento at ang mga estilo na dapat mailapat doon. Ang keyframe na ito, halimbawa ay nagsasabi na ang elemento ay lilipat sa kaliwa, pagkatapos ay itaas, pagkatapos pakanan, pagkatapos ay ibaba.

Matapos mong sundin ang hakbang 1 at nilikha ang iyong keyframe maaari mo talaga itong ilapat sa isang elemento. Pagkatapos ay gagamitin namin ang halos kaparehong lohika tulad ng nagawa namin sa paglipat ng CSS, ang pagkakaiba ay ngayon ang aming “paglipat” ay isang masalimuot na animation.

Upang mailapat ito ay gagamitin namin ang ari-arian ng animation at mayroon itong 7 mga sub-katangian:

  • Pangalan: na natatanging identifier
  • Tagal: Gaano katagal aabutin mula 0% hanggang 100%
  • Pag-andar ng oras: medyo pareho ang function ng tiyempo ng paglipat
  • Pag-antala: Gaano katagal aabutin upang simulan ang 0%
  • Iteration-count: Gaano karaming mga pag-uulit ang mayroon tayo (“walang hanggan” para sa isang walang katapusang loop)
  • Direksyon: normal o kahaliling (baligtad)
  • Play-state: kung tumatakbo o naka-pause ang animation

Ito ay ilalapat ang aming animation sa pinakamahalagang elemento kapag ito ang target ng pahina:

# Pinaka-target: target {
/ * animation-pangalan | tagal | pag-andar ng tiyempo | pagkaantala | pag-iisa-count | direksyon | play-state * /
animation: my-animation 10s linear 0s walang hanggan normal na pagtakbo;
}

Sa isip nito maaari kang lumikha ng ilang mga kahanga-hangang halimbawa.

Pag-akma lamang ng CSS

Gagawa kami ng mga magagaling na panel na gumagamit ng mga CSS animation. Narito ang pangunahing istraktura ng HTML:

Tab 1

TEXT 1

Tab 2

TEXT 2

Tab 3

TEXT 3

Lilikha lamang ito ng mga panel at link na mag-uudyok sa bawat isa sa kanila. At narito kung saan nangyayari ang mahika:

/ * anumang div na nasa loob ng akurdyon * /
.akurdyon div {
/ * ay nakatago sa pamamagitan ng default * /
taas: 0;
overflow: nakatago;
/ * ang itim na magic * /
paglipat: taas 1s;
}
/ * kapag ang nabanggit na div ay ang target * /
.pag-akit div: target {
/ * taas: hindi gagana ang auto, ngunit gagana ito ng maayos * /
taas: 80px;
}

Medyo simple, ha? At ginugol mo ang buong buhay mo gamit ang JS para dito? 🙂

Menu lamang ng CSS na may Submenus

At ito ay isa pang simpleng application. Tiyak na mayroon kang isang menu ng nabigasyon sa iyong site, at madalas na kailangan naming gumamit ng ilang mga submenus doon. Ang pinakamahusay na paraan upang ipakita at itago ang mga item ay ang paggamit ng jQuery, di ba? Kaya, isipin muli pagkatapos mong subukan ang code na ito:

  • Item 1
    • Item 1.1
    • Item 1.2
  • Item 2
    • Item 2.1
    • Item 2.2

At ang wizardry ay nagsisimula dito:

isang {
/ * ginagawa lamang ang mga link na mas mahusay * /
display: block;
padding: 4px;
}
nav {
align ng teksto: gitna;
}
/ * anumang menu (kasama ang pangunahing isa) * /
nav ul {
display: inline-block;
istilo ng listahan: wala;
}
nav>ul>li {
/ * pahalang na item (patayo ay gagana rin ng maayos) * /
lumutang pakaliwa;
}
nav li div {
/ * gumuho ng anumang sub-menu * /
taas: 0;
overflow: nakatago;
/ * Mga damdaming Houdini * /
paglipat: taas 1s;
}
nav li: hover>div {
taas: 56px;
}

Summing Up

Ito ay tiyak na nagsisimula ng gabay lamang. Mayroong maraming iba pang mga cool na epekto na maaaring gawin gamit ang CSS na mga animation lamang at maraming mga bagay na tiyak na darating.

Kaya, ginamit mo na ba ito dati? Maaari mo bang isipin ang isa pang magandang application para sa CSS animations? Ibahagi ang iyong mga saloobin gamit ang mga komento!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me