Ako vytvárať animácie kľúčových snímok CSS

CSS dáva vývojárom možnosť oživiť svoje webové stránky pomocou animácie kľúčových snímok.

CSS animácia sa dosahuje zmenou počiatočného stavu prvku HTML prostredníctvom jeho rôznych vlastností. Niektoré všeobecné vlastnosti CSS, ktoré je možné animovať, zahŕňajú:

ako vytvárať fotografické koláže na facebooku

Šírka
Výška
Pozícia
Farba
Nepriehľadnosť

Tieto všeobecné vlastnosti CSS manipulujú konkrétne prvky CSS, aby vytvorili požadovaný výsledok. Ak ste niekedy na webovej stránke narazili na animovaný prvok, je pravdepodobné, že bol prvok animovaný pomocou animácie kľúčových snímok.

Čo je prvok kľúčových snímok?

The prvok kľúčových snímok môže byť použitý na jednom alebo viacerých prvkoch HTML, ku ktorým má prístup. Identifikuje konkrétny bod v stave prvku a určuje vzhľad, akým tento prvok v súčasnosti musí mať.

Môže sa to zdať veľa stráviteľné, ale v skutočnosti je to celkom jednoduché. The prvok kľúčových snímok má veľmi jednoduchú štruktúru, ktorú je možné ľahko pochopiť a prispôsobiť tak, aby vyhovovala všetkým požiadavkám na animáciu.

Príklad štruktúry kľúčových snímok

  
@keyframes identifier {  
from{  
/* where you would like the animation to start from. */  
}  
to{  
/* where you would like the animation to end up */  
}  
}

Povedzme, že chcete animovať zelené obdĺžnikové tlačidlo tak, že ho zmeníte na modré okrúhle tlačidlo.

V rámci parametrov od vyššie uvedenú časť, budete musieť umiestniť všetky štýly potrebné na to, aby prvok vyzeral ako zelené obdĺžnikové tlačidlo, potom do do sekcii, umiestnite všetky požiadavky na štýl, aby ste toto tlačidlo premenili na modré okrúhle tlačidlo.

Ak premýšľate, neznie to príliš ako animácia. Je to preto, že kľúčový komponent celého tohto procesu ešte len predstavíme --- tento komponent je vlastnosťou animácie.

Vlastnosť animácie

The vlastnosť animácie má súbor rôznych čiastkových vlastností; tieto sa používajú v kombinácii so štruktúrou kľúčových snímok vyššie na animáciu požadovaného prvku HTML.

Na to, aby ste vo svojich projektoch dosiahli animáciu, však potrebujete vedieť iba päť z týchto čiastkových vlastností a hodnoty, ktoré sú s nimi spojené. Tieto vlastnosti sú známe ako:

Názov animácie
Trvanie animácie
Funkcia načasovania animácie
Oneskorenie animácie
Počet animácií-iterácií

Použitie animácie na webovej stránke

Podľa vyššie uvedeného scenára je cieľom vytvoriť animované tlačidlo.

Príklad animácie tlačidla

  
  
  
  
  
  
Animation  
  
/* styling the button */  
.btn{  
color:white;  
border: none;  
font-size: 20px;  
width: 100px;  
height: 40px;  
padding: 10px 20px;  
/* animating the button */  
animation-name: clickButton;  
animation-duration: 5s;  
animation-delay: 4s;  
animation-iteration-count:infinite;  
animation-timing-function: ease-in-out;  
}  
/* styling the button states in the animation */  
@keyframes clickButton {  
from{  
background-color: springgreen;  
}  
to{  
border-radius: 30px;  
background: blue;  
}  
}  
  
  
  
  
Click!

Animačná časť vyššie uvedeného kódu obsahuje päť čiastkových vlastností, ktoré boli uvedené vyššie. Každá vlastnosť má veľmi odlišnú funkciu a spoločne pracujú na animácii akéhokoľvek prvku HTML, na ktorý sú zamerané.

Súvisiace: Ako zacieliť časť webovej stránky pomocou selektorov CSS

Vlastnosť názvu animácie

