Sadržaj
Animacije su učinci poput prijelaza, ali poboljšane u svojoj funkcionalnosti, u smislu da postoji superiorna kontrola nad onim što se može učiniti, zbog dostupnosti više mogućnosti za promjenu iz jednog stila u drugi.Svojstva animacije
Kao što smo već rekli, animacije su poboljšani prijelazi zbog broja opcija i svojstava koja nam omogućuju veću kontrolu nad njima, pregledat ćemo svaku od njih:
- animacija-kašnjenje: Primijenite određeno vrijeme da biste mogli pokrenuti animaciju nakon što se aktivira.
- smjer animacije: Određuje treba li se animacija reproducirati unatrag ili u izmjenjivim ciklusima.
- trajanje animacije: Označava vremenski raspon u kojem bi se animacija trebala reproducirati.
- animation-iteration-count: Označava koliko se puta animacija mora ponoviti, pa čak može postaviti i vrijednost beskonačan za beskonačno ponavljanje istog.
- naziv animacije: Određuje naziv animacije.
- stanje animacije-reprodukcije: Omogućuje pauziranje animacije, a zatim nastavak reprodukcije.
- animation-timing-func: Odredite kako se u animaciji trebaju tretirati među vrijednosti
- animacija: To je prečac s kojim možemo ugraditi sva svojstva animacije u jednu CSS deklaraciju i ima sljedeću strukturu:
Sada kada znamo dostupna svojstva, pogledajmo primjer koda za njegovu analizu:
PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
U ovom primjeru vidimo da u vrijeme radnje : hover na elementu ćemo imati kašnjenje od 100 ms tada će animacija imati 500 ms za izvođenje i ponavljat će se beskonačan broj puta.
Zatim vidimo da ćemo s imenom koje smo dali aplikaciji koristiti svojstvo @ključni okviri gdje ćemo vam reći koji će se elementi animirati.
Pogledajmo kako bi to trebalo izgledati u našem pregledniku:
POVEĆAJTE
Ovim također dokazujemo važnost naziva animacije jer funkcionira kao identifikator kako bi mu se mogao dodijeliti a @ključni okviri.
Ovime završavamo vodič i s tim smo već u mogućnosti izvesti osnovne animacije, kako bismo našim dokumentima omogućili više kretanja HTML.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
