Home-theater-designers
Binibigyan ng CSS ang mga developer ng kakayahang mabuhay ang kanilang mga web page gamit ang keyframes na animasyon.
Ang CSS animasyon ay nakamit sa pamamagitan ng pagbabago ng paunang estado ng isang elemento ng HTML sa pamamagitan ng iba't ibang mga katangian. Ang ilang mga pangkalahatang pag-aari ng CSS na maaaring ma-animate ay kasama ang:
kung paano ikonekta ang isang mikropono sa isang computer
- Lapad
- Taas
- Posisyon
- Kulay
- Pagkasaya
Ang pangkalahatang mga pag-aari ng CSS na ito ay minamanipula ng mga tukoy na elemento ng CSS upang likhain ang nais na resulta. Kung nakatagpo ka ng isang animated na elemento sa isang web page, malamang na ang elemento ay na-animate gamit ang mga keyframes na animasyon.
Ano ang isang Elementong Keyframes?
Ang elemento ng keyframes maaaring magamit sa isa o higit pang elemento ng HTML na may access ito. Kinikilala nito ang isang tukoy na punto sa estado ng isang elemento at idinidikta ang hitsura na dapat mayroon ang elementong ito sa oras na ito.
Ito ay maaaring tunog tulad ng isang pulutong digest, ngunit ito ay talagang medyo simple. Ang elemento ng keyframes ay may isang simpleng prangka na istraktura na madaling maunawaan at maiakma upang magkasya sa anumang mga kinakailangan sa animasyon.
Halimbawa ng istraktura ng Keyframes
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Sabihin nating nais mong buhayin ang isang berdeng hugis-parihaba na pindutan sa pamamagitan ng paggawa nito sa isang asul na bilog na pindutan.
Sa loob ng mga parameter ng mula sa seksyon sa itaas kakailanganin mong ilagay ang lahat ng kinakailangang istilo upang magkaroon ang elemento ng hitsura ng isang berdeng hugis-parihaba na pindutan, pagkatapos ay sa sa seksyon, ilalagay mo ang lahat ng mga kinakailangan sa istilo upang ibahin ang pindutan sa isang asul na bilog na pindutan.
Kung iniisip mo, hindi iyon masyadong tunog tulad ng animasyon. Sa gayon, iyon ay dahil ang isang pangunahing sangkap ng buong proseso na ito ay hindi pa maipakikilala --- ang sangkap na ito ay ang pag-aari ng animasyon.
Ang Pag-aari ng Animation
Ang pag-aari ng animasyon ay may isang hanay ng iba't ibang mga sub-katangian; ginagamit ang mga ito kasama ng istrakturang keyframes sa itaas upang buhayin ang nais na elemento ng HTML.
Gayunpaman, kailangan mo lamang malaman ang lima sa mga sub-katangian at ang mga halagang nauugnay sa kanila, upang makamit ang animasyon sa iyong mga proyekto. Ang mga katangiang ito ay kilala bilang:
- Animation-name
- Animation-tagal
- Animation-timing-function
- Animation-pagkaantala
- Animation-iteration-count
Paggamit ng Animation sa isang Web Page
Gamit ang senaryo sa itaas, ang layunin ay upang lumikha ng isang animated na pindutan.
Halimbawa ng Animation ng Button
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
Ang seksyon ng animasyon ng code sa itaas ay naglalaman ng limang mga sub-pag-aari na nabanggit nang mas maaga. Ang bawat pag-aari ay may isang natatanging natatanging pag-andar at sama-sama silang nagtatrabaho upang buhayin ang anumang elemento ng HTML na ginawa upang ma-target.
Kaugnay: Paano Mag-target ng Bahagi ng isang Web Page Gamit ang Mga Selecttor ng CSS
Ang Pag-aari ng Pang-Animation
Ang pag-aari na ito ay ang nag-iisang pinakamahalagang pag-aari sa listahan. Nang wala ang pag-aari ng pangalan ng animasyon , wala kang pagkakakilanlan sa nakaraan sa elemento ng keyframes , ginagawa ang lahat ng mga code sa loob ng mga parameter na walang silbi.
Kung nakalimutan mong isama ang isa o dalawa sa iba pang mga sub-pag-aari pagkatapos ay maaari ka pa ring magkaroon ng isang disenteng animasyon. Gayunpaman, kung nakalimutan mo ang pag-aari ng pangalan ng animasyon wala kang animasyon.
Ang Pag-aari ng tagal ng Animation
Ginagamit ang pag-aari na ito upang tukuyin ang dami ng oras na dapat gawin ng isang animated na elemento kapag lumilipat mula sa isang estado patungo sa susunod.
Sa halimbawa sa itaas, ang pag-aari ng tagal ng animasyon ay nakatakda sa 5 segundo (5s), kaya ang berdeng hugis-parihaba na pindutan ay magkakaroon ng kabuuang 5 segundo bago ito ganap na maging isang asul na bilog na pindutan.
Ang pag-aari ng pagkaantala ng Animation
Ang pag-aari na ito ay mahalaga dahil sa isang kadahilanan; ang ilang mga web page ay maaaring tumagal ng ilang segundo upang ganap na mai-load (dahil sa maraming iba't ibang mga kadahilanan). Kaya ang pag-aari ng pagkaantala ng animasyon pinipigilan ang animasyon na magsimulang kaagad kung sakali ang web page ay tumatagal ng ilang oras upang mai-load.
Sa halimbawa sa itaas, ang pag-aari ng pagkaantala ng animasyon ay nakatakda sa 4s, na nangangahulugang hindi magsisimula ang animasyon hanggang 4 na segundo pagkatapos bisitahin ang webpage (pagbibigay ng sapat na oras sa web page upang mai-load bago magsimula ang animasyon).
Ang Pag-aari ng Animation-iteration-count
Ipinapahayag ng pag-aari na ito kung gaano karaming beses dapat lumipat ang animated na elemento mula sa isang estado patungo sa susunod. Ang pag-aari ng animation-iteration-count kumukuha ng mga halaga na mga salita at numero. Ang halaga ng numero ay maaaring maging anumang mula sa 1 pataas, habang ang salitang halaga ay karaniwang walang hanggan .
Sa halimbawa sa itaas, ang halaga ng animation-iteration-count ay nakatakda sa walang hanggan , na nangangahulugang hangga't ang web page ay nasa itaas ang pindutan ng pag-aari ay magpapalaki mula sa isang estado hanggang sa susunod, patuloy.
Ang Pag-aari ng Animation-timing-function
Ang pag-aari na ito ang nagdidikta ng paggalaw ng animated na elemento habang lumilipat ito mula sa isang estado patungo sa susunod. Ang pag-aari ng animasyon-oras-pag-andar ay karaniwang nakatalaga ng isa sa tatlong mga halaga ng kadalian.
- Dali-in
- Dali-labas
- Dali-in-out
Ang kadalian ng halaga ay ginagamit sa itaas; dahan-dahan nitong inililipat ang animasasyon mula sa isang estado patungo sa isa pa. Kung ang layunin ay upang lumikha ng isang mabagal na paglipat kapag ang pindutan ay nagbabago mula sa isang berdeng rektanggulo sa isang asul na bilog gagamitin mo ang kadalian ng halaga . Kung nais mo lamang ang mabagal na paglipat sa kabaligtaran na direksyon gagamitin mo ang kadalian ng halaga .
Pagbawas sa Aming Code
Sa karamihan ng mga pagkakataon, ang pagbawas ng haba ng isang programa ay nakikita bilang isang praktikal na diskarte. Pangunahin ito sapagkat mas kaunting mga linya ng code ang nagbabawas ng posibilidad ng mga error na hindi napansin sa iyong mga programa.
Ang code sa itaas ay maaaring mabawasan ng apat na linya. Maaari itong makamit sa pamamagitan lamang ng paggamit ng pag-aari ng animasyon nang hindi malinaw na kinikilala ang bawat isa sa mga sub-katangian.
Pagbawas ng Code para sa Halimbawa ng Animation ng Button
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}