Kako predvajati več animacij CSS hkrati?

Ta članek prikazuje praktično predstavitev predvajanja/dodajanja več animacij CSS hkrati.

Kako predvajati več animacij CSS hkrati?

Z uporabo več animacij CSS hkrati lahko razvijalci preprosto ustvarijo bolj privlačne vmesnike. Če želite predvajati več animacij CSS hkrati, dajte vsaki edinstveno ime in ta imena uporabite za iste ali ločene komponente na strani.

Sledite spodnjemu postopku za predvajanje/dodajanje več kot ene animacije hkrati.

1. korak: Ustvarjanje strukture

Najprej ustvarite element HTML, v katerem bodo animacije uporabljene v naslednjih korakih. Vstavljena bo na primer slika:

V zgornjem delčku kode:

• Najprej je pot slike nastavljena na ' src ” atribut.
• Nato vrednost ' 100 slikovnih pik « je na voljo lastnostima CSS »width« in »height«.
• Nastavite tudi vrednost ' animirati ' do ' razred ” atribut.

2. korak: Nastavitev animacij

' ključne sličice ” se uporabljajo za ustvarjanje animacij po meri glede na potrebe spletne strani. V spodnjem delčku kode sta na primer ustvarjeni dve animaciji:

V zgornjem delčku kode:

• Prvič, ' @-webkit-keyframes ' mehanizem se uporablja za nastavitev ' vrtenje « in » vrteti ” imenovane animacije.
• Nato uporabite » transformirati ' lastnost, ki ima vrednost ' vrti() ' v ' vrtenje ” telo animacije. Ta funkcija zavrti element pod kotom ' 180 stopinj ”.
• Po tem nastavite animacijo, ki poveča ali razširi izvirni element za faktor ' 1 « v obeh » X « in » IN ' os v ' lestvica ” telo animacije.

3. korak: Uporaba animacije na elementih HTML

Znotraj dela CSS izberite razred ' animirati «, ki je dodeljen » ” in zagotovite naslednje lastnosti CSS:

Opis lastnosti, uporabljenih v zgornjem bloku kode:

• Najprej nastavite vrednost ' absolutno »v CSS« položaj ” lastnina. Usklajuje ' img ” glede na animacijo.
• Nato navedite vrednosti ' 60 % ”, “ 110 slikovnih pik « in » 110 slikovnih pik »v CSS« levo ”, “ premer « in » višina ” lastnosti. Te lastnosti se uporabljajo za nastavitev položaja in velikosti elementa.
• Po tem nastavite vrednost ' merilo 3s neskončno linearno ' do ' -webkit-animacija Lastnost CSS.
• In ' 3s « je trajanje te animacije, » neskončno « je trajanje animacije, » linearni ” je smer animacije.
• Na koncu navedite vrednosti ' spin 2s neskončno linearno »v CSS« -webkit-animacija ” lastnina. Ta lastnost doda drugo animacijo z imenom ' vrtenje ' na ' img ” element.

Po kompilaciji zgornjega bloka kode je animacija videti takole:

Zgornji gif prikazuje, da samo ' vrtenje ” se predvaja animacija na ciljnem elementu.

4. korak: Predvajanje več animacij na elementih HTML

Kot v zgornjem koraku je bila za element uporabljena samo ena animacija. To je zato, ker je bilo več vrednosti dodeljenih istemu ' -webkit-animacija ” lastnina.

Če želite odpraviti to težavo, ovijte ciljni element z drugim elementom HTML. Kot ' div « je že uporabljen kot ovoj v prvem koraku, izberite njegov » razpon « in posodobite kodo, kot je:

V zgornji kodi:

• Sprva je ' animirati ' ostane isti in iz njega je odstranjena samo druga animacija, ki je postavljena v ' razpon ” razred.
• Nato nastavite položaj z uporabo ' položaj « in » vrh ” lastnosti.

Po izvedbi zgornjega delčka kode je spletna stran zdaj videti takole:

Izhod pokaže, da sta bili obe animaciji uporabljeni za izbrani element HTML hkrati.

Zaključek

Če želite uporabiti več lastnosti CSS, ovijte element z elementi HTML in nanje uporabite animacije, tako da bo vsak element HTML vseboval eno animacijo. Ker podrejena lastnost podeduje animacijo, uporabljeno na nadrejenem elementu HTML, se uporabi več animacij, ne da bi pri prevajalniku prišlo do napak ali dvoumnosti. To je postopek za predvajanje/dodajanje več kot ene animacije CSS hkrati.