Jazyk HTML poskytuje štruktúru webovej stránky a CSS poskytuje návrh a formátovanie tejto aplikácie. Táto kombinácia vám tiež umožňuje pridať animáciu, pretože animované prvky vyzerajú atraktívnejšie v porovnaní so statickými prvkami. Umožňuje tiež prvku postupne meniť svoj štýl.
Tento článok vám ukáže, ako môžeme použiť animáciu na prvky. Takže, začnime!
Čo sú kľúčové snímky animácie CSS?
Aby sme dokončili animáciu, musíme ju naviazať na prvok HTML. Na tento účel použite kľúčové slovo „ @kľúčové snímky “, za ktorým nasleduje názov animácie. Tento komponent určuje začiatok a koniec animácie.
Ako nastaviť kľúčové snímky animácie CSS?
Ak chcete nastaviť kľúčové snímky animácie v CSS, prejdeme si dva príklady.
Príklad 1
Ak chcete nastaviť kľúčové snímky animácie v CSS, vykonajte tieto kroky:
-
- Pridajte s názvom triedy “ hlavný-div “.
- Vnútri divu pridajte ďalší div s názvom triedy “ img-peng “.
- Do tohto divu img-peng pridajte
na umiestnenie obrázka. Táto značka má tri atribúty, „ src ” atribút na poskytnutie cesty k obrázku, “ všetko “ je alternatívny text, ktorý sa pridá, ak sa obrázok nezobrazuje, a znak „ šírka ” na určenie šírky obrázka.
HTML
< div trieda = 'hlavný div' >
< div trieda = 'img-peng' >
< img src = 'images/tučniak.png' všetko = 'tučniak' šírka = '100' >
div >
div >
.main-div {
CSS
šírka: 90 % ;
výška: 90px;
farba pozadia: rgb ( 67 , 66 , 87 ) ;
okraj: 20px automaticky;
výplň: 10px;
}
V CSS je „ .main-div ” sa pridá na prístup k triede div. Vlastnosti, ktoré sa naň vzťahujú, sú vysvetlené nižšie:-
- “ šírka ” hodnota vlastnosti definuje šírku prvku div.
- “ výška Vlastnosť ” sa používa na nastavenie výšky prvku div.
- “ farba pozadia ” aplikuje farbu na pozadie prvku.
- “ marža “ je nastavený ako “ 20px auto “, čo označuje priestor zhora a zdola a auto znamená rovnaký priestor zľava a sprava.
- “ vypchávka ” hodnota vlastnosti je priradená ako 10px, čím sa okolo obsahu prvku aplikuje priestor.
Štýl triedy img-peng
.img-peng {
šírka: 50px;
výška: 100px;
poloha: relatívna;
animácia: triasť;
dĺžka animácie: 2 s;
funkcia časovania animácie: 2 s;
animácia-iterácia-počet: nekonečný;
}
' .img-peng ” sa používa na prístup k triede div uvedenej vo vyššie uvedenom súbore HTML. Tento prvok div má štýl s vlastnosťami uvedenými nižšie:-
- “ šírka Hodnota vlastnosti sa používa na nastavenie šírky prvku.
- “ výška Hodnota vlastnosti sa používa na nastavenie výšky prvku.
- “ pozíciu “vlastnosti je priradená hodnota” príbuzný “, čo znamená, že bude umiestnený vzhľadom na svoju normálnu polohu.
- “ animácie “názov je uvedený ako “ triasť “. Animáciu však môžete pomenovať podľa požiadavky.
- “ trvanie animácie “ predstavuje dobu trvania animácie, ktorá je 2 sekundy.
- “ funkcia animácie-časovania ” má priradenú hodnotu 2s, čo znamená, že za 2 sekundy je animácia dokončená.
- “ animácia-iterácia-počet ” je nastavený ako nekonečný, čo znamená, že táto animácia sa uskutoční v nekonečnom čase.
Definujte @keyframes s kľúčovými slovami do az
@ kľúčové snímky sa trasú {
od {
hore: 50px;
}
do {
margin-bottom: 200px;
}
}
Popis kľúčových snímok animácie nastavených na obrázok je uvedený nižšie:-
- “ @kľúčové snímky sa trasú ” označuje zatrasenie názvu animácie, za ktorým nasleduje kľúčové slovo @keyframes. V rámci tohto pravidla je špecifikované správanie animácie.
- Vo zložených zátvorkách je „ od “ a „ do Kľúčové slová špecifikujú rôzne intervaly na definovanie správania animácie.
- ' top ” má priradenú hodnotu 50px, čo znamená, že animácia začína od 50px od hornej časti obrazovky a pokračuje do 200px v spodnej časti.
V dôsledku toho uvidíte nasledujúci výstup:
Teraz nechajte animáciu správať sa inak v rôznych intervaloch. Ak to chcete urobiť, použite percentá animácie v @keyframes.Zadajte @keyframes s percentami
@ kľúčové snímky sa trasú {
0 % {
vľavo: -50 pixelov ;
}
25 % {
vľavo: 50px;
}
päťdesiat % {
vľavo: -25 pixelov ;
}
75 % {
vľavo: 25px;
}
100 % {
vľavo: 10px;
}
}
Takže popis vyššie uvedeného útržku kódu je uvedený tu:-
- Percentuálne hodnoty 0 %, 25 %, 50 %, 75 % a 100 % predstavujú animáciu v rôznych intervaloch.
- Navyše pri 0 % bude priestor naľavo od obrázka „ -50 pixelov “. Pri 25 % bude priestor vľavo „ 50 pixelov “. Pri 50 % bude priestor vľavo „ -25 pixelov “. Pri 75 % bude ľavé miesto „ 25 pixelov “, a keď sa animácia dokončí (100 %), ľavé miesto bude „ 10 pixelov “.
Vyššie uvedený kód zobrazuje nasledujúcu animáciu:
Zoberme si ďalší príklad, aby sme videli, ako môžeme nastaviť animácie na obrázky.Príklad 2
V HTML pridajte
s názvom triedy “ Hlavná stránka “. Do tohto prvkuumiestnite ďalšie dve značky div s triedami “ oblak1 “ a „ oblak2 “, resp.HTML
< div trieda = 'Hlavná stránka' >
< div trieda = 'oblak1' > div >
< div trieda = 'cloud2' > div >
div >
telo {
CSS
okraj: 0 ;
vypchávka: 0 ;
}
V CSS priradíme elementu body nasledujúce vlastnosti CSS:-
- “ marža ” vlastnosť ako 0 neurčuje žiadnu medzeru okolo prvku.
- “ vypchávka ” vlastnosť s hodnotou 0 neurčuje žiadnu medzeru okolo obsahu prvku.
Štýl hlavnej stránky div
.Hlavná stránka {
obrázok na pozadí: url ( / snímky / vlčia noc.png ) ;
background-repeat: no-repeat;
veľkosť pozadia: obal;
výška: 100vh;
poloha: relatívna;
prepad: skrytý;
}
Tu:-
- “ .Hlavná stránka ” sa používa na prístup k triede div.
- “ obrázok na pozadí “vlastnosti je priradená hodnota” url(/images/wolf-night.png) ” kde images je priečinok, ktorý obsahuje obrázok wolf-night.png.
- “ pozadie-opakovať “vlastnosti je priradená hodnota” bez opakovania , čo znamená, že obrázok sa zobrazí raz.
- “ veľkosť pozadia “ je nastavený ako “ kryt ” na vyplnenie celého prvku div.
- “ výška ” je 100vh, čo je 100% výšky výrezu.
- “ pozíciu ” ako relatívna nastavuje polohu obrázka vzhľadom na jeho aktuálnu polohu.
- “ pretečeniu ” hodnota vlastnosti je nastavená ako skrytá, aby sa skryla časť obrázka, ktorá je príliš veľká na to, aby sa zmestila do kontajnera.
Štýl cloud1 triedy
.oblak1 {
obrázok na pozadí: url ( / snímky / cloud.png ) ;
background-size: include;
background-repeat: no-repeat;
pozícia: absolútna;
hore: 100px;
šírka: 500px;
výška: 300px;
animácia: cloudanimation1;
dĺžka animácie: 70s;
animácia-iterácia-počet: nekonečný;
}
Trieda div cloud1 sa aplikuje s nasledujúcimi vysvetlenými vlastnosťami:-
- “ .oblak1 ” sa používa na prístup k triede div cloud1.
- “ obrázok na pozadí ” vlastnosť je nastavená ako url(/images/cloud.png), kde obrázky sú priečinok obsahujúci obrázok cloud.png.
- “ veľkosť pozadia “ s hodnotou “ obsahujú “ zaisťuje viditeľnosť obrazu.
- “ pozadie-opakovať ” vlastnosť s hodnotou nastavenou ako “ bez opakovania ” zobrazí obrázok ako neopakovaný.
- “ pozíciu ” ako absolútnu polohu obrázka vzhľadom na jeho nadradený prvok.
- “ top vlastnosť nastaví obrázok na 100 pixelov zhora.
- “ šírka ” sa používa na nastavenie šírky prvku div na 500 pixelov.
- “ výška ” sa používa na nastavenie výšky prvku div na 300 pixelov.
- “ animácie ” má priradený názov cloudanimation1.
- “ trvanie animácie “ predstavuje dobu trvania animácie, ktorá je 70 sekúnd.
- “ animácia-iterácia-počet ” má priradenú hodnotu infinite, ktorá bude animáciu opakovať nekonečne krát.
Doteraz sme vlastnosti CSS aplikovali na triedu div main-page a cloud1. Teraz v ďalšej časti naštylizujeme ďalšiu triedu div s názvom cloud2.
Štýl cloud2 triedy
.oblak2 {
obrázok na pozadí: url ( / snímky / cloud.png ) ;
background-size: include;
background-repeat: no-repeat;
pozícia: absolútna;
hore: 50px;
šírka: 200px;
výška: 300px;
animácia: cloudanimation2;
dĺžka animácie: 15s;
animácia-iterácia-počet: nekonečný;
}
Trieda div cloud2 sa aplikuje s vlastnosťami, ktoré sú vysvetlené nižšie:-
- “ .oblak2 “ sa používa na prístup k triede cloud2.
- “ obrázok na pozadí ” vlastnosť je nastavená ako url(/images/cloud.png), kde obrázok je priečinok, ktorý obsahuje obrázok cloud.png.
- “ veľkosť pozadia ” obsahuje hodnotu, ktorá zabezpečuje viditeľnosť obrázka.
- “ pozadie-opakovať ” s hodnotou nastavenou ako no-repeat zobrazí obrázok ako neopakovateľný.
- “ pozíciu ” ako absolútnu polohu obrázka vzhľadom na jeho nadradený prvok.
- “ top vlastnosť nastaví obrázok na 100 pixelov zhora.
- “ šírka Vlastnosť ” sa používa na nastavenie šírky prvku div.
- “ výška Vlastnosť ” sa používa na nastavenie výšky prvku div.
- “ animácie ” má priradený názov cloudanimation2.
- “ trvanie animácie “ predstavuje trvanie animácie.
- “ animácia-iterácia-počet ” má priradenú hodnotu infinite, ktorá bude animáciu opakovať nekonečne krát.
Zadajte @keyframes pre cloudanimation1
@ cloudanimácia kľúčových snímok1 {
do {
vľavo: 0px;
}
od {
vľavo: 100 % ;
}
}
Div cloud1 je spojený s animáciou, ktorá je popísaná nižšie:-
- “ @keyframes cloudanimation1 ” za názvom animácie cloudanimation1 nasleduje kľúčové slovo @keyframes, ktoré sa používa na určenie prechodu.
- Kľúčové slovo @keyframes určuje, ako sa animácia vykonáva od začiatku do konca na obrázkoch v cloude.
- ' do “ a „ od Kľúčové slová určujú, že cloud1 sa presunie zo 100 % na 0 pixelov obrazovky.
Zadajte @keyframes pre cloudanimation2
@ cloudanimácia kľúčových snímok 2 {
0 % {
vľavo: 0 % ;
}
100 % {
vľavo: 100 % ;
}
}
Trieda div cloud2 je spojená s animáciou, ktorá je vysvetlená nižšie:-
- “ @keyframes cloudanimation2 ” predstavuje názov animácie cloudanimation2, za ktorým nasleduje kľúčové slovo @keyframes, ktoré sa používa na špecifikáciu animácie.
- ' 0% “ a „ 100% “ predstavujú začiatok a koniec animácie.
- Pri 0 % animácie by bol oblak vľavo s hodnotou nastavenou na 0 % a postupne sa presunie na 100 % šírky.
Výkon
To je skvelé! Diskutovali sme o tom, ako môžeme úspešne špecifikovať animáciu prvkov pomocou kľúčového slova @keyframes.Záver
CSS nám umožňuje aplikovať štýly na prvky HTML. Animácia v CSS vykonáva prechody z jedného štýlu do druhého. Skladá sa z dvoch komponentov, štýlov animácie a kľúčových snímok. Štýly animácie predstavujú rôzne vlastnosti, ako napríklad ich názov, trvanie animácie, počet iterácií animácie a ďalšie. Zatiaľ čo komponent kľúčová snímka definuje začiatok a koniec animácie. Táto príručka podrobne popisuje, ako nastaviť kľúčové snímky animácie s príkladmi.
- Pridajte