Animacija elemenata stranice može funkcionirati kao neovisni proces ili se izvodi kako bi se vizualizirale akcije posjetitelja. U oba slučaja, CSS transformacija elementa ne utječe na ukupni tijek i izvršava se bez obzira na sadržaj stranice kao cjeline.
Opća pravila transformacije
Smatra se da je iskrivljenje rijetko korišteno, ali s ispravnom i sveobuhvatnom primjenom CSS animacije s asimetrijom, bit će moguće izgraditi dinamiku u trodimenzionalnom prostoru kada se kreće element. Na primjer, "svemirska letjelica u orbiti" u kontekstu web stranice može biti kretanje robe u trgovini u prostoru trgovine. 18 Perspektiva transformacije
Korištenje svojstva transform-origin omogućuje vam definiranje točke na kojoj će se izvršiti transformacija. Pomicanjem ove točke možete kontrolirati središte za koje se izvodi CSS transformacija. Funkcija rotiranja, iako ima dvije opcije - rotateX i rotateY - ali bez "X" i "Y" ima jedan parametar.
U svim slučajevima, transformacija elemenata treba biti složena jednostavnim primjerima kako bi se izbjegli neočekivani rezultati. Bolje je prvo ispravno formulirati pravilo i opisati svojstvo zajednostavni element nego odmah uključiti u raspon željenih transformacija. Pravilno formuliranje pravila i CSS svojstava ključ je uspjeha i učinkovitih rezultata.
CSS animacija pomoću animacije i @keyframes nadopunjuje sposobnosti transformacije, dopuštajući joj da se pretvori u stvarnu reprezentaciju kroz kontrolu kontroliranog elementa ili kontroliranu transformaciju njegova oblika.
Gornja linija elemenata je njihovo normalno stanje. Prvi se stupac pomiče, drugi se rotira, a treći se umanjuje. Prikazano je nekoliko okvira. Za implementaciju ove funkcionalnosti koristi se sljedeći kod:
Dinamika i duljina procesa mogu se postaviti u animaciji i @keyframes. Dostupna je glatka i postupna promjena procesa. Možete ubrzati jednoličnu promjenu i kretanje.
Svojstvo animacije obično se piše u jednom retku. Sadrži osam parametara:animation-name - naziv animacije; trajanje animacije - trajanje animacije (sekunde "s", milisekunde "ms"); animacija-timing-funkcija - vrsta animacije (jednostavnost, linearnost, lakoća, lakoća, jednostavnost-out-out, kubna-bezier); broj animacija-iteracija - broj animacija koje se ponavljaju ili beskonačno; smjer animacije - smjer kretanja (normalno, obrnuto, naizmjenično, naizmjenično); animacija-play-state - zaustavljanje animacije (trčanje, pauziranje); kašnjenje animacije - kašnjenje animacije prije reprodukcije (sekunde "s", milisekunda "ms"); animation-fill-mode - reproducirajte animaciju izvan određenog vremena reprodukcije ( none, naprijed, unatrag, oboje); Pri projektiranju animacije pomoću svojstava animacijeTransformacije su označene u pravilu @keyframes, koje definira slijed transformacije elemenata u koracima.
Svaka animacija ima naziv, trajanje i vrstu. Po nazivu je definiran željeni opis @keyframes, trajanje određuje vrijeme procesa, a tip je varijanta gibanja.
Ako se koristi potreba za jedinstvenim procesom (gibanje i /ili transformacija), vrijednost je linearna. Ako želite imati ubrzanje na početku - olakšajte, ako na kraju - lako. Jednostavnost je klizanje, a jednostavnost u izlasku je nježnija opcija.
Vrijednost kubnog-beziera omogućuje vam da formulirate složenu verziju pokreta i izgradite originalniju verziju animacije.
Na mjestu proizvođača možete odabrati bilo koju standardnu verziju pokreta i osmisliti vlastitu. Kada kliknete na gumb "GO!", Dva kvadrata će se pomicati paralelno i možete uskladiti razlike i vizualizirati željeno ponašanje elementa.
Svojstvo @keyframes je "odrednica" okvira (vidi primjer iznad) kroz koji se element transformira. Ideja o nekretnini je vrlo jednostavna, ali mogućnosti koje ona pruža su ogromne. Proces počinje s 0% i završava sa 100% ukupnog vremena dodijeljenog animaciji. Možete koristiti samo krajnje točke od i do, ili 0% i 100%. Veći učinak može se postići dijeljenjem cijelog procesa animacije /transformacije na mjestu. Veličina parcele može biti bilo koja. Obično se prihvaća nekoliko opcija: 0%, 25%, 50%, 75% i 100%. Ponekad su dovoljna samo tri okvira: 0%, 50% i 100%. Kako to učiniti u svakom slučajuovisi o zadatku i programeru.
Prilikom konstruiranja bilo koje varijante transformacije, potrebno je promatrati jedno bitno pravilo. Nije uvijek dopušteno koristiti javascript, osobito za programabilnu promjenu svojstava elemenata, na primjer, promijeniti vrijednost svojstva pozadinske slike. HTML, CSS i javascript savršeno se kombiniraju, ali u svim slučajevima morate uzeti u obzir stvarnu funkcionalnost svake od tih komponenti. U idealnom slučaju, kada rade u jasnoj kombinaciji i ne ometaju jedni druge.
Primijeni svojstva animacije
Značajke svojstva animacije
Važne opcije animacije
Vrijednost kubnog-beziera omogućuje vam da formulirate složenu verziju pokreta i izgradite originalniju verziju animacije.