Kaip leisti kelias CSS animacijas vienu metu?

Šiame straipsnyje demonstruojama praktinė demonstracija, kaip vienu metu paleisti / pridėti kelias CSS animacijas.

Kaip leisti kelias CSS animacijas vienu metu?

Taikydami kelias CSS animacijas vienu metu, kūrėjai gali lengvai sukurti patrauklesnes sąsajas. Jei norite leisti daug CSS animacijų vienu metu, suteikite kiekvienai unikalų pavadinimą ir pritaikykite tuos pavadinimus tiems patiems arba atskiriems puslapio komponentams.

Norėdami vienu metu paleisti / pridėti daugiau nei vieną animaciją, atlikite toliau pateiktą procedūrą.

1 žingsnis: struktūros sukūrimas

Pirmiausia sukurkite HTML elementą, kuriame animacijos bus pritaikytos būsimiems veiksmams. Pavyzdžiui, vaizdas bus įterptas:

Aukščiau pateiktame kodo fragmente:

• Pirma, vaizdo kelias nustatomas į ' src “ atributas.
• Toliau vertė „ 100 piks “ yra pateikta CSS ypatybėms „plotis“ ir „aukštis“.
• Taip pat nustatykite reikšmę „ pagyvinti “ į „ klasė “ atributas.

2 veiksmas: animacijų nustatymas

„ raktiniai kadrai “ yra naudojami kuriant pasirinktines animacijas pagal tinklalapio poreikį. Pavyzdžiui, toliau pateiktame kodo fragmente sukuriamos dvi animacijos:

Aukščiau pateiktame kodo fragmente:

• Pirma, „ @-webkit-keyframes mechanizmas naudojamas nustatyti suktis “ ir „ pasukti “ pavadintos animacijos.
• Tada naudokite „ transformuoti 'turtas, kurio vertė yra ' pasukti () ' viduje ' suktis “ animacijos kūnas. Ši funkcija pasuka elementą kampu ' 180 laipsnių “.
• Po to nustatykite animaciją, kuri padidina arba išplečia pradinį elementą koeficientu „ 1 “ tiek „ X “ ir „ IR “ ašyje “ skalė “ animacijos kūnas.

3 veiksmas: animacijos taikymas HTML elementuose

CSS dalyje pasirinkite klasę ' pagyvinti “, kuris yra priskirtas „ “ žymą ir pateikite šias CSS ypatybes:

Aukščiau pateiktame kodo bloke naudojamų savybių aprašymas:

• Pirmiausia nustatykite ' reikšmę absoliutus 'į CSS' padėtis ' nuosavybė. Jis suderina „ img “ elementas pagal animaciją.
• Tada pateikite „ 60 % “, „ 110 taškų “ ir „ 110 taškų 'į CSS' paliko “, „ plotis “ ir „ aukščio “ savybes. Šios savybės naudojamos elemento vietai ir dydžiui nustatyti.
• Po to nustatykite reikšmę ' skalė 3s begalinė tiesinė “ į „ -Webkit-animacija “ CSS nuosavybė.
• Ir ' 3s “ yra tos animacijos trukmė, „ begalinis “ yra animacijos trukmė, o „ linijinis “ – tai animacijos kryptis.
• Pabaigoje pateikite „ sukinys 2s begalinis tiesinis 'į CSS' -Webkit-animacija ' nuosavybė. Ši nuosavybė prideda antrąją animaciją pavadinimu „ suktis ' ant ' img “ elementas.

Sudarius aukščiau pateiktą kodo bloką, animacija atrodo taip:

Aukščiau pateiktas gif iliustruoja, kad tik „ suktis “ animacija grojama ant tikslinio elemento.

4 veiksmas: kelių animacijų paleidimas HTML elementuose

Kaip ir ankstesniame veiksme, elementui pritaikyta tik viena animacija. Taip yra todėl, kad kelios reikšmės buvo priskirtos tam pačiam ' -Webkit-animacija ' nuosavybė.

Norėdami išspręsti šią problemą, apvyniokite tikslinį elementą kitu HTML elementu. Kaip „ div “ jau naudojamas kaip įvynioklis pirmame veiksme, pasirinkite jo “ span “ ir atnaujinkite kodą taip:

Aukščiau pateiktame kode:

• Iš pradžių „ pagyvinti “ klasė išlieka ta pati ir iš jos pašalinama tik antroji animacija, kuri dedama į „ span ' klasė.
• Po to nustatykite padėtį naudodami ' padėtis “ ir „ viršuje “ savybes.

Įvykdžius aukščiau pateiktą kodo fragmentą, tinklalapis dabar atrodo taip:

Išvestis rodo, kad abi animacijos buvo pritaikytos pasirinktam HTML elementui vienu metu.

Išvada

Norėdami pritaikyti kelias CSS ypatybes, apvyniokite elementą HTML elementais ir pritaikykite jiems animaciją, kad kiekviename HTML elemente būtų viena animacija. Kadangi antrinė nuosavybė paveldi pirminiame HTML elemente pritaikytą animaciją, taikomos kelios animacijos, nesukeliant kompiliatoriaus klaidų ar neaiškumų. Tai yra procedūra, skirta paleisti / pridėti daugiau nei vieną CSS animaciją vienu metu.