Hogyan játszhatunk le több CSS-animációt egyszerre?

Ez a cikk egy gyakorlati bemutatót mutat be több CSS-animáció egyidejű lejátszására/adására.

Hogyan játszhatunk le több CSS-animációt egyszerre?

Több CSS-animáció egyidejű alkalmazásával a fejlesztők könnyedén létrehozhatnak vonzóbb felületeket. Ha több CSS-animációt szeretne lejátszani egyszerre, adjon mindegyiknek egyedi nevet, és alkalmazza ezeket a neveket az oldalon lévő azonos vagy különálló összetevőkre.

Egynél több animáció egyidejű lejátszásához/hozzáadásához kövesse az alábbi eljárást.

1. lépés: Struktúra létrehozása

Először hozzon létre egy HTML-elemet, amelyben az animációkat a következő lépésekben alkalmazza. Például a kép be lesz illesztve:

A fenti kódrészletben:

• Először a kép elérési útja a „ src ' tulajdonság.
• Ezután a „ 100 képpont ” van biztosítva a CSS „width” és „height” tulajdonságaihoz.
• Állítsa be a ' élő ' hoz ' osztály ' tulajdonság.

2. lépés: Animációk beállítása

A ' kulcskockák ” segítségével egyedi animációkat készíthetünk a weboldal igénye szerint. Például két animáció jön létre az alábbi kódrészletben:

A fenti kódrészletben:

• Először is a „ @-webkit-keyframes 'mechanizmust használnak a beállításhoz' spin ” és „ forog ” nevű animációk.
• Ezután használja a „ átalakítani ' ingatlan, amelynek értéke ' forog() ' ban,-ben ' spin ” animációs test. Ez a funkció '' szögben forgatja el az elemet 180 fok ”.
• Ezután állítsa be azt az animációt, amely növeli vagy kiterjeszti az eredeti elemet a következő tényezővel: 1 ' mind a ' x ” és „ ÉS ' tengely a ' skála ” animációs test.

3. lépés: Animáció alkalmazása HTML-elemeken

A CSS részen belül válassza ki az osztályt ' élő ', amely a ' ” címkét, és adja meg a következő CSS-tulajdonságokat:

A fenti kódblokkban használt tulajdonságok leírása:

• Először állítsa be a ' abszolút 'a CSS-hez' pozíció ' ingatlan. Igazítja a „ img ” elemet az animáció szerint.
• Ezután adja meg a „ 60% ”, „ 110 képpont ” és „ 110 képpont 'a CSS-hez' bal ”, „ szélesség ” és „ magasság ” tulajdonságait. Ezeket a tulajdonságokat egy elem helyzetének és méretének beállítására használják.
• Ezután állítsa be a „ skála 3s végtelen lineáris ' hoz ' -webkit-animáció ” CSS tulajdonság.
• És a ' 3s ' az animáció időtartama, a ' végtelen ' az animáció időtartama, a ' lineáris ” – az animáció iránya.
• A végén adja meg a „ spin 2s végtelen lineáris 'a CSS-hez' -webkit-animáció ' ingatlan. Ez a tulajdonság hozzáadja a második animációt ' spin ' a ' img ” elemet.

A fenti kódblokk összeállítása után az animáció így néz ki:

A fenti gif azt mutatja, hogy csak ' spin ” animáció játszik le a megcélzott elemen.

4. lépés: Több animáció lejátszása HTML-elemeken

A fenti lépéshez hasonlóan csak egy animációt alkalmaztak az elemre. Ennek az az oka, hogy több értéket rendeltek ugyanahhoz ' -webkit-animáció ' ingatlan.

A probléma megoldásához csomagolja be a célelemet egy másik HTML-elemmel. Ahogy a „ div ' már az első lépésben burkolóként használatos, válassza ki a ' span ', és frissítse a kódot, például:

A fenti kódban:

• Eleinte a „ élő ' osztály ugyanaz marad, és csak a második animációt távolítják el belőle, amely a ' span ' osztály.
• Ezután állítsa be a pozíciót a „ pozíció ” és „ tetejére ” tulajdonságait.

A fenti kódrészlet végrehajtása után a weboldal így néz ki:

A kimenet azt mutatja, hogy mindkét animációt egyszerre alkalmazták a kiválasztott HTML elemre.

Következtetés

Több CSS-tulajdonság alkalmazásához csomagolja be az elemet HTML-elemekkel, és alkalmazzon hozzájuk animációkat úgy, hogy minden HTML-elem egyetlen animációt tartalmazzon. Ahogy az utódtulajdonság örökli a szülő HTML-elemen alkalmazott animációt, több animáció is alkalmazásra kerül anélkül, hogy hibákat vagy kétértelműséget okozna a fordító számára. Ez az eljárás egynél több CSS-animáció egyidejű lejátszásához/adásához.