Ang artikulong ito ay nagpapakita ng isang praktikal na demonstrasyon upang maglaro/magdagdag ng maramihang mga animation ng CSS nang sabay-sabay.
Paano Maglaro ng Maramihang CSS Animation nang Sabay-sabay?
Sa pamamagitan ng paglalapat ng maramihang mga animation ng CSS nang sabay-sabay, madaling makakagawa ang mga developer ng mas nakakaengganyong mga interface. Upang maglaro ng maraming CSS animation nang sabay-sabay, bigyan ang bawat isa ng natatanging pangalan at ilapat ang mga pangalang iyon sa pareho o hiwalay na bahagi sa page.
Sundin ang pamamaraan sa ibaba upang maglaro/magdagdag ng higit sa isang animation sa parehong oras.
Hakbang 1: Paglikha ng Istruktura
Una, gumawa ng HTML element kung saan mailalapat ang mga animation sa mga paparating na hakbang. Halimbawa, ang imahe ay ipapasok:
< div klase = 'span' >
< img src = 'book.jpg' taas = '100px' lapad = '100px' klase = 'buhayin' >
< / div >
Sa snippet ng code sa itaas:
- Una, ang path ng imahe ay nakatakda sa ' src ” katangian.
- Susunod, ang halaga ng ' 100px ' ay ibinibigay sa CSS na 'lapad' at 'taas' na mga katangian.
- Gayundin, itakda ang halaga ng ' buhayin ' sa ' klase ” katangian.
Hakbang 2: Pag-set Up ng Mga Animasyon
Ang ' mga keyframe ” ay ginagamit upang lumikha ng mga custom na animation ayon sa pangangailangan ng webpage. Halimbawa, dalawang animation ang ginawa sa ibaba ng snippet ng code:
@-webkit-keyframes umiikot {100 % {
ibahin ang anyo: paikutin ( 180deg ) ;
}
}
@-webkit-keyframes scale {
100 % {
pagbabagong-anyo: scaleX ( 1 ) sukatY ( 1 ) ;
}
}
Sa snippet ng code sa itaas:
- Una, ang ' @-webkit-keyframes 'Ang mekanismo ay ginagamit upang i-set up' paikutin 'at' paikutin ” pinangalanang animation.
- Susunod, gamitin ang ' ibahin ang anyo ” ari-arian na may halaga ng “ paikutin() ' nasa ' paikutin ” katawan ng animation. Pinaikot ng function na ito ang elemento sa isang anggulo ng ' 180deg ”.
- Pagkatapos nito, itakda ang animation na lumalaki o nagpapalawak sa orihinal na elemento sa pamamagitan ng salik na ' 1 'sa parehong' X 'at' AT 'axis sa' sukat ” katawan ng animation.
Hakbang 3: Paglalapat ng Animation sa HTML Elements
Sa loob ng bahagi ng CSS, piliin ang klase ' buhayin 'na itinalaga sa' ” tag, at ibigay ang mga sumusunod na katangian ng CSS:
posisyon: ganap;
kaliwa: 60 %;
lapad : 110px;
taas : 110px;
margin: -40px 0 0 -40px;
-webkit-animation: scale 3s infinite linear;
-webkit-animation: spin 2s infinite linear;
}
Paglalarawan ng mga katangian na ginamit sa bloke ng code sa itaas:
- Una, itakda ang halaga ng ' ganap 'sa CSS' posisyon ” ari-arian. Inihanay nito ang ' img ” elemento ayon sa animation.
- Pagkatapos, ibigay ang mga halaga ng ' 60% ”, “ 110px 'at' 110px 'sa CSS' umalis ”, “ lapad 'at' taas ' ari-arian. Ang mga katangiang ito ay ginagamit upang itakda ang posisyon at laki ng isang elemento.
- Pagkatapos nito, itakda ang halaga ng ' scale 3s walang katapusang linear ' sa ' -webkit-animation ” pag-aari ng CSS.
- At ang ' 3s ' ay ang tagal ng animation na iyon, ang ' walang hanggan ' ay ang tagal ng animation, at ang ' linear ” ang direksyon ng animation.
- Sa huli, ibigay ang mga halaga ng ' spin 2s infinite linear 'sa CSS' -webkit-animation ” ari-arian. Idinaragdag ng property na ito ang pangalawang animation na pinangalanang “ paikutin ' sa ' img ' elemento.
Pagkatapos ng pagsasama-sama ng bloke ng code sa itaas, ganito ang hitsura ng animation:
Ang gif sa itaas ay naglalarawan na ' paikutin ” Nagpe-play ang animation sa naka-target na elemento.
Hakbang 4: Paglalaro ng Maramihang Animasyon sa HTML Elements
Tulad ng sa itaas na hakbang, isang animation lamang ang inilapat sa elemento. Ito ay dahil maraming mga halaga ang itinalaga sa parehong ' -webkit-animation ” ari-arian.
Upang malutas ang isyung ito, balutin ang target na elemento ng isa pang elemento ng HTML. Bilang ang ' div ' ay ginagamit na bilang isang wrapper sa unang hakbang, piliin ang ' span ” at i-update ang code tulad ng:
.buhayin {posisyon: ganap;
kaliwa: 60 %;
lapad : 110px;
taas : 110px;
margin:-40px 0 0 -40px;
-webkit-animation: scale 3s infinite linear;
}
. span {
posisyon: kamag-anak;
tuktok: 160px;
-webkit-animation: spin 2s infinite linear;
}
Sa code sa itaas:
- Noong una, ang ' buhayin Ang klase ng ” ay nananatiling pareho at ang pangalawang animation lamang ang tinanggal mula dito na inilalagay sa “ span ” klase.
- Pagkatapos nito, itakda ang posisyon sa pamamagitan ng paggamit ng ' posisyon 'at' itaas ' ari-arian.
Pagkatapos ng pagpapatupad ng snippet ng code sa itaas, ang webpage ay lilitaw na tulad nito:
Ipinapakita ng output na ang parehong mga animation ay inilapat sa napiling elemento ng HTML sa parehong oras.
Konklusyon
Upang maglapat ng maraming katangian ng CSS, balutin ang elemento ng mga elemento ng HTML at ilapat ang mga animation sa mga ito upang ang bawat elemento ng HTML ay may hawak na isang animation. Habang minana ng child property ang animation na inilapat sa parent HTML element, maraming animation ang nailalapat nang hindi nagdudulot ng mga error o kalabuan para sa compiler. Iyon ang pamamaraan upang maglaro/magdagdag ng higit sa isang CSS animation nang sabay-sabay.