Jazyk HTML poskytuje strukturu webové stránky a CSS poskytuje návrh a formátování této aplikace. Tato kombinace také umožňuje přidat animaci, protože animované prvky vypadají atraktivněji ve srovnání se statickými prvky. Umožňuje také prvku postupně měnit svůj styl.
Tento článek vás provede tím, jak můžeme použít animaci na prvky. Takže, začněme!
Co jsou klíčové snímky animace CSS?
Aby byla animace hotová, musíme ji svázat s elementem HTML. Pro tento účel použijte klíčové slovo „ @klíčové snímky “ následovaný názvem animace. Tato komponenta určuje začátek a konec animace.
Jak nastavit klíčové snímky animace CSS?
Pro nastavení klíčových snímků animace v CSS si projdeme dva příklady.
Příklad 1
Chcete-li nastavit klíčové snímky animace v CSS, proveďte následující kroky:
-
- Přidejte s názvem třídy „ hlavní-div “.
- Uvnitř div přidejte další div s názvem třídy “ img-peng “.
- Uvnitř tohoto divu img-peng přidejte
pro umístění obrázku. Tato značka má tři atributy, „ src 'atribut k poskytnutí cesty k obrázku', ' všechno “ je alternativní text, který se přidá, pokud se obrázek nezobrazí, a šířka Atribut ” udává šířku obrázku.
HTML
< div třída = 'hlavní div' >
< div třída = 'img-peng' >
< img src = 'images/penguin.png' všechno = 'tučňák' šířka = '100' >
div >
div >
.main-div {
CSS
šířka: 90 % ;
výška: 90px;
barva pozadí: rgb ( 67 , 66 , 87 ) ;
okraj: 20px auto;
odsazení: 10px;
}
V CSS je „ .main-div ” je přidán pro přístup ke třídě div. Vlastnosti, které se na něj vztahují, jsou vysvětleny níže:-
- “ šířka ” hodnota vlastnosti definuje šířku prvku div.
- “ výška ” vlastnost se používá k nastavení výšky prvku div.
- “ barva pozadí Vlastnost ” aplikuje barvu na pozadí prvku.
- “ okraj “ je nastaveno jako “ 20px auto “, což označuje prostor shora a zdola a auto znamená stejný prostor zleva a zprava.
- “ vycpávka ” hodnota vlastnosti je přiřazena jako 10px, která aplikuje prostor kolem obsahu prvku.
Styl třídy img-peng
.img-peng {
šířka: 50px;
výška: 100px;
poloha: relativní;
animace: chvění;
délka animace: 2s;
funkce časování animace: 2s;
animace-iterace-počet: nekonečno;
}
' .img-peng ” se používá pro přístup ke třídě div, uvedené ve výše uvedeném souboru HTML. Tento prvek div má styl s vlastnostmi uvedenými níže:-
- “ šířka ” hodnota vlastnosti se používá k nastavení šířky prvku.
- “ výška ” hodnota vlastnosti se používá k nastavení výšky prvku.
- “ pozice 'vlastnosti je přiřazena hodnota' relativní “, což znamená, že bude umístěn vzhledem ke své normální poloze.
- “ animace “ název je uveden jako “ otřást “. Animaci však můžete pojmenovat podle požadavku.
- “ délka animace “ představuje dobu trvání animace, která je 2 sekundy.
- “ funkce animace-časování ” je přiřazena hodnota 2s, což znamená, že za 2 sekundy je animace dokončena.
- “ animace-iterace-počet “ je nastaven jako nekonečný, což znamená, že tato animace bude probíhat v nekonečném čase.
Definujte @klíčové snímky pomocí klíčových slov do az
@ klíčové snímky se třesou {
z {
nahoře: 50px;
}
na {
margin-bottom: 200px;
}
}
Popis klíčových snímků animace nastavených na obrázek je uveden níže:-
- “ @keyframes se třese ” odkazuje na protřepávání názvu animace následované klíčovým slovem @klíčové snímky. V rámci tohoto pravidla je specifikováno chování animace.
- Uvnitř složených závorek je „ z ' a ' na Klíčová slova ” určují různé intervaly pro definování chování animace.
- ' horní ” je přiřazena hodnota 50px, což znamená, že animace začíná od 50px od horní části obrazovky a pokračuje do 200px dole.
V důsledku toho uvidíte následující výstup:
Nyní nechte animaci chovat se jinak v různých intervalech. K tomu použijte procenta animace v @klíčových snímcích.Zadejte @klíčové snímky s procenty
@ klíčové snímky se třesou {
0 % {
vlevo, odjet: -50 pixelů ;
}
25 % {
vlevo: 50px;
}
padesáti % {
vlevo, odjet: -25 pixelů ;
}
75 % {
vlevo: 25px;
}
100 % {
vlevo: 10px;
}
}
Popis výše uvedeného fragmentu kódu je tedy uveden zde:-
- Procentuální hodnoty 0 %, 25 %, 50 %, 75 % a 100 % představují animaci v různých intervalech.
- Navíc při 0 % bude prostor na levé straně obrázku „ -50 pixelů “. Při 25 % bude prostor nalevo „ 50 pixelů “. Při 50 % bude prostor nalevo „ -25 pixelů “. Při 75 % bude levé místo „ 25 pixelů “ a po dokončení animace (100 %) bude levé místo „ 10px “.
Výše uvedený kód zobrazuje následující animaci:
Vezměme si další příklad, abychom viděli, jak můžeme na obrázky nastavit animace.Příklad 2
V HTML přidejte
s názvem třídy “ hlavní strana “. Uvnitř tohoto prvkuumístěte další dvě značky div s třídami “ mrak1 ' a ' cloud2 “, resp.HTML
< div třída = 'hlavní strana' >
< div třída = 'cloud1' > div >
< div třída = 'cloud2' > div >
div >
tělo {
CSS
okraj: 0 ;
vycpávka: 0 ;
}
V CSS přiřadíme elementu body následující vlastnosti CSS:-
- “ okraj ” vlastnost jako 0 neurčuje žádné mezery kolem prvku.
- “ vycpávka ” vlastnost s hodnotou 0 neurčuje žádné mezery kolem obsahu prvku.
Styl hlavní stránky div
.hlavní strana {
obrázek na pozadí: url ( / snímky / vlčí noc.png ) ;
background-repeat: no-repeat;
background-size: cover;
výška: 100vh;
poloha: relativní;
přepad: skrytý;
}
Tady:-
- “ .hlavní strana ” se používá pro přístup ke třídě div.
- “ obrázek na pozadí 'vlastnosti je přiřazena hodnota' url(/images/wolf-night.png) ” kde images je složka obsahující obrázek wolf-night.png.
- “ pozadí-opakování 'vlastnosti je přiřazena hodnota' ne-opakovat , což znamená, že obrázek se zobrazí jednou.
- “ velikost pozadí “ je nastaveno jako “ Pokrýt ” k vyplnění celého prvku div.
- “ výška “ je 100vh, což je 100% výšky výřezu.
- “ pozice ” jako relativní nastavuje polohu obrazu vzhledem k jeho aktuální poloze.
- “ přetékat Hodnota vlastnosti je nastavena jako skrytá, aby se skryla část obrázku, která je příliš velká na to, aby se vešla do kontejneru.
Styl cloud1 třídy
.mrak1 {
obrázek na pozadí: url ( / snímky / cloud.png ) ;
background-size: obsahovat;
background-repeat: no-repeat;
pozice: absolutní;
nahoře: 100px;
šířka: 500px;
výška: 300px;
animace: cloudanimation1;
délka animace: 70s;
animace-iterace-počet: nekonečno;
}
Třída div cloud1 se aplikuje s následujícími vysvětlenými vlastnostmi:-
- “ .mrak1 ” se používá pro přístup k div class cloud1.
- “ obrázek na pozadí ” vlastnost je nastavena jako url(/images/cloud.png), kde obrázky jsou složka obsahující obrázek cloud.png.
- “ velikost pozadí “ s hodnotou “ obsahovat “ zajišťuje viditelnost obrázku.
- “ pozadí-opakování ” vlastnost s hodnotou nastavenou jako “ ne-opakovat ” zobrazí obrázek jako neopakovaný.
- “ pozice ” jako absolutní pozice obrázku vzhledem k jeho rodičovskému prvku.
- “ horní Vlastnost ” nastaví obrázek na 100 pixelů shora.
- “ šířka Vlastnost ” se používá k nastavení šířky prvku div na 500 pixelů.
- “ výška ” vlastnost se používá k nastavení výšky prvku div na 300 pixelů.
- “ animace ” má přiřazen název cloudanimation1.
- “ délka animace “ představuje dobu trvání animace, která je 70 sekund.
- “ animace-iterace-počet ” je přiřazena hodnota infinite, která bude animaci opakovat nekonečněkrát.
Dosud jsme aplikovali vlastnosti CSS na třídu div main-page a cloud1. Nyní v další části nastavíme styl další třídy div s názvem cloud2.
Styl cloud2 třídy
.mrak2 {
obrázek na pozadí: url ( / snímky / cloud.png ) ;
background-size: obsahovat;
background-repeat: no-repeat;
pozice: absolutní;
nahoře: 50px;
šířka: 200px;
výška: 300px;
animace: cloudanimation2;
délka animace: 15s;
animace-iterace-počet: nekonečno;
}
Třída div cloud2 se použije s vlastnostmi, které jsou vysvětleny níže:-
- “ .mrak2 ” se používá pro přístup ke třídě cloud2.
- “ obrázek na pozadí ” vlastnost je nastavena jako url(/images/cloud.png), kde obrázek je složka obsahující obrázek cloud.png.
- “ velikost pozadí ” obsahuje hodnotu, která zajišťuje viditelnost obrázku.
- “ pozadí-opakování ” vlastnost s hodnotou nastavenou jako no-repeat zobrazí obrázek jako neopakovatelný.
- “ pozice ” jako absolutní pozice obrázku vzhledem k jeho rodičovskému prvku.
- “ horní Vlastnost ” nastaví obrázek na 100 pixelů shora.
- “ šířka Vlastnost ” se používá k nastavení šířky prvku div.
- “ výška Vlastnost ” se používá k nastavení výšky prvku div.
- “ animace ” má přiřazen název cloudanimation2.
- “ délka animace “ představuje dobu trvání animace.
- “ animace-iterace-počet ” je přiřazena hodnota infinite, která bude animaci opakovat nekonečněkrát.
Zadejte @keyframes pro cloudanimation1
@ cloudanimace klíčových snímků1 {
na {
vlevo: 0px;
}
z {
vlevo, odjet: 100 % ;
}
}
Div cloud1 je svázán s animací, která je popsána níže:-
- “ @keyframes cloudanimation1 ” za názvem animace cloudanimation1 následuje klíčové slovo @keyframes, které se používá k určení přechodu.
- Klíčové slovo @keyframes určuje, jak se animace provádí od začátku do konce na obrázcích v cloudu.
- ' na ' a ' z ” klíčová slova určují, že se cloud1 přesune ze 100 % na 0 pixelů obrazovky.
Zadejte @keyframes pro cloudanimation2
@ cloudanimace klíčových snímků 2 {
0 % {
vlevo, odjet: 0 % ;
}
100 % {
vlevo, odjet: 100 % ;
}
}
Třída div cloud2 je spojena s animací, která je vysvětlena níže:-
- “ @keyframes cloudanimation2 ” představuje název animace cloudanimation2 následovaný klíčovým slovem @keyframes, které se používá k určení animace.
- ' 0 % ' a ' 100% ” představují začátek a konec animace.
- Při 0 % animace by byl mrak vlevo s hodnotou nastavenou na 0 % a postupně se přesune na 100 % šířky.
Výstup
To je hustý! Diskutovali jsme o tom, jak můžeme úspěšně specifikovat animaci prvků pomocí klíčového slova @keyframes.Závěr
CSS nám umožňuje aplikovat styly na prvky HTML. Animace v CSS provádí přechody z jednoho stylu do druhého. Skládá se ze dvou složek, stylů animace a klíčových snímků. Styly animace představují různé vlastnosti, jako je jejich název, trvání animace, počet opakování animace a další. Zatímco komponenta klíčového snímku definuje začátek a konec animace. Tato příručka podrobně popisuje, jak nastavit klíčové snímky animace s příklady.
- Přidejte