Táto vlastnosť je najdôležitejšou vlastnosťou v zozname. Bez vlastnosť názvu animácie , nemali by ste žiadny identifikátor, ktorý by ste mohli použiť v minulosti prvok kľúčových snímok , čím sa stane všetok kód v rámci jeho parametrov zbytočný.

Ak ste zabudli zahrnúť jednu alebo dve ďalšie čiastkové vlastnosti, stále môžete mať celkom slušnú animáciu. Ak ste však zabudli vlastnosť názvu animácie nemali by ste žiadnu animáciu.

Vlastnosť trvania animácie

Táto vlastnosť sa používa na definovanie času, ktorý by mal animovaný prvok trvať pri prechode z jedného stavu do druhého.

Vo vyššie uvedenom príklade vlastnosť trvania animácie je nastavená na 5 sekúnd (5 s), takže zelené obdĺžnikové tlačidlo bude mať celkom 5 sekúnd, kým sa úplne zmení na modré okrúhle tlačidlo.

Vlastnosť oneskorenia animácie

Táto vlastnosť je dôležitá z jedného dôvodu; načítanie niektorých webových stránok môže trvať niekoľko sekúnd (z dôvodu niekoľkých rôznych faktorov). Takže vlastnosť oneskorenia animácie zabraňuje okamžitému spusteniu animácie v prípade, že sa načítanie webovej stránky nejaký čas trvá.

Vo vyššie uvedenom príklade vlastnosť oneskorenia animácie je nastavená na 4 s, čo znamená, že animácia sa nespustí skôr ako 4 sekundy po návšteve webovej stránky (čo webovej stránke poskytne dostatok času na načítanie pred spustením animácie).

Vlastnosť Počet animácií-iterácií

Táto vlastnosť uvádza, koľkokrát by sa mal animovaný prvok prepínať z jedného stavu do druhého. The vlastnosť počet animácií-iterácií má hodnoty, ktoré sú slová a čísla. Číselná hodnota môže byť čokoľvek od 1 vyššie, pričom slovná hodnota je zvyčajne nekonečný .

Vo vyššie uvedenom príklade hodnota počtu animácií-iterácií je nastavený na nekonečný , čo znamená, že pokiaľ je webová stránka hore, vlastnosť tlačidla sa bude nepretržite animovať z jedného stavu do druhého.

Vlastnosť funkcie časovania animácie

Táto vlastnosť určuje pohyb animovaného prvku pri prechode z jedného stavu do druhého. The vlastnosť funkcie animácie-načasovania je obvykle priradená jedna z troch hodnôt jednoduchosti.

Jednoduché nastupovanie
Uvoľnenie
Jednoduché nastupovanie

The hodnota easy-in-out sa používa vyššie; tým sa pomaly prechádza animácia z jedného stavu do druhého. Ak je cieľom vytvoriť pomalý prechod, keď sa tlačidlo transformuje zo zeleného obdĺžnika na modrý kruh, použili by ste hodnota uľahčenia . Ak by ste chceli iba pomalý prechod v opačnom smere, použili by ste hodnota uľahčenia .

Zníženie nášho kódexu

Vo väčšine prípadov sa skrátenie dĺžky programu považuje za praktický prístup. Je to hlavne preto, že menej riadkov kódu znižuje pravdepodobnosť, že chyby zostanú vo vašich programoch bez povšimnutia.

Vyššie uvedený kód môže byť zmenšený o štyri riadky. To sa dá dosiahnuť jednoduchým použitím vlastnosti animácie bez toho, aby sa explicitne identifikovali všetky jej čiastkové vlastnosti.

Zníženie kódu pre príklad animácie tlačidiel

  
  
  
  
  
  
Animation  
  
/* styling the button */  
.btn{  
color: white;  
border: none;  
font-size: 20px;  
width: 100px;  
height: 40px;  
padding: 10px 20px;  
/* animating the button */  
animation: clickButton 5s ease-in-out 4s infinite;  
}  
/* styling the button states in the animation */  
@keyframes clickButton {  
from{  
background-color: springgreen;  
}  
to{  
border-radius: 30px;  
background: blue;  
}  
}  
  
  
  

				
				
				Kategórie				 Programovanie