Ang mga animasyon sa isang web page ay maaaring makaakit ng mas maraming mga gumagamit. Tanungin ito sa iyong sarili - kung makakakita ka ng isang web page na may kaunting animasyon, hindi mo nais na mag-explore pa? Ngayon, sa mga paglilipat ng CSS maaari mong gawing buhay ang iyong gawa ng ilang magagaling na mga animasyon. At, isip mo, ang mga ito ay kailangang gawin nang tama. Tuklasin natin ang mundo ng Mga Transisyon ng CSS sa sumusunod na pagkakasunud-sunod:
- Bakit Mga Paglipat ng CSS?
- Ang Pag-aari ng Transisyon
- Ano ang Kailangan Mong Tukuyin?
- Ang Pag-aari ng Pag-andar ng Paglipat-tiyempo-pag-andar
- Ang Pag-aari ng Transition-Delay
Bakit Mga Paglipat ng CSS?
Magsagawa tayo ng isang halimbawa. Kung papalitan mo ang kulay ng isang elemento mula sa puti hanggang sa asul, ang pagbabagong ito ay halos madalian. Para sa isang mas animated na epekto, magagawa mong gawin ang pagbabagong ito nang paunti-unti. Mukha itong nakakaakit din ng paningin. Sa pamamagitan ng pagpapagana ng mga paglilipat ng CSS, maaari mong ipasadya ang paraan ng mga pagbabago. Maaari mong tukuyin kung paano nangyayari ang mga pagbabago sa mga elemento sa mga tukoy na agwat ng oras na sumusunod sa isang curve ng acceleration.
Hinahayaan ka ng mga paglilipat ng CSS na tukuyin ang mga pagbabago para sa mga elemento, ang tukoy na agwat ng oras, ang bilis ng acceleration curve at marami pa. Maaari mong gawin ang lahat ng ito nang hindi gumagamit ng Flash o JavaScript .
Para sa isang mas mahusay na pag-unawa, maaari kang mag-refer sa imahe sa ibaba:
Sa imahe sa itaas, ang elemento ng HTML ay magbabago mula pula hanggang asul sa isang segundo. Makikita mo rin ang intermediate na kulay kapag nagaganap ang paglipat. Kung hindi ka gagamit ng mga paglilipat ng CSS, mapapansin mo na ang pagbabago ng kulay mula pula hanggang asul ay instant - hindi mo makikita ang intermediate na kulay. Sa mga paglipat ng CSS, mapapansin mo ang isang animated na epekto kapag ang mga elemento ng HTML ay nagbabago mula sa dating estado patungo sa bago.
Ang Pag-aari ng Transisyon
Maaari mong gamitin ang maikling pag-aari ng paglipat upang makontrol ang mga paglipat ng CSS. Ang paggamit ng shorthand na ito ay hindi lamang madali, ngunit maaari rin nitong maiwasan ang mga parameter na out-of-sync na maaaring maging lubos na nakakabigo upang mag-debug sa CSS.
Tinutukoy ng paglipat-pag-aari ang mga katangian ng CSS kung saan mo nais ang epekto ng paglipat. Ang mga katangiang CSS lamang ang na-animate.
Syntax:
paglipat:
Bilang isang nagsisimula, maaari kang harapin ang ilang mga paghihirap sa paggamit ng maikling salita. Kung sa tingin mo na ang paggamit ng shorthand ay isang maliit na kumplikado para sa iyo ngayon, maaari mong tukuyin nang hiwalay ang mga pag-aari ng paglipat. Para sa isang elemento ng HTML, maaari mong tukuyin ang mga pag-aari ng paglipat isa-isa tulad ng ipinakita sa halimbawa sa ibaba:
div {lapad: 100px taas: background ng 100px: lightblue transition-accommodation: lapad ng tagal ng paglipat: 2s transition-timing-function: linear transfer-delay: 1s} div: hover {width: 300px}Mag-hover sa ibabaw ng kahon
Sa halimbawa sa itaas, tinukoy namin ang mga pag-aari (paglipat-pag-aari, tagal ng paglipat, paglipat-oras-pag-andar at paglipat-antala) at magkakahiwalay na mga halaga. Malalaman natin ang tungkol sa mga pag-aari ng paglipat na ito kaagad.
Ano ang Kailangan Mong Tukuyin?
Pangunahin ang dalawang bagay na kailangan mong tukuyin upang lumikha ng mga paglilipat ng CSS: ang pag-aari ng CSS na nais na magdagdag ng isang epekto, at ang tagal ng oras ng epekto na iyon.Kailangan mong isaisip ang isang bagay - kapag hindi mo tinukoy ang tagal ng oras, ang paglipat ay kukuha ng isang default na halaga ng 0 , at hindi magkakaroon ng anumang epekto.
Isaalang-alang natin ang isang halimbawa:
Ang code sa ibaba ay tumutukoy sa isang epekto ng paglipat ng lapad na pag-aari para sa isang tagal ng limang segundo.
div {lapad: 100px taas: 100px background: asul na paglipat: lapad 5s} div: hover {lapad: 600px}Ilipat ang cursor sa div element sa itaas, upang makita ang epekto ng paglipat.
Sa code sa itaas, makikita mo na kapag na-hover mo ang iyong cursor sa asul na kahon, pinataas ng asul na kahon ang lapad nito nang paunti-unti sa loob ng isang oras na tagal ng limang segundo. Mapapansin mo rin na kapag tinanggal mo ang cursor mula sa asul na kahon, ang asul na kahon ay babalik sa orihinal nitong laki nang dahan-dahan (hindi agaran). Maaari mo ring baguhin ang mga halaga para sa lapad at tagal ng oras upang makita kung paano nakakaapekto ang pag-aari ng paglipat na ito sa elemento ng HTML.
Maaari mo ring idagdag ang epekto ng paglipat sa higit sa isang pag-aari. Maaari mo itong gawin sa pamamagitan ng paggamit ng mga kuwit upang paghiwalayin ang mga pag-aari. Isaalang-alang natin ang isang halimbawa:
Sa code sa ibaba, ang pag-aari ng paglipat ay tinukoy para sa lapad, taas, at pagbabago.
div {padding: 15px lapad: 150px taas: 100px background: berde paglipat: lapad 2s, taas 2s, ibahin ang anyo 2s div: hover {lapad: 300px taas: 200px ibahin ang anyo: paikutin (360deg)} Kamusta Mundo (Hover Over Me)
Sa halimbawang nasa itaas, makikita mo kung paano gumagalaw ang berdeng kahon kapag nag-hover ka sa ibabaw ng kahon.
Tinukoy lamang namin ang pag-aari at tagal ng oras. Tingnan natin ang iba pang mga parameter na may iba't ibang mga halimbawa.
kung paano lumikha ng isang pakete sa java
Ang Pag-aari ng Pag-andar ng Paglipat-tiyempo-pag-andar
Tinutukoy ng pag-aari na ito ang bilis ng kurba para sa epekto ng paglipat. Maaari itong kunin ang mga sumusunod na halaga:
- Halaga ng Dali: Ito ang default na halaga kung saan ang epekto ay mabagal sa simula, pagkatapos ay mas mabilis at dahan-dahang nagtatapos.
- Halaga ng Linear: Ang epekto na ito ay hindi nagbabago ng bilis ng paglipat - pinapanatili nito ang bilis na pare-pareho mula sa simula hanggang sa wakas.
- Halaga ng Dali: Ang epektong ito ay dahan-dahang nagsisimula.
- Halaga ng e-out: Ang epektong ito ay may mabagal na wakas.
- Halaga ng Ease-in-out: Ang epektong ito ay may mabagal na pagsisimula pati na rin mabagal na pagtatapos.
- Halaga ng Cubic-bezier (n, n, n, n): Maaari mong tukuyin ang iyong sariling hanay ng mga halaga sa pagpapaandar ng kubiko-bezier.
Ipinapakita ng code sa ibaba ang mga epekto sa paglipat para sa mga halaga ng linear, kadalian, kadalian, kadaliang paglabas at kadalian na paglabas.
div {lapad: 100px taas: 100px background: rosas na paglipat: lapad 2s} # div1 {transition-timing-function: linear} # div2 {transition-timing-function: ease} # div3 {transition-timing-function: easy-in } # div4 {transition-timing-function: ease-out} # div5 {transition-timing-function: ease-in-out} div: hover {width: 300px}Mag-hover sa mga elemento ng div sa ibaba
guhit-guhit
kadalian
madali-in
madali-out
madali-sa-labas
Ang Pag-aari ng Transition-Delay
Minsan, nais mong maganap ang isang animasyon pagkatapos ng isang tiyak na tagal ng oras. Hinahayaan ka ng pag-aari ng pagkaantala ng paglipat na tukuyin ang pagkaantala para sa isang epekto ng paglipat. Maaari mong tukuyin ang pagkaantala sa segundo.
Kumuha tayo ng isang halimbawa upang makita ang pagkaantala sa epekto ng paglipat:
div {lapad: 100px taas: 100px background: dilaw na paglipat: lapad 3s paglipat-antala: 1s} div: pag-hover {lapad: 300px}Mag-hover sa div element sa ibaba
Tandaan: Maaari mong obserbahan ang 1 segundong pagkaantala bago magsimula ang epekto
Sa code sa itaas, kapag nag-hover ka sa dilaw na kahon gamit ang iyong cursor, mapapansin mo (sa isang segundo) na walang epekto. Pagkatapos ng paghihintay ng isang segundo, mapapansin mo ang epekto.
Sa pamamagitan nito, natapos namin ang artikulong CSS Transitions na ito. Maaari kang magdagdag ng mga animasyon sa iyong mga WebPage ngayon. Subukan ang mga halimbawang ito.
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 'Transition ng CSS' at babalikan ka namin.