Ipinapakita ng artikulong ito ang proseso ng pagdaragdag ng mga multi-step na animation at transition.
Paano Gumamit ng Mga Multi-Step na Animation at Transition?
Upang makagawa ng isang multi-step na animation, isang serye ng mga keyframe ang nabuo. Tinutukoy nito ang serye ng mga pagbabago na ilalapat sa napiling elemento ng HTML. Ang bawat keyframe ay kumakatawan sa ibang estado ng animation, at maayos na inililipat ng browser ang elemento sa pagitan ng mga estadong ito. Habang nagbabago, tukuyin ang maayos na pagbabago ng mga katangian ng CSS sa isang tinukoy na tagal ng mga pakikipag-ugnayan ng user o pagbabago ng estado.
Maglakad tayo sa isang praktikal na halimbawa para sa mas mahusay na pag-unawa:
Halimbawa 1: Paglalapat ng Multi-Step Animation
Sa halimbawang ito, ang isang multistep na animation ay ilalapat sa napiling elemento ng HTML. Bisitahin ang demonstrasyon sa ibaba:
< istilo >
.animationExample {
lapad: 130px;
taas: 130px;
kulay ng background: forestgreen;
posisyon: kamag-anak;
animation: moveAnimate 4s ease-in-out infinite;
}
< / istilo >
< katawan >
< div klase = 'AnimationExample' >< / div >
< / katawan >
Sa snippet ng code sa itaas:
- Una, ang klase ay pinangalanang ' halimbawa ng animation ' ay pinili sa loob ng '