Animacion i qetë i objekteve duke përdorur vetëm CSS (5 shembuj).

dhe kjo eshte! Le të shohim se si duket në realitet.

Së pari shënjimi HTML. Është shumë e thjeshtë sepse ne punojmë vetëm me një element për faqe.

1	<div class = "toSmallWidth">

Dhe ja çfarë është në fletën e stilit:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margjina: 20px automatike; / * Mbushje 20 px lart dhe poshtë dhe shtrirje në mes * / sfond: e kuqe; / * sfond i kuq për bllokun * / lartësia: 100 px; / * lartësia e bllokut 100 px * / gjerësia: 800 px; / * gjerësia fillestare 800 px * /-webkit-animation-name: animWidthSitehere; -webkit-animacion-kohëzgjatja: 5s; / * pronë me një prefiks për shfletuesit Chrome, Safari, Opera * / Emri i animacionit: animWidthSitehere; / * specifikoni emrin e kornizave kryesore (të vendosura më poshtë) * / animacion-kohëzgjatja: 5s; / * cakto kohëzgjatjen e animacionit * / } / * kornizat kryesore me një prefiks për shfletuesit Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSitehere ( nga (gjerësia: 800 px;) në (gjerësia: 100 px;)) @keyframes animWidthSitehere ( nga (gjerësia: 800 px;) / * korniza e parë kryesore ku gjerësia e bllokut është 800 pikselë * / në (gjerësia: 100 px;) / * kuadri i fundit kyç ku gjerësia e bllokut është 100 px * / }

Siç mund ta shihni, ne specifikuam vetëm kornizat kryesore dhe të fundit, dhe të gjitha ato të ndërmjetme u "ndërtuan" automatikisht.

Animacioni juaj i parë CSS3 është gati. Për të konsoliduar njohuritë e marra, krijoni një dokument HTML dhe një skedar CSS dhe futni atje (ose më mirë shkruani me dorë) kodin nga shembulli. Atëherë me siguri do të kuptoni gjithçka. Pastaj përpiquni të bëni të njëjtën gjë me lartësinë e bllokut (duhet të ulet në lartësi) për të siguruar materialin.

3. Shembujt e animacionit CSS3 janë më kompleks

Më sipër, mësuat se sa e lehtë është të krijoni animacione CSS3. Nëse jeni përpjekur ta bëni këtë me duart tuaja, tashmë e keni kuptuar të gjithë procesin dhe tani doni të dini se si mund të krijoni një animacion më kompleks dhe më të bukur. Dhe është me të vërtetë e mundur për ta krijuar atë. Më poshtë janë 3 mësime ku animacioni është krijuar në të njëjtën mënyrë si në shembullin e mësipërm.

3 udhëzime për animacion CSS (transformime)

Udhëzimet do t'ju ndihmojnë të kuptoni edhe më mirë animacionin CSS. Gjëja kryesore është të përpiqeni të përsërisni atë që shihni në mësime. Ose të paktën përpiquni të ndryshoni vlerat e pronës dhe të shihni se çfarë ndodh, atëherë do të keni më pak frikë nga CSS.

E pamë së fundmi tranzicionetështë vetëm një mënyrë animacionet vetitë e stilit nga origjinale përpara fundi shteteve.

Pra, kalimet në CSS janë specifike sipas llojit të animacionit, ku:

• ka vetëm dy gjendje: fillimi dhe mbarimi;
• animacioni nuk është i bllokuar;
• gjendjet e ndërmjetme kontrollohen vetëm nga funksioni i kohës.

Por çfarë nëse dëshironi:

• të ketë kontroll mbi e ndërmjetme shtetet?
• për të lak animacion?
• bëjnë lloje të ndryshme animacionesh për një artikull?
• animate një veçori specifike vetëm në Gjysma e rruga?
• imitoj funksione të ndryshme kohore për prona të ndryshme?

Animacioni në CSS i lejon të gjitha këto, dhe më shumë.

