CSS je eden najmočnejših načinov, kako narediti spletno stran interaktivno. Spreminja videz in občutek našega osnovnega Spletna stran. Ena od pomembnih in razburljivih lastnosti, ki jih ponuja CSS, je ta, da nam omogoča izvajanje animacij. Omogoča nam premikanje elementov znotraj naše strani. Začnimo naše potovanje po animacijah v CSS v naslednjem vrstnem redu:
Animacije v CSS
Dodajanje animacij na naše spletno mesto je odličen način, da opozorite uporabnike. Naši strani ne samo doda vrednost, temveč tudi obogati uporabniško izkušnjo. Animacija v CSS temelji na dveh delih. So
- Ključni okviri
- Animacija
Animacije CSS so podprte v vseh brskalnikih. Vendar nekateri starejši brskalniki, kot je Safari (do različice 8.0), za interpretacijo lastnosti animacije zahtevajo predpono (-webkit-). Na primer:
.anim {višina: 200px širina: 200px ozadje: svetlobna pozicija: relativni polmer meje: 100% -webkit-animacija-ime: cssanim / * stari brskalniki * / -webkit-animacija-trajanje: 5s / * stari brskalniki * / animacija -name: cssanim animacija-trajanje: 5s} / * stari brskalniki * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Za preizkušanje nadaljnjih primerov lahko uporabimo vzorčno stran html od zgoraj in nadomestimo kodo CSS v oznaki sloga.
Ključni okviri v CSS
To je gradnik animacij v CSS. Včasih je na naši spletni strani definiral določene trenutke in sloge animacije. Z drugimi besedami, ko določimo @keyframes znotraj našega CSS, dobi nadzor, da spremeni trenutno stanje v novo stanje ali animira predmete za določeno trajanje.
@Keyframes morajo imeti določene lastnosti za nadzor animacije, na primer ime animacije, stopnje in lastnosti.
Ime - Vsaka animacija mora imeti ime, ki opisuje njeno vedenje.
Obdobja - Oder predstavlja zaključek animacije. Označimo jo lahko s ključno besedo »do« in »od« ali v odstotkih, medtem ko 0% predstavlja začetno stanje, 100% pa končno stanje animacije. Prednost uporabe odstotne predstavitve je v tem, da lahko vmes določimo več vmesnih stopenj, tj.
Lastnosti - Te lastnosti nam omogočajo nadzor nad @keyframes za njihovo manipulacijo med animacijo.
.anim {višina: 200px širina: 200px ozadje: položaj svetlo modre: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 5s} @keyframes cssanim {0% {transformacija: lestvica (0,5) motnost: 0} 50 % {preoblikovanje: lestvica (1,5) motnost: 1} 100% {preoblikovanje: lestvica (1)}}Zdaj, ko smo jasni pri določanju ključnih okvirjev. Raziščimo lastnosti animacije, da opišemo, kako animirati naše elemente in predmete. Lastnosti, to sta dedovanje in začetnica, je mogoče uporabiti pri vseh vrstah animacije. Te lastnosti se običajno uporabljajo skupaj z oznako div za prikaz različnih vedenj.
začetnica: Nastavi to lastnost na privzeto vrednost.
podedovati: Podeduje to lastnost od nadrejenega elementa.
Lastnosti animacije
- ime animacije
Določa ime animacije, ki se uporablja v @keyframes za manipulacijo.Možne vrednosti so:
- ime: To določa ime, ki se veže na ključni okvir za animacijo.
- noben: To je privzeta vrednost in se lahko uporablja za preglasitev podedovanih ali kaskadnih animacij.
Sintaksa:
ime animacije: ime | noben | začetnica | podedovati
.anim {višina: 200px širina: 200px ozadje: položaj svetlo modre: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 5s} @keyframes cssanim {0% {levo: 0px} 100% {levo: 300px} }- trajanje animacije
Določa čas, potreben za izvedbo ene izvedbe animacije. Določen je v sekundah ali milisekundah (npr. 4s ali 400ms). Privzeta vrednost te lastnosti je 0 s, zato, če ta lastnost ni podana, animacija ne bo izvedena.
Sintaksa:
animacija-trajanje: čas
.anim {višina: 200px širina: 200px ozadje: modra lega: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 4s} @keyframes cssanim {0% {transformacija: lestvica (0,4) motnost: 0} 50 % {preoblikovanje: lestvica (1.4) motnost: 1} 100% {preoblikovanje: lestvica (1)}}- zakasnitev animacije
Lastnost zakasnitve animacije nam omogoča, da določimo zakasnitev animacije. Določa, kdaj se bo zaporedje animacije začelo izvajati.
Vrednost te lastnosti je mogoče navesti v sekundah (sekundah) ali milisekundah (ms). Vsebuje lahko pozitivne in negativne vrednosti. Pozitivna vrednost pomeni, da se bo animacija začela po preteku določenega časa, do takrat pa bo ostala animirana. Po drugi strani pa bo negativna vrednost takoj zagnala animacijo od točke, kot da jo že izvaja določen časovni okvir.
Sintaksa:
zakasnitev animacije: čas
php ustvari matriko iz niza
.anim {višina: 200px širina: 200px ozadje: položaj svetlo modre: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 4s zakasnitev animacije: 4s} @keyframes cssanim {0% {left: 0px} 100% {levo: 250 slikovnih pik}}- animacija-iteracija-štetje
Ta lastnost označuje, kolikokrat je treba predvajati zaporedje animacije. Privzeta vrednost te lastnosti je 1.Možne vrednosti so:
- številko - označuje število ponovitev
- neskončno - označuje, da se mora animacija ponavljati večno
Sintaksa:
animacija-iteracija-štetje: število | neskončno
.anim {višina: 200px širina: 200px ozadje: svetlobni položaj: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 2s število animacij-iteracij: 4} @keyframes cssanim {0% {left: 0px} 100% {levo: 100 slikovnih pik}}- animacija-režija
Določa smer animacije. Smer elementa lahko nastavite tako, da se predvaja naprej, nazaj ali v nadomestnih ciklih.Privzeta vrednost te lastnosti je normalna in se ponastavi v vsakem ciklu.Možne vrednosti so:
normalno - To je privzeto in animacija se predvaja naprej. Po vsakem ciklu animacija pride v začetno stanje in se ponovno predvaja naprej
vzvratno - Animacija se predvaja v smeri nazaj. Po vsakem ciklu animacija pride v končno stanje in se predvaja nazaj
nadomestni - Smer animacije je obrnjena, tj. Predvaja se najprej naprej in nato nazaj v vsakem ciklu. Vsak nenavaden cikel prikazuje animacijo naprej in vsak sodo gibanje nazaj.
izmenično-vzvratno - Smer animacije se izmenično obrača. Tu se animacija predvaja najprej nazaj in nato naprej v vsakem ciklu. Vsak nenavaden cikel se premakne nazaj ali nazaj, vsak sodo cikel pa animacijo naprej.
Sintaksa:
smer animacije: normalno | vzvratno |nadomestni | izmenično-vzvratno
.anim {višina: 200px širina: 200px ozadje: položaj svetlobne modrice: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 2s animacija-iteracija-število: neskončno} @keyframes cssanim {0% {left: 0px} 100% {levo: 100 slikovnih pik}}- animacija-časovna funkcija
Ta lastnost določa krivuljo hitrosti ali slog gibanja animacije. Dodeljeno je, da gladko spreminja slog animacije iz ene oblike v drugo. Če nobena vrednost ni dodeljena, se privzeto olajša.Možne vrednosti za funkcijo časovne animacije so:
lahkotnost - To je privzeta vrednost lastnosti. Tu se animacija začne počasi, na sredini postopoma postane hitra in nato spet počasi konča.
linearno - Animacija ohranja enako hitrost skozi ves cikel, tj. Od začetka do konca.
enostavnost - Animacija se začne počasi.
sprostitev - Animacija se počasi konča.
enostavnost-out-out - Animacija se počasi premika med začetkom in koncem.
kubični-bezier (n, n, n, n) - Ta napredna funkcija nam omogoča, da z definiranjem lastnih vrednosti ustvarimo funkcijo merjenja časa po meri. Možna vrednost je od 0 do 1.
Sintaksa:
animacija-časovna funkcija: linearna | enostavnost | sprostitev | enostavnost | sprostitev |kubični-bezier (n, n, n, n)
.anim {višina: 200px širina: 200px ozadje: položaj svetlo modre: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 2s smer animacije: obratno} @keyframes cssanim {0% {ozadje: oranžna leva: 0px } 50% {ozadje: rumeno levo: 200px zgoraj: 200px} 100% {ozadje: modro levo: 100px}}- način za zapolnitev animacije
To je posebna lastnost, saj določa slog animacije pred ali po predvajanju animacije.Kot privzeto animacija ne vpliva na slog elementa pred začetkom ali po koncu. Ta lastnost je uporabna, saj pomaga pri preglasitvi tega privzetega vedenja animacije.V nadaljevanju so možne vrednosti lastnosti animacije-fill-mode:
nobenega - To je privzeta vrednost lastnosti, tj. Slogi animacije se ne uporabljajo za element pred ali po animaciji.
naprej - Elemente element zadrži v končnem zaporedju animacije, tj. Po končani animaciji.
nazaj - Elemente element zadrži v začetnem zaporedju animacije, tj. Preden se animacija zre, zlasti med zamudo animacije.
oboje - To pomeni, da bo animacija sledila v smeri naprej, torej naprej in nazaj
Sintaksa:
način za zapolnitev animacije: noben | naprej | nazaj | oboje
.anim {širina: 50px višina: 50px ozadje: svetlo modra barva: bela pisava-teža: krepki položaj: relativno ime-animacije: cssanim-animacija-trajanje: 5s število animacij-iteracij: neskončni polmer obrobe: 100%} # anim1 { animacija-časovna-funkcija: enostavnost} # anim2 {animacija-časovna-funkcija: linearna} # anim3 {animacija-časovna-funkcija: enostavnost} # anim4 {animacija-časovna-funkcija: enostavnost} # anim5 {animacija- timing-function: easy-in-out} @keyframes cssanim {od {levo: 0px} do {levo: 400px}}- animacija-igra-stanje
Ta lastnost določa animacijo v stanju predvajanja ali zaustavitve. Ko se animacija nadaljuje s pavzo, se začne od tam, kjer je ostala.Možne vrednosti so:
- igranje - Za upodabljanje animacije v teku
- premor - Za upodobitev animacije v stanju premora.
Sintaksa:
animacija-igra-stanje: zaustavljeno | igranje
.anim {širina: 100px višina: 100px ozadje: svetlobna pozicija: relativno ime-animacije: cssanim-animacija-trajanje: 3s-zakasnitev animacije: 2s-način-animacije-polnjenje: nazaj-polmer: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animacija
To je znano kot kratica za animacijo. Uporablja se za čistejšo kodo. Ko se navadimo na vse lastnosti animacije, svetujemo, da za hitrejše kodiranje in definiranje vseh lastnosti v eni vrstici uporabimo okrajšavo animacije.
Sintaksa:
animacija: [ime-animacije] | [trajanje animacije] | [animacija-časovna funkcija] |[zakasnitev animacije] | [štetje ponovitev animacije] | [smer animacije] |[način zapolnitve animacije] | [stanje animacije-predvajanja]
Vse animacijske učinke, ki smo jih prikazali zgoraj z uporabo različnih lastnosti animacije, lahko dosežemo s pomočjo stenografijeanimacija lastnine.
.anim {višina: 200px širina: 200px ozadje: svetlobni položaj: relativni polmer meje: 100% ime animacije: cssanim trajanje animacije: 2s smer animacije: normalno stanje animacije-igra: zaustavljeno} @keyframes cssanim {0% {ozadje: oranžni vrh: 0px} 50% {ozadje: rumeno levo: 200px zgoraj: 200px} 100% {ozadje: modro levo: 100px}}S tem so zaključene vse lastnosti animacije, ki jih je mogoče uporabiti v CSS. Za bolj jasno sliko bi morali preizkusiti različne različice teh lastnosti. Ko se počutimo udobno, je lahko okrajšava lastnosti animacije v veliko pomoč pri pisanju čistejše in hitrejše kode. To je ena izmed pomembnih veščin, ki se jih morajo naučiti v CSS za spletne razvijalce. Ker se ponavadi bolj osredotočamo na premikajoče se predmete kot na statične, nam lahko animacije to pomagajo in razvijejo tudi izjemne spletne strani.
Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega življenja To usposabljanje vam omogoči, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.
Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje bloga 'Animacije v CSS' in javili se vam bomo.