Ako hrať viacero CSS animácií súčasne?

Tento článok demonštruje praktickú ukážku prehrávania/pridania viacerých CSS animácií súčasne.

Ako hrať viacero CSS animácií súčasne?

Aplikovaním viacerých CSS animácií súčasne môžu vývojári ľahko vytvoriť pútavejšie rozhrania. Ak chcete prehrať viacero animácií CSS súčasne, priraďte každej z nich jedinečný názov a tieto názvy aplikujte na rovnaké alebo samostatné komponenty na stránke.

Ak chcete súčasne prehrať/pridať viac ako jednu animáciu, postupujte podľa nižšie uvedeného postupu.

Krok 1: Vytvorenie štruktúry

Najprv vytvorte prvok HTML, v ktorom sa v nasledujúcich krokoch použijú animácie. Napríklad sa vloží obrázok:

Vo vyššie uvedenom útržku kódu:

• Najprv je cesta k obrázku nastavená na „ src “.
• Ďalej hodnota „ 100 pixelov ” sa poskytuje vlastnostiam CSS „width“ a „height“.
• Nastavte tiež hodnotu „ animovať “ na “ trieda “.

Krok 2: Nastavenie animácií

' kľúčové snímky ” sa používajú na vytváranie vlastných animácií podľa potreby webovej stránky. Napríklad v nižšie uvedenom útržku kódu sa vytvoria dve animácie:

Vo vyššie uvedenom útržku kódu:

• Po prvé, „ @-webkit-keyframes „mechanizmus sa používa na nastavenie“ točiť “ a „ točiť sa s názvom animácie.
• Ďalej použite „ transformovať 'vlastnosť, ktorá má hodnotu ' točiť sa() “ v „ točiť telo animácie. Táto funkcia otáča prvok pod uhlom „ 180 stupňov “.
• Potom nastavte animáciu, ktorá zväčšuje alebo rozširuje pôvodný prvok o faktor „ 1 “ v oboch “ X “ a „ A “os v “ stupnica telo animácie.

Krok 3: Aplikácia animácie na prvky HTML

V časti CSS vyberte triedu „ animovať “, ktorý je priradený k „ ” a poskytnite nasledujúce vlastnosti CSS:

Popis vlastností použitých vo vyššie uvedenom bloku kódu:

• Najprv nastavte hodnotu „ absolútne “ do CSS “ pozíciu ' nehnuteľnosť. Zosúlaďuje „ img ” prvok podľa animácie.
• Potom zadajte hodnoty „ 60 % “, “ 110 pixelov “ a „ 110 pixelov “ do CSS “ vľavo “, “ šírka “ a „ výška vlastnosti. Tieto vlastnosti sa používajú na nastavenie polohy a veľkosti prvku.
• Potom nastavte hodnotu „ stupnica 3s nekonečná lineárna “ na “ -webkit-animácia ” CSS vlastnosť.
• A „ 3s “ je trvanie tejto animácie, „ nekonečné “ je trvanie animácie a “ lineárne “ je smer animácie.
• Na záver uveďte hodnoty „ spin 2s nekonečné lineárne “ do CSS “ -webkit-animácia ' nehnuteľnosť. Táto vlastnosť pridáva druhú animáciu s názvom „ točiť “na stránke “ img ' element.

Po kompilácii vyššie uvedeného bloku kódu vyzerá animácia takto:

Vyššie uvedený gif ilustruje, že iba „ točiť “ sa prehráva animácia na zacielenom prvku.

Krok 4: Prehrávanie viacerých animácií na prvkoch HTML

Rovnako ako v predchádzajúcom kroku bola na prvok použitá iba jedna animácia. Dôvodom je, že k rovnakému „ -webkit-animácia ' nehnuteľnosť.

Ak chcete vyriešiť tento problém, zabaľte cieľový prvok do iného prvku HTML. Ako „ div “ sa už používa ako obal v prvom kroku, vyberte jeho „ rozpätie “ a aktualizujte kód takto:

Vo vyššie uvedenom kóde:

• Najprv sa „ animovať Trieda ” zostáva rovnaká a odstráni sa z nej iba druhá animácia, ktorá je umiestnená v „ rozpätie ' trieda.
• Potom nastavte polohu pomocou „ pozíciu “ a „ top vlastnosti.

Po vykonaní vyššie uvedeného útržku kódu bude webová stránka teraz vyzerať takto:

Výstup ukazuje, že obe animácie boli aplikované na vybraný prvok HTML súčasne.

Záver

Ak chcete použiť viacero vlastností CSS, zabaľte prvok do prvkov HTML a aplikujte na ne animácie tak, aby každý prvok HTML obsahoval jednu animáciu. Keď vlastnosť child dedí animáciu aplikovanú na nadradený prvok HTML, použije sa viacero animácií bez toho, aby kompilátor spôsobil chyby alebo nejednoznačnosť. To je postup na prehrávanie/pridávanie viac ako jednej CSS animácie súčasne.