Kuidas mängida mitut CSS-animatsiooni korraga?

See artikkel demonstreerib praktilist demonstratsiooni mitme CSS-animatsiooni samaaegseks esitamiseks/lisamiseks.

Kuidas mängida mitut CSS-animatsiooni korraga?

Rakendades korraga mitut CSS-animatsiooni, saavad arendajad hõlpsasti luua köitvamaid liideseid. Paljude CSS-animatsioonide samaaegseks esitamiseks andke igaühele kordumatu nimi ja kandke need nimed lehe samadele või eraldi komponentidele.

Rohkem kui ühe animatsiooni korraga esitamiseks/lisamiseks järgige allolevat protseduuri.

1. samm: struktuuri loomine

Esiteks looge HTML-element, milles animatsioone rakendatakse eelseisvates etappides. Näiteks lisatakse pilt:

Ülaltoodud koodilõigul:

• Esiteks määratakse pildi teeks ' src ” atribuut.
• Järgmiseks väärtus ' 100 pikslit ” pakutakse CSS-i atribuutidele „laius” ja „kõrgus”.
• Määrake ka väärtus ' animeerima ' juurde ' klass ” atribuut.

2. samm: animatsioonide seadistamine

' võtmekaadrid ” kasutatakse kohandatud animatsioonide loomiseks vastavalt veebilehe vajadustele. Näiteks luuakse allolevas koodilõigul kaks animatsiooni:

Ülaltoodud koodilõigul:

• Esiteks, ' @-webkit-keyframes mehhanismi kasutatakse seadistamiseks keerutada ” ja „ pöörata ” nimega animatsioonid.
• Järgmisena kasutage ' teisendada ' vara, mille väärtus on ' pööra() ' jaotises ' keerutada ” animatsiooni keha. See funktsioon pöörab elementi nurga all ' 180 kraadi ”.
• Pärast seda määrake animatsioon, mis suurendab või pikendab algset elementi teguriga ' 1 ” mõlemas „ X ” ja „ JA ' teljel ' kaal ” animatsiooni keha.

3. samm: animatsiooni rakendamine HTML-elementidele

Valige CSS-i osas klass ' animeerima ', mis on määratud ' ” ja esitage järgmised CSS-i atribuudid:

Ülaltoodud koodiplokis kasutatud atribuutide kirjeldus:

• Esmalt määrake '' väärtus absoluutne 'CSS-i' positsiooni ” vara. See joondab ' img ” element vastavalt animatsioonile.
• Seejärel esitage väärtused ' 60% ”, „ 110 pikslit ” ja „ 110 pikslit 'CSS-i' vasakule ”, „ laius ” ja „ kõrgus ” omadused. Neid omadusi kasutatakse elemendi asukoha ja suuruse määramiseks.
• Pärast seda määrake väärtus ' skaala 3s lõpmatu lineaarne ' juurde ' -veebikomplekt-animatsioon ”CSS-i omadus.
• Ja ' 3s ' on selle animatsiooni kestus, ' lõpmatu ' on animatsiooni kestus ja ' lineaarne ” on animatsiooni suund.
• Lõpuks esitage väärtused ' spin 2s lõpmatu lineaarne 'CSS-i' -veebikomplekt-animatsioon ” vara. See atribuut lisab teise animatsiooni nimega ' keerutada ' lehel ' img ” element.

Pärast ülaltoodud koodiploki koostamist näeb animatsioon välja järgmine:

Ülaltoodud gif illustreerib, et ainult ' keerutada ” sihitud elemendil mängitakse animatsiooni.

4. samm: mitme animatsiooni esitamine HTML-elementidel

Nagu ülaltoodud etapis, on elemendile rakendatud ainult üks animatsioon. Selle põhjuseks on asjaolu, et samale 'le on määratud mitu väärtust -veebikomplekt-animatsioon ” vara.

Selle probleemi lahendamiseks mähkige sihtelement teise HTML-elemendiga. Nagu ' div ' on juba esimeses etapis ümbrisena kasutusel, valige selle ' ulatus ” ja värskendage koodi nagu:

Ülaltoodud koodis:

• Algul ' animeerima ” klass jääb samaks ja sellest eemaldatakse ainult teine ​​animatsioon, mis paigutatakse „ ulatus ” klass.
• Pärast seda määrake positsioon, kasutades ' positsiooni ” ja „ üleval ” omadused.

Pärast ülaltoodud koodilõigu täitmist näeb veebileht nüüd välja selline:

Väljund näitab, et mõlemad animatsioonid on valitud HTML-i elemendile korraga rakendatud.

Järeldus

Mitme CSS-i atribuudi rakendamiseks mähkige element HTML-i elementidega ja rakendage neile animatsioone, nii et iga HTML-i element sisaldaks ühte animatsiooni. Kuna alamomadused pärivad HTML-i emaelemendile rakendatud animatsiooni, rakendatakse mitu animatsiooni, ilma et see põhjustaks kompilaatoris vigu või ebaselgust. See on protseduur rohkem kui ühe CSS-animatsiooni samaaegseks esitamiseks/lisamiseks.