Kako igrati više CSS animacija u isto vrijeme?

Ovaj članak pokazuje praktičnu demonstraciju reprodukcije/dodavanja više CSS animacija u isto vrijeme.

Kako igrati više CSS animacija u isto vrijeme?

Primjenom više CSS animacija u isto vrijeme, programeri mogu lako stvoriti zanimljivija sučelja. Za reprodukciju više CSS animacija u isto vrijeme, svakoj dodijelite jedinstveno ime i primijenite te nazive na iste ili zasebne komponente na stranici.

Slijedite postupak u nastavku za reprodukciju/dodavanje više od jedne animacije u isto vrijeme.

Korak 1: Stvaranje strukture

Najprije izradite HTML element u kojem se animacije primjenjuju u nadolazećim koracima. Na primjer, slika će biti umetnuta:

U gornjem isječku koda:

• Prvo, putanja slike postavljena je na ' src ” atribut.
• Zatim, vrijednost ' 100 px ” pruža se svojstvima CSS-a “width” i “height”.
• Također, postavite vrijednost ' animirati ' prema ' razreda ” atribut.

Korak 2: Postavljanje animacija

' ključne slike ” koriste se za stvaranje prilagođenih animacija prema potrebama web stranice. Na primjer, dvije animacije stvorene su u donjem isječku koda:

U gornjem isječku koda:

• Prvo, ' @-webkit-keyframes ' mehanizam se koristi za postavljanje ' vrtjeti ' i ' rotirati ” imenovane animacije.
• Zatim upotrijebite ' transformirati ' svojstvo koje ima vrijednost ' rotirati() ' u ' vrtjeti ” tijelo animacije. Ova funkcija rotira element za kut od “ 180 stupnjeva ”.
• Nakon toga postavite animaciju koja povećava ili produžuje izvorni element za faktor ' 1 ' u oba ' x ' i ' I ' os u ' mjerilo ” tijelo animacije.

Korak 3: Primjena animacije na HTML elemente

Unutar CSS dijela odaberite klasu ' animirati ' koji je dodijeljen ' ” i navedite sljedeća CSS svojstva:

Opis svojstava korištenih u gornjem bloku koda:

• Prvo postavite vrijednost ' apsolutna ' u CSS ' položaj ” vlasništvo. Usklađuje ' img ” element prema animaciji.
• Zatim navedite vrijednosti ' 60% ”, “ 110 px ' i ' 110 px ' u CSS ' lijevo ”, “ širina ' i ' visina ' Svojstva. Ova svojstva se koriste za postavljanje položaja i veličine elementa.
• Nakon toga postavite vrijednost ' mjerilo 3s beskonačno linearno ' prema ' -webkit-animacija ” CSS svojstvo.
• I ' 3s ' je trajanje te animacije, ' beskonačan ' je trajanje animacije, a ' linearni ” smjer je animacije.
• Na kraju navedite vrijednosti ' spin 2s beskonačno linearno ' u CSS ' -webkit-animacija ” vlasništvo. Ovo svojstvo dodaje drugu animaciju pod nazivom ' vrtjeti ' na ' img ” element.

Nakon kompilacije gornjeg bloka koda, animacija izgleda ovako:

Gornji gif ilustrira da samo ' vrtjeti ” animacija se reproducira na ciljanom elementu.

Korak 4: Reprodukcija više animacija na HTML elementima

Kao u gornjem koraku, samo je jedna animacija primijenjena na element. To je zato što je više vrijednosti dodijeljeno istom ' -webkit-animacija ” vlasništvo.

Da biste riješili ovaj problem, omotajte ciljni element drugim HTML elementom. kao ' div ” već se koristi kao omot u prvom koraku, odaberite njegov „ raspon ” i ažurirajte kôd na sljedeći način:

U gornjem kodu:

• Isprva, ' animirati ” klasa ostaje ista i iz nje je uklonjena samo druga animacija koja je smještena u “ raspon ” razred.
• Nakon toga, postavite položaj pomoću ' položaj ' i ' vrh ' Svojstva.

Nakon izvođenja gornjeg isječka koda, web stranica sada izgleda ovako:

Izlaz pokazuje da su obje animacije primijenjene na odabrani HTML element u isto vrijeme.

Zaključak

Da biste primijenili više CSS svojstava, omotajte element HTML elementima i na njih primijenite animacije tako da svaki HTML element sadrži jednu animaciju. Budući da podređeno svojstvo nasljeđuje animaciju primijenjenu na nadređeni HTML element, više animacija se primjenjuje bez uzroka pogrešaka ili dvosmislenosti za kompajler. To je postupak za reprodukciju/dodavanje više od jedne CSS animacije u isto vrijeme.