Animacioni është si një mini-film ku ju, si regjisor, u jepni udhëzime (rregulla stili) aktorëve tuaj (elementë HTML) për skena të ndryshme (korniza kyçe).

Karakteristikat e animacionit

Ashtu si tranzicioni, vetia e animacionit është shkurtuar për disa të tjerë:

• Emri i animacionit: emri i animacionit;
• animacion-kohëzgjatja: sa zgjat animacioni;
• animacion-kohë-funksion: si llogariten gjendjet e ndërmjetme;
• animacion-vonesa: animacioni fillon pas njëfarë kohe;
• animacion-iteracion-count: sa herë duhet të ekzekutohet animacioni;
• animacion-drejtim: a duhet të shkojë lëvizja në drejtim të kundërt apo jo;
• animation-fill-mode: cilat stile aplikohen para fillimit të animacionit dhe pas përfundimit të tij.

Shembull i shpejtë

Për të animuar butonin e shkarkimit, mund të shkruani një animacion kërcim:

@keyframes kërcyes (0% (poshtë: 0; kuti-hije: 0 0 5px rgba (0,0,0,0.5);) 100% (poshtë: 50 px; kuti-hije: 0 50 px 50 px rgba (0,0, 0,0.1);)) .buton ngarkimi (animacion: kërcim 0.5s kub-bezier (0.1,0.25,0.1,1) 0s pafund alternativë të dyja;)

Së pari ju duhet të shkruani një animacion të vërtetë kërcimtar duke përdorur @keyframes dhe emërtoni atë.

une e perdora shkurtuar pronë e animacionit dhe përfshin të gjitha opsionet e mundshme:

• Emri i animacionit: kërcim (përputhet me emrin e kornizave kyçe)
• kohëzgjatja e animacionit: 0,5 s (gjysmë sekonde)
• funksioni i animacionit-kohës: kub-bezier (0.1,0.25,0.1,1)
• animacion-vonesa: 0s (pa vonesë)
• animacion-përsëritje-count: i pafund (i riluhet pafundësisht)
• drejtimi i animacionit: alternativ (shkon mbrapa dhe mbrapa)
• animacion-mbushje-mode: të dyja

@keyframes

Përpara animimit të elementeve HTML, ju duhet shkruani animacion duke përdorur kornizat kryesore... Në përgjithësi, kornizat kryesore janë të gjithë hap i ndërmjetëm në animacion. Ato përcaktohen duke përdorur përqindje:

• 0% - hapi i parë i animacionit;
• 50% është një gjysmë hapi në animacion;
• 100% është hapi i fundit.

Ju gjithashtu mund të përdorni fjalët kyçe nga dhe tek në vend të përkatësisht 0% dhe 100%.

Mund të përcaktoni sa më shumë korniza kyçe që dëshironi, si 33%, 4%, apo edhe 29,86%. Në praktikë, ju do të shkruani vetëm disa prej tyre.

Çdo kornizë kyçe është Rregulli CSS, kjo do të thotë që ju mund të shkruani vetitë CSS si zakonisht.

Për të përcaktuar animacionin, thjesht shkruani fjalën kyçe @keyframes me të titullin:

@keyframes rreth (0% (majtas: 0; lart: 0;) 25% (majtas: 240 px; lart: 0;) 50% (majtas: 240 px; lart: 140 px;) 75% (majtas: 0; lart: 140 px ;) 100% (majtas: 0; lart: 0;)) p (animacion: rreth 4s lineare e pafundme;)

Vini re se fillimi 0% dhe fundi 100% përmbajnë të njëjtat rregulla CSS. Kjo do të sigurojë që animacioni të qarkullojë në mënyrë të përsosur. Meqenëse numëruesi i përsëritjes është vendosur në pafundësi, animacioni do të shkojë nga 0% në 100%, dhe më pas menjëherë mbrapa në 0% dhe kështu me radhë përgjithmonë.

Emri i animacionit

Emri përdoret të paktën animacioni dy herë:

