Animacije na web stranici mogu privući više korisnika. Zapitajte se ovo - ako biste vidjeli web stranicu koja ima poprilično animacije, ne biste li željeli istraživati više? Sada s CSS prijelazima možete oživjeti svoj rad pomoću sjajnih animacija. I, pripazite, to treba učiniti kako treba. Istražimo svijet CSS prijelaza sljedećim redoslijedom:
- Zašto CSS prijelazi?
- Prijelazno svojstvo
- Što trebate odrediti?
- Svojstvo funkcije prijelaza-vremenske funkcije
- Svojstvo tranzicije-odgode
Zašto CSS prijelazi?
Uzmimo primjer. Ako biste promijenili boju elementa iz bijele u plavu, ta je promjena gotovo trenutna. Za animiraniji efekt ovu promjenu možete postupno postići. I ovo izgleda prilično vizualno privlačno. Omogućavanjem CSS prijelaza možete prilagoditi način na koji se promjene događaju. Možete definirati kako se promjene u elementima događaju u određenim vremenskim intervalima koji slijede krivulju ubrzanja.
CSS prijelazi omogućuju vam definiranje promjena za elementi, specifični vremenski intervali, brzina krivulje ubrzanja i još mnogo toga. Sve to možete učiniti bez upotrebe Flash ili JavaScript .
Za bolje razumijevanje možete se obratiti na donju sliku:
Na gornjoj slici, HTML element promijenit će se iz crvene u plavu u roku od jedne sekunde. Također ćete vidjeti srednju boju kada se odvija prijelaz. Ako nećete koristiti CSS prijelaze, primijetit ćete da je promjena boje iz crvene u plavu trenutna - nećete vidjeti srednju boju. Kod CSS prijelaza primijetit ćete animirani efekt kada se HTML elementi mijenjaju iz starog stanja u novo.
Prijelazno svojstvo
Svojstvo stenografskog prijelaza možete koristiti za kontrolu CSS prijelaza. Korištenje ove skraćenice nije samo lako, već također može izbjeći nesinkronizirane parametre koji mogu biti prilično frustrirajući za otklanjanje pogrešaka u CSS-u.
Svojstvo prijelaz navodi CSS svojstva na koja želite efekt prijelaza. Samo su ta CSS svojstva animirana.
Sintaksa:
tranzicija:
Kao početnik mogli biste se suočiti s nekim poteškoćama u korištenju stenografije. Ako mislite da je uporaba stenografije za vas trenutno malo složena, svojstva prijelaza možete odrediti zasebno. Za HTML element možete odrediti svojstva prijelaza jedno po jedno, kao što je prikazano u donjem primjeru:
razlike između apstraktne klase i sučelja
div {širina: 100px visina: 100px pozadina: lightblue prijelaz-svojstvo: širina prijelaz-trajanje: 2s prijelaz-vrijeme-funkcija: linearno kašnjenje prijelaza: 1s} div: hover {širina: 300px}Zadržite pokazivač iznad okvira
U gornjem primjeru odvojeno smo specificirali svojstva (svojstvo prijelaza, trajanje prijelaza, funkcija vremena i prijelaza). O ovim prijelaznim svojstvima saznat ćemo uskoro.
Što trebate odrediti?
Dvije su stvari koje morate navesti da biste kreirali CSS prijelaze: svojstvo CSS koje želi dodati efekt i vremensko trajanje tog učinka.Morate imati na umu jedno - kad ne odredite trajanje vremena, prijelaz će imati zadanu vrijednost od 0 , i neće biti učinka.
Razmotrimo primjer:
Kôd u nastavku definira efekt prijelaza svojstva width u trajanju od pet sekundi.
div {širina: 100px visina: 100px pozadina: plavi prijelaz: širina 5s} div: hover {širina: 600px}Pomaknite kursor iznad gornjeg elementa div da biste vidjeli efekt prijelaza.
U gornjem kodu vidjet ćete da kada pokazivač zadržite iznad plavog okvira, plavi okvir postupno povećava svoju širinu tijekom vremena od pet sekundi. Također ćete primijetiti da kad uklonite pokazivač iz plavog okvira, plavi okvir vratit će se u prvobitnu veličinu postupno (ne trenutno). Također možete promijeniti vrijednosti širine i trajanja da biste vidjeli kako ovo svojstvo prijelaza utječe na HTML element.
Učinak prijelaza možete dodati i na više svojstava. To možete učiniti pomoću zareza za odvajanje svojstava. Razmotrimo primjer:
U donjem kodu svojstvo prijelaza navedeno je za širinu, visinu i transformaciju.
div {podmetač: 15px širina: 150px visina: 100px pozadina: zeleni prijelaz: širina 2s, visina 2s, transformacija 2s} div: hover {širina: 300px visina: 200px transformacija: rotiraj (360deg)} Pozdrav svijete (Zadrži pokazivač iznad mene)
S gornjim primjerom vidjet ćete kako se kreće zeleni okvir kada zadržite pokazivač iznad okvira.
kako rasporediti Java aplikaciju u aws
Naveli smo samo svojstvo i vrijeme trajanja. Pogledajmo ostale parametre na raznim primjerima.
Svojstvo funkcije prijelaza-vremenske funkcije
Ovo svojstvo definira krivulju brzine za efekt prijelaza. Može imati sljedeće vrijednosti:
- Jednostavna vrijednost: To je zadana vrijednost gdje je učinak na početku spor, a zatim brži i polako završava.
- Linearna vrijednost: Ovaj efekt ne mijenja brzinu prijelaza - održava brzinu dosljednom od početka do kraja.
- Jednostavna vrijednost: Ovaj efekt započinje polako.
- Jednostavna vrijednost: Ovaj se učinak polako završava.
- Vrijednost jednostavnog izlaska: Ovaj učinak ima i polagani početak kao i polagani kraj.
- Vrijednost Cubic-bezier-a (n, n, n, n): Možete odrediti svoj vlastiti skup vrijednosti u funkciji cubic-bezier.
Kôd u nastavku prikazuje efekte prijelaza za linearne, lakoće, lakoću, olakšanost i lakoću izlaska.
div {širina: 100px visina: 100px pozadina: ružičasti prijelaz: širina 2s} # div1 {prijelaz-vremenska-funkcija: linearna} # div2 {prijelaz-vremenska-funkcija: lakoća} # div3 {prijelazna-vremenska-funkcija: lakoća u } # div4 {prijelaz-vremenska-funkcija: jednostavnost-out} # div5 {prijelaz-vremenska-funkcija: lakoća-ulazak} div: hover {širina: 300px}Zadržite pokazivač iznad elemenata div u nastavku
linearno
ublažiti
lagodnost
lagodnost
lakoća ulaska
Svojstvo tranzicije-odgode
Ponekad želite da se animacija dogodi nakon određenog vremenskog trajanja. Svojstvo odgode prijelaza omogućuje vam određivanje odgode za efekt prijelaza. Kašnjenje možete odrediti u sekundama.
c ++ idite na
Uzmimo primjer da vidimo kašnjenje efekta prijelaza:
div {širina: 100px visina: 100px pozadina: žuti prijelaz: širina 3s prijelazno kašnjenje: 1s} div: hover {širina: 300px}Zadržite pokazivač iznad elementa div u nastavku
Bilješka: Možete primijetiti odgodu od 1 sekunde prije početka efekta
U gornjem kodu, kad kursorom zadržite pokazivač iznad žutog okvira, primijetit ćete (na sekundu) da nema učinka. Nakon čekanja od jedne sekunde primijetit ćete učinak.
Ovime smo došli do kraja ovog članka o CSS prijelazima. Sada možete dodati animacije na svoje web stranice. Isprobajte ove primjere.
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 na blogu “CSS Transition”, a mi ćemo vam se javiti.