Tento článek ukazuje proces přidávání vícekrokových animací a přechodů.
Jak používat vícekrokové animace a přechody?
Pro vytvoření vícekrokové animace se vygeneruje řada klíčových snímků. Určuje sérii změn, které mají být aplikovány na vybraný prvek HTML. Každý klíčový snímek představuje jiný stav animace a prohlížeč plynule přechází prvek mezi těmito stavy. Při přechodech určete plynulou změnu vlastností CSS po určitou dobu interakcí uživatele nebo změnami stavu.
Pro lepší pochopení si projdeme praktický příklad:
Příklad 1: Použití vícekrokové animace
V tomto příkladu se na vybraný element HTML použije vícekroková animace. Navštivte níže uvedenou ukázku:
< styl >
.animationExample {
šířka: 130px;
výška: 130px;
barva pozadí: lesní zelená;
poloha: relativní;
animace: moveAnimate 4s easy-in-out infinite;
}
< / styl >
< tělo >
< div třída = 'příklad animace' < / div >
< / tělo >
Ve výše uvedeném úryvku kódu:
- Nejprve třída s názvem „ animacePříklad “ je vybráno uvnitř „
” tag. - Dále hodnoty „ 130 pixelů “ jsou přiřazeny k “ výška ' a ' šířka vlastnosti.
- Kromě toho nastavte „ lesní zelená ' a ' relativní “ jako hodnotu pro „ barva pozadí ' a ' pozice ” vlastnosti pro zlepšení vizualizace.
- Poté použijte „ animace ” a nastavte ji na hodnotu “ moveAnimate 4s nekonečně snadné nastupování ” pro použití animací.
- Hodnota se skládá ze čtyř částí, první je vlastní název animace, druhá je doba trvání, třetí je typ animace a čtvrtá je limit, kolikrát se tato animace použije.
- Nakonec vytvořte prvek HTML a přiřaďte „ animacePříklad “třída k tomu.
Nyní použijte „ klíčové snímky „pravidlo pro definování vlastního“ moveAnimate “ animace:
@ moveAnimate klíčové snímky {0 % {
vlevo, odjet: 0 ;
barva pozadí: modrá;
}
padesáti % {
vlevo: 200px;
barva pozadí: lesní zelená;
přeměnit: otočit ( 180 stupňů ) ;
}
100 % {
vlevo, odjet: 0 ;
barva pozadí: modrá;
}
}
Ve výše uvedeném bloku kódu:
- Za prvé, „ @klíčové snímky Vytvoří se blok ” spolu s názvem vlastní animace, která bude definována.
- Dále vytvořte blok s názvem „ 0 % ” který aplikuje CSS styly na začátku animace. A využít „ barva pozadí ' a ' vlevo, odjet Vlastnosti CSS.
- Nyní vytvořte blok s názvem a „ padesáti% ” pro styl uprostřed animace. Poskytuje hodnoty „ 200 pixelů “, “ lesní zelená ' a ' otočení (180 stupňů) ” do vlastností „left“, „background-color“ a „transform“. To umožňuje vybranému prvku otočit doleva o 200 pixelů.
Po kompilaci výše uvedeného bloku kódu:
Výstup ukazuje, že vícekroková animace byla aplikována na vybraný prvek HTML.
Příklad 2: Použití vícekrokového přechodu
Chcete-li použít vícekrokový přechod, lze selektory CSS použít spolu s „ přechod ' vlastnictví. Navštivte níže uvedený kód:
.slábnout {
krytí: 1;
přechod: neprůhlednost 1s;
}
.fade:hover {
neprůhlednost: 0;
}
<
/ styl>
<
tělo>
< p třída = 'slábnout' > Přechod zobrazíte umístěním ukazatele myši na mě. < / p >
< / tělo >
Vysvětlení výše uvedeného kódu:
- Za prvé, zvyk „ slábnout “ je vybrána třída a hodnota 1 je poskytnuta „ neprůhlednost ' vlastnictví. Nastavte také hodnotu „ neprůhlednost 1s “ na “ přechod ” CSS vlastnost. Tím se nastaví nebo odstraní neprůhlednost v době trvání „ 1s “.
- Dále, „ :vznášet se Volič “ je přiřazen k “ slábnout “třída. V něm hodnota „ 0 ” je nastavena na vlastnost opacity.
- Nakonec je prvek HTML vytvořen uvnitř „ značka “ a třída “ slábnout “ je k němu připojeno.
Po skončení fáze kompilace vypadá webová stránka takto:
GIF zobrazuje, že na vybraný prvek HTML byl použit vlastní přechod zeslabování.
Závěr
Vícekrokové animace a přechody oživují webové stránky HTML přidáním pohybových a vizuálních efektů. Pro animaci „ klíčové snímky “ se používají spolu s procentem trvání jako “ 0 % “ je začátek, “ padesáti% “ je střed a “ 100% “ je konec trvání animace. Pro přechod lze selektor CSS použít spolu s „ přechod “třída. Tento článek demonstroval proces použití vícekrokových animací a přechodů.