Jak hrát více CSS animací současně?

Tento článek demonstruje praktickou ukázku přehrávání/přidání více animací CSS současně.

Jak hrát více CSS animací současně?

Aplikací více CSS animací současně mohou vývojáři snadno vytvořit poutavější rozhraní. Chcete-li přehrávat mnoho animací CSS současně, dejte každé z nich jedinečný název a použijte tyto názvy na stejné nebo samostatné komponenty na stránce.

Chcete-li přehrát/přidat více než jednu animaci současně, postupujte podle níže uvedeného postupu.

Krok 1: Vytvoření struktury

Nejprve vytvořte element HTML, ve kterém se v následujících krocích použijí animace. Například se vloží obrázek:

Ve výše uvedeném úryvku kódu:

• Nejprve je cesta obrázku nastavena na „ src ' atribut.
• Dále hodnota „ 100 pixelů ” je poskytnuta vlastnostem CSS „width“ a „height“.
• Nastavte také hodnotu „ animovat “ na “ třída ' atribut.

Krok 2: Nastavení animací

' klíčové snímky ” se používají k vytváření vlastních animací podle potřeby webové stránky. V níže uvedeném úryvku kódu jsou například vytvořeny dvě animace:

Ve výše uvedeném úryvku kódu:

• Za prvé, „ @-webkit-keyframes „mechanismus se používá k nastavení“ roztočit ' a ' točit se “ pojmenované animace.
• Dále použijte „ přeměnit vlastnost, která má hodnotu „ točit se() “ v „ roztočit “tělo animace. Tato funkce otočí prvek pod úhlem „ 180 stupňů “.
• Poté nastavte animaci, která zvětší nebo prodlouží původní prvek o faktor „ 1 “ v obou “ X ' a ' A “osa v “ měřítko “tělo animace.

Krok 3: Použití animace na prvky HTML

Uvnitř části CSS vyberte třídu „ animovat “, který je přiřazen k „ ” a poskytněte následující vlastnosti CSS:

Popis vlastností použitých ve výše uvedeném bloku kódu:

• Nejprve nastavte hodnotu „ absolutní “ do CSS “ pozice ' vlastnictví. Zarovnává „ img ” prvek podle animace.
• Poté zadejte hodnoty „ 60 % “, “ 110 pixelů ' a ' 110 pixelů “ do CSS “ vlevo, odjet “, “ šířka ' a ' výška vlastnosti. Tyto vlastnosti se používají k nastavení polohy a velikosti prvku.
• Poté nastavte hodnotu „ stupnice 3s nekonečné lineární “ na “ -webkit-animace ” CSS vlastnost.
• A „ 3s “ je doba trvání této animace, „ nekonečný “ je doba trvání animace a „ lineární “ je směr animace.
• Nakonec uveďte hodnoty „ spin 2s nekonečně lineární “ do CSS “ -webkit-animace ' vlastnictví. Tato vlastnost přidá druhou animaci s názvem „ roztočit ' na ' img prvek.

Po kompilaci výše uvedeného bloku kódu vypadá animace takto:

Výše uvedený gif ilustruje, že pouze „ roztočit Na cílovém prvku se přehrává animace.

Krok 4: Přehrávání více animací na prvcích HTML

Stejně jako ve výše uvedeném kroku byla na prvek použita pouze jedna animace. Je to proto, že více hodnot bylo přiřazeno stejnému „ -webkit-animace ' vlastnictví.

Chcete-li tento problém vyřešit, obalte cílový prvek jiným prvkem HTML. Jako „ div “ se již používá jako obal v prvním kroku, vyberte jeho „ rozpětí “ a aktualizujte kód takto:

Ve výše uvedeném kódu:

• Nejprve se „ animovat ” třída zůstává stejná a je z ní odstraněna pouze druhá animace, která je umístěna v “ rozpětí “třída.
• Poté nastavte polohu pomocí „ pozice ' a ' horní vlastnosti.

Po provedení výše uvedeného fragmentu kódu nyní webová stránka vypadá takto:

Výstup ukazuje, že obě animace byly aplikovány na vybraný element HTML současně.

Závěr

Chcete-li použít více vlastností CSS, obalte prvek prvky HTML a aplikujte na ně animace tak, aby každý prvek HTML obsahoval jedinou animaci. Protože vlastnost child zdědí animaci aplikovanou na nadřazený prvek HTML, použije se více animací, aniž by to způsobilo chyby nebo nejednoznačnost kompilátoru. To je postup pro přehrávání/přidání více než jedné CSS animace současně.