• në të shkruarit animacione me @keframes;
• në duke përdorur animacione duke përdorur veçorinë animation-name (ose veçorinë e animacionit stenografi).

@keyframes whatever (/ * ... * /) .zgjedhës (emri i animacionit: çfarëdo;)

Ashtu si emrat e klasave CSS, emrat e animacionit mund të përfshijnë vetëm:

• shkronjat (a-z);
• numrat (0-9);
• nënvizoj (_);
• vizë ndarëse (-).

Emri nuk mund të fillojë me një numër ose me dy viza.

animacion-kohëzgjatja

Ashtu si kohëzgjatja e tranzicionit, kohëzgjatja e animacionit mund të caktohet në sekonda(1s) ose milisekonda(200 ms).

Përzgjedhës (animacion-kohëzgjatja: 0,5 s;)

Parazgjedhja është 0s, që do të thotë se nuk ka fare animacion.

animacion-kohë-funksion

Ngjashëm me funksionet e kohës për tranzicionet, funksionet e kohës për animacion mund të përdoren fjalë kyçe të tilla si lineare, lehtësisht, ose mund të përkufizohen me arbitrare Kthesa Bezier.

Zgjedhësi (funksioni i animacionit-kohës: lehtësimi-në-jashtë;)

Parazgjedhja është lehtësia.

Meqenëse animacionet CSS përdorin korniza kyçe, mund të vendosni lineare funksioni i kohës dhe simulojnë kurbë specifike Bezier duke përcaktuar shumë shumë specifike korniza kyçe. Hidhini një sy Bounce.js për animacionet më të avancuara.

animacion-vonesa

Ashtu si me vonesën e tranzicionit, vonesa e animacionit mund të vendoset në sekonda(1s) ose milisekonda(200 ms).

Parazgjedhja është 0s, që do të thotë se nuk ka vonesë.

E dobishme kur përfshihen animacione të shumta seri.

A, .b, .c (animacion: kërcim 1s;) .b (animacion-vonesë: 0,25s;) .c (animacion-vonesë: 0,5s;)

animacion-përsëritje-numërim

Si parazgjedhje, animacioni luhet vetëm një herë(vlera 1). Ju mund të vendosni tre lloje vlerash:

• numra të plotë, si 2 ose 3;
• numra thyesorë si 0.5, të cilët do të luajnë vetëm gjysmën e animacionit;
• fjalë kyçe e pafund, e cila do të përsërisë animacionin pafundësisht.

.zgjedhës (animacion-përsëritje-numërim: i pafund;)

animacion-regji

Vetia animacion-drejtim përcakton në çfarë rendi lexohen kornizat kryesore.

• normale: fillon në 0%, përfundon në 100%, fillon përsëri me 0%.
• anasjelltas: fillon në 100%, përfundon në 0%, fillon përsëri në 100%.
• alternative: fillon me 0%, shkon në 100%, kthehet në 0%.
• alternative-kundërt: fillon në 100%, shkon në 0%, kthehet në 100%.

Kjo është më e lehtë të imagjinohet nëse numri i përsëritjeve të animacionit është vendosur në pafund.

animacion-mbushje-mode

Vetia animacion-plotësim-mode përcakton se çfarë ndodh para fillimi i animacionit dhe pas përfundimin e saj.

Në përcaktimin personelin kryesor ju mund të specifikoni Rregullat CSS që do të aplikohen në hapa të ndryshëm të animacionit. Tani këto rregulla CSS munden përplasen me ata që aplikuar tashmë tek elementët e animuar.

animation-fill-mode ju lejon t'i tregoni shfletuesit nëse stilet e animacionit gjithashtu duhet të aplikojnë jashtë animacionit.

Le të imagjinojmë butonin, që është:

• e kuqe default;
• bëhet blu në fillim të animacionit;
• dhe në fund jeshile kur animacioni të përfundojë.

Përshëndetje të dashur lexues. Në këtë ditë, le të flasim për një gjë mjaft interesante si animacioni CSS. Domethënë, ky animacion i elementeve bëhet vetëm me ndihmën e stileve dhe këtu nuk përdoren skripta.

