CSS je jedan od najsnažnijih načina za stvaranje interaktivne web stranice. To transformira izgled i osjećaj naših osnovnih web stranicu. Jedna od važnih i uzbudljivih značajki koje CSS nudi jest da nam omogućuje izvođenje animacija. Omogućuje nam premještanje elemenata unutar naše stranice. Započnimo naše Putovanje animacija u CSS-u sljedećim redoslijedom:
Animacije u CSS-u
Dodavanje animacija na našu web stranicu izvrstan je način za skretanje pozornosti korisnika. To ne samo da dodaje vrijednost našoj stranici već i obogaćuje korisničko iskustvo. Animacija u CSS-u temelji se na dva dijela. Oni su
- Ključni okviri
- Animacija
CSS animacije podržane su u svim preglednicima. Međutim, neki stariji preglednici poput Safarija (do verzije 8.0) zahtijevaju prefiks (-webkit-) za tumačenje svojstava animacije. Na primjer:
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% -webkit-animacija-ime: cssanim / * stari preglednici * / -webkit-animacija-trajanje: 5s / * stari preglednici * / animacija -name: cssanim animacija-trajanje: 5s} / * stari preglednici * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {lijevo: 300 piksela}}Možemo koristiti oglednu html stranicu odozgo i zamijeniti CSS kôd u stilskoj oznaci za isprobavanje daljnjih primjera.
Ključni okviri u CSS-u
Ovo je gradivni blok animacija u CSS-u. Nekad je definirao specifične trenutke i stilove animacije na našoj web stranici. Drugim riječima, kada odredimo @keyframes unutar našeg CSS-a, on dobiva kontrolu za modificiranje trenutnog stanja u novo stanje ili animiranje objekata na određeno vrijeme.
@Keyframes moraju imati određena svojstva za upravljanje animacijom, poput naziva animacije, faza i svojstava.
Ime - Ime mora biti za svaku animaciju koja opisuje njezino ponašanje.
Faze - Pozornica predstavlja završetak animacije. To se može označiti s ključnom riječi 'do' i 'od' ili kao postotak, dok 0% predstavlja početno stanje, a 100% predstavlja krajnje stanje animacije. Prednost korištenja postotka predstavljanja je što možemo definirati više međufaza između, tj. Kakvo bi trebalo biti ponašanje animacije u fazi od 50% ili 75% itd.
Svojstva - Ova svojstva daju nam kontrolu nad @keyframesima kako bismo njima manipulirali tijekom animacije.
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% ime animacije: cssanim trajanje animacije: 5s} @keyframes cssanim {0% {transformacija: skala (0,5) neprozirnost: 0} 50 % {transformacija: skala (1,5) neprozirnost: 1} 100% {transformacija: skala (1)}}Sad kad smo jasni u definiranju ključnih okvira. Istražimo svojstva animacije kako bismo opisali kako animirati naše elemente i objekte. Dva svojstva, tj. Naslediti i inicijal mogu se koristiti sa svim vrstama animacije. Ta se svojstva obično koriste zajedno s oznakom div za prikaz različitih ponašanja.
početno: Postavlja ovo svojstvo na zadanu vrijednost.
naslijediti: Nasljeđuje ovo svojstvo od nadređenog elementa.
Svojstva animacije
- animacija-naziv
Određuje naziv animacije koja se koristi u @keyframes za manipulaciju.Moguće vrijednosti su:
- Ime: Ovo navodi ime koje će se vezati za ključni kadar za animaciju.
- nijedan: To je zadana vrijednost i može se koristiti za poništavanje naslijeđenih ili kaskadnih animacija.
Sintaksa:
preopterećenje metode vs prevladavanje metode
naziv animacije: ime | nijedan | početni | naslijediti
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% ime animacije: cssanim trajanje animacije: 5s} @keyframes cssanim {0% {lijevo: 0px} 100% {lijevo: 300px} }- animacija-trajanje
Određuje vrijeme potrebno animaciji da izvrši jedno izvršenje. Definira se u sekundama ili milisekundama (npr. 4s ili 400ms). Zadana vrijednost ovog svojstva je 0s, pa ako ovo svojstvo nije navedeno, animacija se neće odvijati.
Sintaksa:
trajanje animacije: vrijeme
.anim {visina: 200px širina: 200px pozadina: plava pozicija: relativni radijus obruba: 100% ime animacije: cssanim trajanje animacije: 4s} @keyframes cssanim {0% {transformacija: skala (0.4) neprozirnost: 0} 50 % {transformacija: skala (1.4) neprozirnost: 1} 100% {transformacija: skala (1)}}- animacija-odgoda
Svojstvo odgode animacije omogućuje nam da odredimo kašnjenje u animaciji. Definira kada započinje izvršavanje animacijske sekvence.
Vrijednost ovog svojstva može se prijaviti u sekundama ili milisekundama (ms). Može sadržavati i pozitivne i negativne vrijednosti. Pozitivna vrijednost znači da će animacija započeti nakon što protekne određeno vrijeme, a do tada će ostati animirana. S druge strane, negativna vrijednost će odmah pokrenuti animaciju od točke kao da se već izvršava u određenom vremenskom okviru.
Sintaksa:
kašnjenje animacije: vrijeme
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% naziv animacije: cssanim trajanje animacije: 4s odgoda animacije: 4s} @keyframes cssanim {0% {left: 0px} 100% {lijevo: 250 piksela}}- animacija-iteracija-brojanje
Ovo svojstvo ukazuje na broj reprodukcije niza animacije. Zadana vrijednost ovog svojstva je 1.Moguće vrijednosti su:
- broj - označava broj ponavljanja
- beskonačno - označava da bi se animacija trebala ponavljati zauvijek
Sintaksa:
broj animacija-iteracija: broj | beskonačno
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% ime animacije: cssanim trajanje animacije: 2s broj animacija-iteracija: 4} @keyframes cssanim {0% {left: 0px} 100% {lijevo: 100 piksela}}- animacija-režija
Definira smjer animacije. Smjer elementa može se postaviti za reprodukciju prema naprijed, prema natrag ili u alternativnim ciklusima.Zadana vrijednost ovog svojstva je normalna i resetira se u svakom ciklusu.Moguće vrijednosti su:
normalan - Ovo je zadano ponašanje i animacija se reproducira prema naprijed. Nakon svakog ciklusa animacija dolazi u početno stanje i ponovno se reproducira prema naprijed
obrnuti - Animacija se reproducira u smjeru unatrag. Nakon svakog ciklusa animacija dolazi u krajnje stanje i reproducira se unatrag
kako izaći u javi
zamjenski - Smjer animacije je obrnut, tj. Igra se naprijed, a zatim unatrag u svakom ciklusu. Svaki neparni ciklus prikazuje animaciju naprijed, a svaki parni ciklus kretanje unatrag.
naizmjenično-obrnuto - Smjer animacije naizmjence je obrnut. Ovdje se animacija prvo reproducira unatrag, a zatim unaprijed u svakom ciklusu. Svaki se neparni ciklus pomiče unatrag ili unatrag, a svaki parni ciklus prikazuje animaciju prema naprijed.
Sintaksa:
animacija-smjer: normalno | obrnuti |zamjenski | naizmjenično-obrnuto
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% ime animacije: cssanim trajanje animacije: 2s animacija-iteracija-broj: beskonačno} @keyframes cssanim {0% {left: 0px} 100% {lijevo: 100 piksela}}- funkcija animacije-vremena
Ovo svojstvo određuje krivulju brzine ili stil kretanja animacije. Zadaje se glatkoj promjeni stila animacije iz jednog oblika u drugi. Ako nije dodijeljena vrijednost, zadano se olakšava.Moguće vrijednosti funkcije animacije-vremena su:
ublažiti - Ovo je zadana vrijednost svojstva. Ovdje animacija započinje sporo, postupno postaje brza u sredini, a zatim opet polako završava.
linearno - Animacija održava jednaku brzinu tijekom ciklusa, tj. Od početka do kraja.
lagodnost - Animacija polako započinje.
lagodnost - Animacija polako završava.
lakoća ulaska - Animacija se polako kreće i tijekom početka i na kraju.
kubični-bezier (n, n, n, n) - Ova napredna značajka omogućuje nam stvaranje prilagođene funkcije vremenskog definiranja definiranjem vlastitih vrijednosti. Moguća vrijednost kreće se od 0 do 1.
kako inicijalizirati klasu u pythonu
Sintaksa:
funkcija animacije-vremena: linearna | lakoća | olakšavanje | olakšavanje | lakoća izlaska |kubični-bezier (n, n, n, n)
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% naziv animacije: cssanim trajanje animacije: 2s usmjerenje animacije: obrnuto} @keyframes cssanim {0% {pozadina: narančasta lijeva: 0px } 50% {pozadina: žuta lijevo: 200px gore: 200px} 100% {pozadina: plava lijevo: 100px}}- način za ispunjavanje animacije
Ovo je posebno svojstvo jer određuje stil animacije prije ili nakon reprodukcije animacije.Prema zadanim postavkama, na stil elementa ne utječe animacija prije početka ili nakon završetka. Ovo je svojstvo korisno jer pomaže u nadjačavanju zadanog ponašanja animacije.Sljedeće su moguće vrijednosti za svojstvo animation-fill-mode:
nijedna - Ovo je zadana vrijednost svojstva, tj. Stilovi animacije se ne primjenjuju na element, prije ili poslije animacije.
naprijed - Elementi zadržavaju stilove u zadnjem slijedu animacije, tj. Nakon završetka animacije.
unazad - Elementi zadržavaju stilove u početnom slijedu animacije, tj. Prije nego što se animacija uperi, posebno tijekom kašnjenja animacije.
oba - To znači da će animacija slijediti u smjeru tj. Prema naprijed i prema natrag
Sintaksa:
način za ispunjavanje animacije: nema | naprijed | unatrag | oba
.anim {širina: 50px visina: 50px pozadina: svijetloplava boja: bijeli font-težina: podebljani položaj: relativno ime animacije: cssanim trajanje animacije: 5s broj animacija-iteracija: beskonačni radijus obruba: 100%} # anim1 { animacija-vremenska-funkcija: lakoća} # anim2 {animacija-vremenska-funkcija: linearna} # anim3 {animacija-vremenska-funkcija: olakšica} # anim4 {animacija-vremenska-funkcija: lakoća-out} # anim5 {animacija- timing-function: easy-in-out} @keyframes cssanim {od {lijevo: 0px} do {lijevo: 400px}}- animacija-igra-stanje
Ovo svojstvo navodi animaciju koja će biti u stanju reprodukcije ili u pauzi. Također, kada se animacija nastavi iz stanke, ona započinje od mjesta na kojem je krenula.Moguće vrijednosti su:
- sviranje - Za prikazivanje animacije u radu
- zastao - Za prikazivanje animacije u stanju pauze.
Sintaksa:
animacija-igra-stanje: pauzirano | sviranje
.anim {širina: 100px visina: 100px pozadina: svijetloplava pozicija: relativno ime-animacije: cssanim-animacija-trajanje: 3s-kašnjenje animacije: 2s-animacija-način-popunjavanja: unatrag-radijus: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animacija
Ovo je poznato kao stenografsko svojstvo animacije. Koristi se za čistiji kod. Nakon što se naviknemo na sva svojstva animacije, savjetuje se da se bržim kodiranjem animacije koristimo za brže kodiranje i definiranje svih svojstava u jednom retku.
Sintaksa:
animacija: [ime animacije] | [trajanje animacije] | [funkcija animacije-vremena] |[odgoda animacije] | [brojač animacija-iteracija] | [animacija-smjer] |[način punjenja animacije] | [stanje animacije-reprodukcije]
Svi efekti animacije koje gore prikazujemo pomoću različitih svojstava animacije mogu se postići korištenjem stenografijeanimacija imovine.
.anim {visina: 200px širina: 200px pozadina: svijetloplava pozicija: relativni radijus obruba: 100% naziv animacije: cssanim trajanje animacije: 2s smjer animacije: normalna animacija-stanje-reprodukcije: pauzirano} @keyframes cssanim {0% {background: orange orange: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Ovim su zaključena sva svojstva animacije koja se mogu koristiti u CSS-u. Trebali bismo isprobati različite varijacije ovih svojstava kako bismo dobili jasniju sliku. Kad se udobno namjestimo, stenografsko svojstvo animacije može biti od velike pomoći za pisanje čišćeg i bržeg koda. Ovo je jedna od važnih vještina za učenje u CSS-u za web programere. Budući da smo skloni više fokusirati se na pokretne objekte, a ne na statične, animacije nam mogu pomoći da to postignemo i također razviti sjajne izvanredne web stranice.
Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.
Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare bloga 'Animacije u CSS-u', a mi ćemo vam se javiti.