Kako ustvariti animacije ključnih sličic CSS

CSS daje razvijalcem možnost, da oživijo svoje spletne strani z animacijo ključnih okvirjev.

Animacijo CSS dosežemo s spreminjanjem začetnega stanja elementa HTML z različnimi lastnostmi. Nekatere splošne lastnosti CSS, ki jih je mogoče animirati, vključujejo:

kako dodati vrstice v word

Premer
Višina
Položaj
Barva
Motnost

S temi splošnimi lastnostmi CSS upravljajo posebni elementi CSS, da ustvarijo želeni rezultat. Če ste na spletni strani kdaj naleteli na animirani element, obstaja velika verjetnost, da je bil element animiran z uporabo animacije ključnih sličic.

Kaj je element ključnih okvirjev?

The element ključnih okvirjev se lahko uporablja na enem ali več elementih HTML, do katerih ima dostop. Opredeljuje določeno točko v stanju elementa in narekuje videz, ki ga mora imeti ta element v tem trenutku.

To se morda sliši kot veliko za prebavo, vendar je pravzaprav precej preprosto. The element ključnih okvirjev ima precej preprosto strukturo, ki jo je mogoče enostavno razumeti in prilagoditi, da ustreza vsem zahtevam glede animacije.

Primer strukture ključnih okvirjev

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

Recimo, da želite animirati zeleni pravokotni gumb tako, da ga spremenite v modri okrogli gumb.

V okviru parametrov od zgornjem razdelku boste morali postaviti vse potrebne sloge, da bo element videti kot zeleni pravokotni gumb, nato pa v do razdelku, boste postavili vse zahteve za oblikovanje, da ta gumb spremenite v modri okrogli gumb.

Če razmišljate, to ne zveni preveč kot animacija. No, to je zato, ker ključna komponenta celotnega tega procesa še ni uvedena --- ta komponenta je lastnost animacije.

Lastnost animacije

The lastnost animacije ima nabor različnih podmoči; ti se uporabljajo v kombinaciji z zgornjo strukturo ključnih okvirjev za animacijo želenega elementa HTML.

Za dosego animacije v svojih projektih pa morate poznati le pet teh podmoči in vrednosti, ki so z njimi povezane. Te lastnosti so znane kot:

Ime animacije
Trajanje animacije
Funkcija merjenja časa animacije
Animacija-zamuda
Število ponovitev animacije

Uporaba animacije na spletni strani

Z uporabo zgornjega scenarija je cilj ustvariti animirani gumb.

Primer animacije gumbov

  
  
  
  
  
  
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!

Odsek animacije zgornje kode vsebuje pet podmoči, ki so bile omenjene prej. Vsaka lastnost ima zelo različno funkcijo in skupaj si prizadevata animirati kateri koli element HTML, na katerega sta ciljno usmerjena.

Povezano: Kako ciljati na del spletne strani z izbirniki CSS

Lastnost imena animacije

Ta lastnost je najpomembnejša lastnost na seznamu. Brez lastnost imena animacije , ne bi imeli nobenega identifikatorja za element ključnih okvirjev , zaradi česar je vsa koda v okviru njenih parametrov neuporabna.

Če ste pozabili vključiti eno ali dve od drugih podmoči, imate morda še vedno precej spodobno animacijo. Če pa ste pozabili lastnost imena animacije ne bi imeli animacije.

Lastnost trajanja animacije

Ta lastnost se uporablja za določanje časa, ki bi ga animirani element potreboval pri prehodu iz enega stanja v drugega.

V zgornjem primeru je lastnost trajanja animacije je nastavljen na 5 sekund (5s), zato bo imel zeleni pravokotni gumb skupaj 5 sekund, preden v celoti postane modri okrogli gumb.

Lastnost Animation-delay

Ta lastnost je pomembna iz enega razloga; nekatere spletne strani se lahko naložijo v nekaj sekundah (zaradi več različnih dejavnikov). Torej lastnost animacije-zakasnitve preprečuje takojšen zagon animacije v primeru, da spletna stran traja nekaj časa za nalaganje.

V zgornjem primeru je lastnost animacije-zakasnitve je nastavljeno na 4s, kar pomeni, da se animacija ne bo začela šele 4 sekunde po obisku spletne strani (kar daje spletni strani dovolj časa, da se naloži, preden se animacija začne).

Lastnost count-iteration-count

Ta lastnost navaja, kolikokrat naj animirani element preide iz enega stanja v drugega. The lastnost count-iteration-count ima vrednosti, ki so besede in številke. Vrednost števila je lahko od 1 navzgor, medtem ko je vrednost besede običajno neskončno .

V zgornjem primeru je vrednost animacije-iteracije-štetja je nastavljeno na neskončno , kar pomeni, da se bo lastnost gumba, dokler je spletna stran odprta, nenehno premikala iz enega stanja v drugega.

Lastnost funkcije animacije-časovne omejitve

Ta lastnost narekuje gibanje animiranega elementa pri prehodu iz enega stanja v drugega. The lastnost funkcije animacije-časa običajno dobi eno od treh vrednosti enostavnosti.

Enostavnost vstavljanja
Enostavnost
Enostavnost vstopa

The enostavna izhodna vrednost se uporablja zgoraj; ta počasi prehaja animacijo iz enega stanja v drugega. Če je cilj ustvariti počasen prehod, ko se gumb spremeni iz zelenega pravokotnika v modri krog, bi uporabili enostavna vrednost . Če bi želeli le počasen prehod v nasprotno smer, bi uporabili enostavna vrednost .

Zmanjšanje našega kodeksa

V večini primerov se skrajšanje trajanja programa obravnava kot praktičen pristop. To je predvsem zato, ker manj vrstic kode zmanjšuje verjetnost, da bodo napake ostale neopažene v vaših programih.

Zgornjo kodo lahko zmanjšate za štiri vrstice. To je mogoče doseči s preprosto uporabo lastnosti animacije, ne da bi izrecno identificirali vsako od njenih podmoči.

Zmanjšanje kode za primer animacije gumbov

  
  
  
  
  
  
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;  
}  
}  
  
  
  

				
				
				Kategorija				 Programiranje