Siç mund ta shihni, ekziston një atribut këtu : rri pezull e cila ndryshon stilin e sfondit në hover, në disa shembuj duhet të kërkohet.

Ndryshim i butë i ngjyrës së elementit kur rri pezull me tranzicion

kutia #1 (
margjina-fund: 5px;
ngjyra e sfondit: #ccc;

mbushje: 10 px;
text-align: qendër;
gjerësia: 200 px;
lartësia: 100 px;

teksti-indent: 0px;
kufiri: 1px solid # 888;
-moz-tranzicioni: sfond-ngjyra 0.8s 0.1s lehtësi;
-o-tranzicioni: sfond-ngjyra 0.8s 0.1s lehtësi;
-webkit-tranzicioni: sfond-ngjyra 0.8s 0.1s lehtësi;
kursori: treguesi;)

# kutia 1 : rri pezull {
ngjyra e sfondit: # 97CE68;
ngjyra: # 333;
}

Siç mund ta shihni, ne e arritëm këtë animacion duke përdorur atributin tranzicionit... Këtu mund të ndryshoni shpejtësinë e animacionit në sekonda, në këtë rast kushton 0,8 s derisa ngjyra të ndryshojë plotësisht në hover dhe 0,1 s përpara se të fillojë animacioni pas lëvizjes së pezulluar dhe largimit të kursorit. (Më falni për enigmën :-)) Kjo vlerë mund të ndryshohet sipas nevojës.

Ngjyra e sfondit në hover është caktuar si një atribut : rri pezull, kërkohet këtu, përndryshe animacioni nuk do të funksionojë.

Ndryshimi i madhësisë së një elementi

kutia #2 (
margjina-fund: 5px;
ngjyra e sfondit: #ccc;
ngjyra: # 333;

mbushje: 10 px;
text-align: qendër;
gjerësia: 200 px;
lartësia: 100 px;

teksti-indent: 0px;
kufiri: 1px solid # 888;
-moz-tranzicioni: të gjitha 1-të lineare;
-o-tranzicioni: të gjitha 1-të lineare;
-webkit-tranzicioni: të gjitha 1-të lineare;
kursori: treguesi;)

# kutia 2 : rri pezull {
ngjyra e sfondit: # 97CE68;
ngjyra: # 000;
gjerësia: 150 px;
lartësia: 50 px;
}

Në këtë shembull, ne kemi arritur një ndryshim të qetë të madhësisë së bllokut në hover. Madhësia standarde është 200x100, dhe madhësia e pezullimit është 150x50, e cila përcaktohet nga atributi : rri pezull.

Këtu gjithashtu mund të ndryshoni bllokun vetëm në gjerësi ose lartësi, ju vetëm duhet : rri pezull fshij gjerësia:- blloku ndryshon vetëm në lartësi, lartësia:- blloku ndryshon vetëm në gjerësi.

Ju gjithashtu mund të ndryshoni shkallën e ndryshimit. Në këtë rast, është 1s.

Përdredhja e objektit

# kutia 3 (
margjina-fund: 5px;
ngjyra e sfondit: #ccc;
ngjyra: # 333;

mbushje: 10 px;
text-align: qendër;
gjerësia: 200 px;
lartësia: 100 px;

teksti-indent: 0px;
kufiri: 1px solid # 888;
-moz-tranzicioni: të gjitha 1s 0.1s ease-in;
-o-tranzicioni: të gjitha 1s 0.1s ease-in;
-webkit-transition: të gjitha 1s 0.1s ease-in;
kursori: treguesi;)

# kutia 3: rri pezull (
ngjyra e sfondit: # 97CE68;
ngjyra: # 000;
-webkit-transform: rrotullo (360deg);
-moz-transform: rrotullo (360deg);
-o-transformoj: rrotullo (360deg);
}

