Ez a cikk bemutatja a többlépcsős animációk és átmenetek hozzáadásának folyamatát.
Hogyan használjunk többlépcsős animációkat és átmeneteket?
Többlépéses animáció készítéséhez kulcskockák sorozata jön létre. Meghatározza a kiválasztott HTML-elemen végrehajtandó változtatások sorozatát. Minden kulcsképkocka az animáció más-más állapotát jelzi, és a böngésző zökkenőmentesen átállítja az elemet ezen állapotok között. Az átmenetek során adja meg a CSS-tulajdonságok zökkenőmentes változását egy meghatározott időtartamon keresztül a felhasználói interakciók vagy állapotváltozások által.
Nézzünk egy gyakorlati példát a jobb megértés érdekében:
1. példa: Többlépcsős animáció alkalmazása
Ebben a példában egy többlépcsős animáció fog vonatkozni a kiválasztott HTML elemre. Látogassa meg az alábbi bemutatót:
< stílus >
.animationExample {
szélesség: 130 képpont;
magasság: 130 képpont;
háttérszín: erdőzöld;
pozíció: relatív;
animáció: moveAnimate 4s easy-in-out végtelen;
}
< / stílus >
< test >
< div osztály = 'animationExample' >< / div >
< / test >
A fenti kódrészletben:
- Először a „ animációPélda ' van kiválasztva a '
” címke. - Ezután a „ 130 képpont ' vannak hozzárendelve a ' magasság ” és „ szélesség ” tulajdonságait.
- Ezenkívül állítsa be a „ erdő zöld ” és „ relatív ' értékként a ' háttérszín ” és „ pozíció ” tulajdonságok a vizualizáció javítása érdekében.
- Ezt követően használja a „ élénkség ' tulajdonságot, és állítsa egyenlőnek: ' A moveAnimate 4s végtelenül könnyedén be-ki ” animációk alkalmazásához.
- Az érték négy részből áll, az első az egyedi név animáció, a második a befejezés időtartama, a harmadik az animáció típusa, a negyedik pedig az animáció alkalmazásának korlátja.
- Végül hozzon létre egy HTML elemet, és rendelje hozzá a „ animációPélda ” osztályt hozzá.
Most használja a „ kulcskockák 'szabály az egyéni meghatározásához' mozog Animate ' élénkség:
@ mozgat Kulcskockák animálása {0 % {
bal: 0 ;
háttérszín: kék;
}
ötven % {
balra: 200 képpont;
háttérszín: erdőzöld;
transzformáció: forgatás ( 180 fok ) ;
}
100 % {
bal: 0 ;
háttérszín: kék;
}
}
A fenti kódblokkban:
- Először is a „ @keyframes ” blokk jön létre a meghatározandó egyéni animáció nevével együtt.
- Ezután hozzon létre egy blokkot ' 0% ”, amely CSS-stílusokat alkalmaz az animáció elején. És használja a „ háttérszín ” és „ bal ” CSS tulajdonságai.
- Most hozzon létre egy blokkot a következővel: ötven% ” stílushoz az animáció közepette. Ez biztosítja a „ 200 képpont ”, „ erdő zöld ” és „ forgatás (180 fok) ” a „balra”, „háttérszín” és „transzformáció” tulajdonságokra. Ez lehetővé teszi a kiválasztott elem balra forgatását 200 képponttal.
A fenti kódblokk összeállítása után:
A kimenet azt mutatja, hogy a többlépcsős animációt alkalmazták a kiválasztott HTML elemre.
2. példa: Többlépcsős átmenet alkalmazása
A többlépcsős átmenet alkalmazásához a CSS-szelektorok használhatók a „ átmenet ' ingatlan. Látogassa meg az alábbi kódot:
.áttűnés {
átlátszatlanság: 1;
átmenet: átlátszatlanság 1s;
}
.fade:hover {
átlátszatlanság: 0;
}
<
/ stílus>
<
test>
< p osztály = 'áttűnés' > Mutasson rám az átmenet megtekintéséhez. < / p >
< / test >
A fenti kód magyarázata:
- Először is a szokás áttűnés ' osztály van kiválasztva, és az 1 értéket kapja a ' átlátszatlanság ' ingatlan. Állítsa be a ' átlátszatlanság 1s ' hoz ' átmenet ” CSS tulajdonság. Ez beállítja vagy eltávolítja az átlátszatlanságot a „ 1s ”.
- Ezután a „ :lebeg ' választó van hozzárendelve a ' áttűnés ' osztály. Ebben a „ 0 ” az opacitás tulajdonságra van állítva.
- Végül a HTML elem a „
” címke, és a „” osztály áttűnés ” van hozzá csatolva.
Az összeállítási fázis befejezése után a weboldal így néz ki:
A GIF megjeleníti, hogy a kiválasztott HTML-elemre alkalmazták az egyéni elhalványulást.
Következtetés
A többlépcsős animációk és átmenetek életre keltik a HTML weboldalakat mozgás és vizuális effektusok hozzáadásával. Animáció esetén a „ kulcskockák ' az időtartam százalékával együtt használatosak, mint például a ' 0% 'a kezdet,' ötven% ' a közepe, és ' 100% ” az animáció időtartamának vége. Az átmenethez a CSS választó használható a „ átmenet ' osztály. Ez a cikk bemutatja a többlépcsős animációk és átmenetek használatának folyamatát.