Home-theater-designers
CSS daje programerima mogućnost da ožive svoje web stranice pomoću animacije ključnih okvira.
CSS animacija postiže se promjenom početnog stanja HTML elementa kroz njegova različita svojstva. Neka opća svojstva CSS -a koja se mogu animirati uključuju:
kako otkazati venmo plaćanje
- Širina
- Visina
- Položaj
- Boja
- Neprozirnost
Ovim općim svojstvima CSS -a manipuliraju određeni CSS elementi kako bi se stvorio željeni rezultat. Ako ste ikada naišli na animirani element na web stranici, velika je vjerojatnost da je element animiran pomoću animacije ključnih okvira.
Što je element ključnih okvira?
The element ključnih okvira može se koristiti na jednom ili više HTML elemenata kojima ima pristup. Identificira određenu točku u stanju elementa i diktira izgled koji ovaj element mora imati u ovom trenutku.
Ovo bi moglo zvučati kao puno za probavu, ali zapravo je prilično jednostavno. The element ključnih okvira ima prilično jednostavnu strukturu koja se lako može razumjeti i prilagoditi tako da odgovara svim zahtjevima animacije.
Primjer strukture ključnih okvira
@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 pravokutni gumb pretvarajući ga u plavi okrugli gumb.
Unutar parametara iz gornji dio morat ćete postaviti sve potrebne stilove kako bi element izgledao poput zelenog pravokutnog gumba, a zatim u do odjeljku postavit ćete sve zahtjeve za oblikovanje kako biste ovaj gumb pretvorili u plavi okrugli gumb.
Ako razmišljate, to ne zvuči previše kao animacija. Pa, to je zato što se ključna komponenta cijelog ovog procesa tek treba uvesti --- ova komponenta je svojstvo animacije.
Svojstvo animacije
The svojstvo animacije ima skup različitih pod-svojstava; oni se koriste u kombinaciji s gornjom strukturom ključnih okvira za animaciju željenog HTML elementa.
Međutim, samo trebate znati pet od ovih pod-svojstava i vrijednosti koje su s njima povezane kako biste postigli animaciju u svojim projektima. Ova svojstva su poznata kao:
- Naziv animacije
- Animacija-trajanje
- Funkcija mjerenja vremena animacije
- Animacija-kašnjenje
- Animacija-iteracija-brojanje
Korištenje animacije na web stranici
Koristeći gornji scenarij, cilj je stvoriti animirani gumb.
Primjer animacije gumba
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!
Odjeljak animacije gornjeg koda sadrži pet pod-svojstava koja su ranije spomenuta. Svako svojstvo ima vrlo različitu funkciju i zajedno rade na tome da animiraju svaki HTML element za koji su ciljani.
Povezano: Kako ciljati dio web stranice pomoću CSS birača
Svojstvo naziva animacije
Ovo svojstvo je najvažnije pojedinačno svojstvo na popisu. Bez toga svojstvo imena animacije , ne biste imali identifikator za prelazak u element ključnih okvira , čineći sav kod unutar njegovih parametara beskorisnim.
Ako ste zaboravili uključiti jedno ili dva druga pod-svojstva, možda ćete ipak imati prilično pristojnu animaciju. Međutim, ako ste zaboravili svojstvo imena animacije ne biste imali animaciju.
Svojstvo trajanja animacije
Ovo svojstvo koristi se za definiranje količine vremena koje animirani element treba proći pri prijelazu iz jednog stanja u sljedeće.
U gornjem primjeru, svojstvo trajanja animacije postavljeno je na 5 sekundi (5s), pa će zeleni pravokutni gumb imati ukupno 5 sekundi prije nego što potpuno postane plavi okrugli gumb.
Svojstvo kašnjenja animacije
Ovo svojstvo važno je iz jednog razloga; nekim web stranicama može trebati nekoliko sekundi da se potpuno učitaju (zbog nekoliko različitih čimbenika). Dakle, svojstvo kašnjenja animacije sprječava pokretanje animacije odmah u slučaju da web stranici treba neko vrijeme za učitavanje.
U gornjem primjeru, svojstvo kašnjenja animacije postavljeno je na 4s, što znači da animacija neće početi sve do 4 sekunde nakon posjeta web stranici (dajući web stranici dovoljno vremena za učitavanje prije početka animacije).
Svojstvo prebrojavanja animacije-iteracije
Ovo svojstvo navodi koliko puta bi animirani element trebao prijeći iz jednog stanja u sljedeće. The svojstvo animation-iteration-count uzima vrijednosti koje su riječi i brojevi. Vrijednost broja može biti bilo što od 1 naviše, dok je vrijednost riječi obično beskonačan .
U gornjem primjeru, vrijednost animacije-iteracije-broja je postavljeno na beskonačan , što znači da će, dok je web stranica otvorena, svojstvo gumba neprestano animirati iz jednog stanja u drugo.
Svojstvo funkcije animacije-vremena
Ovo svojstvo diktira kretanje animiranog elementa pri prijelazu iz jednog stanja u drugo. The svojstvo funkcije animacije-vremena-funkcije obično se dodjeljuje jedna od tri vrijednosti lakoće.
- Jednostavnost
- Lakoća
- Jednostavnost ulaska
The vrijednost olakšanja u izlazu koristi se gore; ovo polako prelazi animaciju iz jednog stanja u drugo. Ako je cilj stvoriti spor prijelaz kada se gumb pretvara iz zelenog pravokutnika u plavi krug, upotrijebili biste lagodna vrijednost . Da želite samo spori prijelaz u suprotnom smjeru, upotrijebili biste vrijednost olakšanja .
Smanjivanje našeg kodeksa
U većini slučajeva smanjenje trajanja programa smatra se praktičnim pristupom. To je uglavnom zato što manji broj kodova smanjuje vjerojatnost da greške ostanu nezapažene u vašim programima.
Gore navedeni kod može se smanjiti za četiri retka. To se može postići jednostavnim korištenjem svojstva animacije bez izričite identifikacije svakog od njegovih pod-svojstava.
Smanjivanje koda za primjer animacije gumba
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;
}
}