Përdredhja ndodh duke përdorur transformoj dhe tranzicionit... Në këtë rast, objekti rrotullohet në drejtim të akrepave të orës 360 gradë me një shpejtësi prej një sekonde. Nëse dëshironi që blloku të rrotullohet në drejtim të kundërt të akrepave të orës, transformoj vlera duhet të vendoset - (minus). Natyrisht, shkalla e rrotullimit mund të ndryshohet.

Zmadhoni dhe zvogëloni pa probleme një objekt

kutia #4 (
margjina-fund: 5px;
ngjyra e sfondit: #ccc;
ngjyra: # 333;
mbushje: 10 px;
text-align: qendër;
gjerësia: 200 px;
lartësia: 100 px;

teksti-indent: 0px;
kufiri: 1px solid # 888;
-moz-tranzicion: të gjitha 3s lehtësim;
-o-tranzicion: të gjitha 3s lehtësim jashtë;
-webkit-tranzicion: të gjitha 3s lehtësim;
kursori: treguesi;)

# kutia 4: rri pezull (
ngjyra e sfondit: # 97CE68;
ngjyra: # 000;
-webkit-transformimi: shkalla (2);
-moz-transformoj: shkallë (2);
-o-transformoj: shkallë (2);
}

Në këtë shembull, blloku dyfishohet pa probleme. Kjo vlerë është e ekspozuar transformimi: shkalla (2)... Nëse e vendosni vlerën në 1.5, përkatësisht, rritja e bllokut do të jetë 1.5 herë.

Në të njëjtën mënyrë, ju mundeni zvogëloni madhësinë bllok, për shembull, vendosni vlerën 0.5.

Zhvendosja e qetë e bllokut poshtë

kutia #5 (
margjina-fund: 5px;
ngjyra e sfondit: #ccc;
ngjyra: # 333;
mbushje: 10 px;
text-align: qendër;
gjerësia: 200 px;
lartësia: 100 px;

teksti-indent: 0px;
kufiri: 1px solid # 888;
-moz-tranzicion: të gjitha 1-at eaase-in-out;
-o-tranzicion: të gjitha 1-të lehtësi-në-jashtë;
-webkit-tranzicion: të gjitha 1-at eaase-in-out;
kursori: treguesi;)

# kutia 5: rri pezull (
ngjyra e sfondit: # 97CE68;
ngjyra: # 000;
-webkit-transform: translate (0.50px);
-moz-transform: translate (0.50px);
-o-transform: translate (0.50px);
}

Këtu lëvizja jepet në pixel. Në këtë rast (0.50 px). Ju gjithashtu mund ta bëni bllokun të lëvizë lart me këtë vlerë prej 0, -50 px. Ose diagonalisht poshtë 50 px, 50 px. Me një fjalë, blloku mund të bëhet për të lëvizur kudo.

Kjo është në thelb gjithçka që doja të them. Jo, jo të gjitha :-) Harrova t'ju kujtoj se ky animacion CSS mund të aplikohet në çdo objekt në faqe: imazhe, tekst, tituj, ikona, etj. Për lidhjet, një ndryshim i qetë i ngjyrës është i përsosur, për mendimin tim është shumë i bukur. :-)

E megjithatë, ky informacion u nda me ne nga faqja shpargalkablog.ru. Për të cilën shumë faleminderit për të.

Tani kjo është e gjitha e sigurt :-) Shihemi së shpejti, miq.

Pershendetje te gjitheve. Kohët e fundit kam hasur në një seri mësimesh video shumë të dobishme dhe interesante mbi temën " animacion CSS". Por ky është një fat i keq, të gjitha videot ishin në anglisht, dhe, me siguri, jo çdo stilist e di anglisht në një nivel të mjaftueshëm për të kuptuar dhe përvetësuar të gjithë informacionin e nevojshëm. Prandaj, vendosa t'i përkthej këto mësime për ju (ose më mirë, të bëj një përkthim falas). Nuk ka nevojë të falënderoni. Kështu që:

1. animacion CSS. Vetia e hyrjes + tranzicionit(Ky artikull)
2. animacion CSS. Kornizat kryesore - së shpejti
3. Kur dhe pse të përdorni animacionet CSS? - do të jetë së shpejti

Çfarë është animacioni CSS?

Para se t'ju tregoj se si të krijoni animacione CSS dhe pse ju duhen fare, do të doja t'ju shpjegoja fillimisht, cfare ndodhianimacion CSS, jepni një përkufizim ose diçka tjetër.

Animacioni në ueb ka dy ide kryesore. Ideja e parë është ringjall diçka... Ju jeni si Dr. Frankenstein. Ju keni një përbindësh të pajetë dhe i jepni jetë. E dyta është vizualizimi i lëvizjes... Dhe fjala kyçe këtu është "lëvizje".

Si të animoni?

Ekzistojnë dy mjete kryesore në CSS që mund t'i përdorim për të lëvizur elementët në një faqe interneti. E para (për të cilën do të flasim më vonë sot) është prona tranzicionit... Para së gjithash, është me ndihmën e tij që ne krijojmë animacione në CSS. Mjeti i dytë është prona animacion i çiftuar me kornizat kryesore(@keyframes - korniza kyçe). Ne do ta shqyrtojmë këtë mjet në më shumë detaje në tutorialin e ardhshëm, por tani do t'i hedhim një vështrim veçorisë së tranzicionit CSS. Dhe më pas do të flasim për atë që duhet të animohet në faqe (kur përdoruesi ka nevojë) dhe çfarë jo (kur animacioni duket budalla dhe i papërshtatshëm) bazuar në përvojën e përdoruesit (UX).

Vetia e tranzicionit CSS - parametrat dhe vlerat

Sintaksë

Së pari, le të hedhim një vështrim se si lexohet kjo veti dhe të zbërthejmë sintaksën e saj. Ne e shkruajmë këtë pronë si kjo:

tranzicionit: [prone] [kohëzgjatja] [funksioni i kohës] [vonesë] ;

tranzicionit: lartësia 1s lehtësim 0.2s;

Ne ia caktojmë këtë veti elementit që duam të animojmë. Ky element bëhet i qetë tranzicionit(ose hap pas hapi) midis disa prej gjendjeve të tij (për shembull, një lartësi prej 100 pikselësh dhe një lartësi prej 200 pikselësh). Dhe si do të duket kjo tranzicionit(nga tranzicioni në anglisht), do të varet nga parametrat që i japim.

Parametri (vlera) i parë i vetive të tranzicionit është një tjetër prone elementi që animohet (për shembull, lartësia).

Parametri i dytë është kohëzgjatja (kohëzgjatja) e animacionit, domethënë sa kohë do të duhet që një element të kalojë nga një gjendje në tjetrën (për shembull, 2s ose 2000ms).

Parametri i tretë është funksioni i kohës [kohafunksionin] (duke qenë funksioni [ lehtësiminfunksionin]). Si shpërndahet intensiteti i animacionit gjatë gjithë kohës. Për shembull, një animacion mund të fillojë befas, pastaj të ngadalësojë dhe të përfundojë pa probleme tranzicionin. Mund të përdoret si fjalë kyçe (për shembull, lehtësi,lehtësi-në-jashtë,lineare) dhe funksionet e kubit të Bezier (për shembull, kub-bezier (0,17, 0,67, 0,83, 0,67)). Mund ta personalizoni lehtësisht dhe me lehtësi kubin Bezier në këtë burim http://cubic-bezier.com, si dhe funksionin e hapave për të krijuar animacion kornizë pas kornizash (hap pas hapi).

Dhe së fundi, parametri vonesë... Vonesa e animacionit është sasia e kohës që duhet të prisni përpara se të fillojë animacioni (në rastin tonë, tranzicioni).

Shembull i animacionit të tranzicionit CSS

Le të hedhim një vështrim në këtë shembull të animacionit CSS:

tranzicioni: errësirë ​​300ms lehtësi në dalje 1s;

Këtu do të animojmë vetëm pronën errësirë(errësirë). Kjo do të thotë se nëse elementi që ne do të animojmë ka veti të tjera, për shembull, lartësinë, gjerësinë ose ngjyrën, dhe edhe nëse këto veti ndryshojnë në gjendje të ndryshme të elementit, atëherë vetëm vetia opacity do të ketë një tranzicion të qetë (animacion ). a e kuptoni?

Në vend të një vetie specifike, mund të përdorni gjithashtu fjalën kyçe " të gjitha". Kjo do të thotë që ne do të animojmë absolutisht të gjitha vetitë e elementit që janë ndryshuar në gjendjen e re të elementit (jo vetëm opacitetin), dhe që mund të animohen fare. Sepse, siç e dini, jo të gjitha pronat mund të animohen. Por më shumë për këtë më vonë.

Parametri i dyte ( 300 Znj) na tregon se animacioni do të zgjasë vetëm 300 milisekonda. Kjo do të thotë, elementi do të shfaqet shpejt ose shpejt i tretur, në varësi të vlerave të vetive në dy gjendjet e tij.

Funksioni i kohës ( lehtësi-në-jashtë) parametri i tretë do ta bëjë më të qetë fillimin dhe fundin e animacionit.

Vonesa ( 1 s) tregon se sa vonesë duhet të jetë animacioni përpara se të aktivizohet.

Në përgjithësi, kjo është formula se si do të shkruajmë animacionin e tranzicionit. Kjo është sintaksa. Ju, nëse ka ndonjë gjë, mund të shtoni më shumë se një tranzicion [vetitë] për një element. Për shembull, ju mund të animoni lartësinë dhe gjerësinë e një elementi me parametra të ndryshëm. Për ta bërë këtë, në vetinë e tranzicionit, në vend të pikëpresjes në fund, thjesht vendosni një presje dhe shkruani parametrat për një veçori më shumë. Dhe mos harroni të vendosni një pikëpresje në fund më pas për ta bërë atë të funksionojë.

Çfarë mund të animohet në CSS?

Deri më tani kemi diskutuar vetëm sintaksën e vetive të tranzicionit. Tani le të flasim për vetitë, cilat mund t'i gjallërojmë dhe cilat jo. Sepse ka disa gjëra që thjesht nuk kanë kuptim të animohen, dhe disa veti janë thjesht të pamundura për t'u gjallëruar.

Vetitë e animuara

Merrni, për shembull, veçori të tilla si:

1. përmasa e germave;
2. ngjyrë e sfondit;
3. gjerësia;
4. majtas (sa larg nga ana e majtë mund të zhvendoset elementi [pozicionuar] ...

Është e qartë se ka kuptim të animohen këto veti. Nëse ndryshoni vlerat e tyre, ai do të ndryshojë elementin vizualisht. Nëse ndryshoni madhësinë e shkronjave nga, të themi, 14 në 28 piksele, do të shihni që fonti është rritur gradualisht, ka ndodhur një animacion që zgjati për pak kohë. Animacioni ka gjithmonë kuptim nëse vlerat e vetive janë vlera të qarta (më shpesh numerike). Nëse rritni madhësinë e shkronjave në 100 piksele, atëherë mund të shihni qartë rritjen e shkronjave. Mund të vërehet gjithashtu ndryshimi i butë i ngjyrës së sfondit [sepse ngjyra në ueb ka një kod numerik, për shembull, të kuqe rgb (255,0,0)]. Këto veti janë të gjalla.

Në përgjithësi, mbani mend, nëse imagjinoni se është duke u animuar, atëherë mund të animohet. Më shpesh funksionon.

Vetitë jo të gjallërueshme

Dhe këtu është një listë e vetive që nuk mund të animohen (shembull):

1. shfaqja;
2. font-familje;
3. pozicioni...

Këto janë disa prej tyre që i mora si shembull në mënyrë që të mund të kuptoni ndryshimin midis vetive CSS të animuara dhe jo të animuara.

Le të shfaqim. A mund ta imagjinoni se si ndryshon midis " shfaq:bllok;" dhe " shfaq:ne rresht-bllok;"? Si mund të ndryshojë pa probleme pamja e një elementi midis " pozicioni:i afërm;"dhe" pozicioni:absolute;"? Jo, sigurisht, elementi do të duket ndryshe kur këto veti të ndryshohen. Por si mund ta imagjinoni tranzicionit? Ju nuk mund ta bëni këtë. E drejtë? Ju nuk mund ta imagjinoni transformimin e fontit Helvetica në font Gjeorgjia, çdo shkronjë, thjesht nuk do të funksionojë. Ju mund t'i ndryshoni këto fonte, por ato do të ndryshojnë papritur, nuk do të ndodhë asnjë animacion.

Performanca e animacionit në CSS

Në përgjithësi, shumë prona janë të animuara, por disa jo. Tani le të vendosim se cilat nga vetitë e animueshme janë më të mira për animacion dhe cilat janë më të këqija. Bëhet fjalë për performancën. Ne prekëm performancën sepse animacioni është një proces intensiv i burimeve.

Në përgjithësi, këtu janë gjërat që funksionojnë më mirë për animacion:

1. Pozicionimi në faqe
2. Shkallëzimi
3. Rrotullimi
4. Transparenca

Për më tepër, tre artikujt e parë të kësaj liste janë të gjithë parametra të vetive të transformimit (përkthe, shkallë, rrotullo). Pozicionimi ndodh përgjatë boshteve X dhe Y.

Nëse vendosni të animoni diçka tjetër, rrezikoni të mos merrni një tranzicion të qetë dhe të qetë me 60 korniza për sekondë. Paul Lewis & Irlandez

Dhe kjo është pikërisht ajo që na intereson kur flasim për performancën e animacionit. Në përgjithësi, vetitë më të përshtatshme për animacion janë transformuar dheerrësirë... Kur animoni diçka tjetër, fps e animacionit mund të bjerë shumë më poshtë se 60 fps.

Le ta përmbledhim këtë pikë si më poshtë. Përpiquni të shmangni rivizatimin e elementeve në faqen e internetit dhe animimin e elementeve që është e vështirë për shfletuesin t'i shfaqë (për shembull, hijet).

Si mund të animoj në CSS?

Tani le të kuptojmë se si të fillojmë animacionin. Çfarë duhet bërë që elementi të fillojë të animohet. Me fjale te tjera, si të bëni animacion nëCSS.

Nuk është e vështirë dhe ka shumë mënyra të ndryshme për ta bërë atë. Por ka 2 kryesore që duhet t'i zotëroni pa dështuar. Mënyra e parë është animacion kur rri pezull mbi një element(pseudo-klasa: rri pezull). Ju vendosni miun mbi një element dhe animacioni aktivizohet. Në këtë mënyrë, ju mund të animoni vetë elementin ose ndonjë nga fëmijët e tij. Pastaj do t'ju tregoj se si funksionon. Mënyra e dytë është ndryshimi i klasës së një elementi... Kjo do të thotë, ju keni një element të rregullt, ju ndryshoni (ose shtoni) klasën e tij në një klasë që ka stile krejtësisht të ndryshme. Nëse shtoni një klasë, animimi do të ndodhë, dhe nëse e hiqni klasën, animimi i kundërt do të ndodhë. Kjo është një mënyrë e mirë për të animuar menytë ose pikat rënëse.

Pasthënie

Ne kemi mbuluar gjithçka që duhet të bëjmë për të krijuar një animacion të pastër CSS. Shumë shpejt do të analizojmë shembuj praktikë, dhe pak më vonë - shembuj shumë interesantë.

E keni lexuar deri në fund?

A ju ndihmoi ky artikull?

Jo ne te vertete

Çfarë nuk ju pëlqeu saktësisht? A ishte artikulli i paplotë apo i rremë?
Shkruani në komente dhe ne premtojmë të përmirësohemi!