Shembuj të animacionit Css3. Unazë e dyfishtë e animuar

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 ndezur gjuhe angleze, dhe, me siguri, jo çdo stilist e di anglisht në një nivel të mjaftueshëm për të kuptuar dhe zotëruar 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, si lartësia, gjerësia ose ngjyra, dhe edhe nëse këto veti ndryshojnë në kushte të ndryshme element, atëherë tranzicion i qetë(animacion) do të ketë vetëm vetitë e tejdukshmërisë... a e kuptoni?

Në vend të pronë specifike ju gjithashtu mund të përdorni 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 me parametra të ndryshëm duke ndryshuar lartësinë dhe gjerësinë e elementit. Për ta bërë këtë, në vetinë e tranzicionit, në vend të një pikëpresjeje 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 ta shihni fontin të zmadhohet pa probleme, ka pasur një animacion që zgjati për një 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 pamjen element 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. Do të shkojë në lidhje me 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 transformojnë vetitë(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ë menyra te ndryshme... 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. Kështu, ju mund të animoni vetë elementin ose ndonjë prej tij. elementet fëmijë... Pastaj do t'ju tregoj se si funksionon. Mënyra e dytë është ndryshimi i klasës së një elementi... Kjo është, ju keni element i rregullt, ju ndryshoni (ose shtoni) klasën e saj 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 mënyrë e mirë për të animuar menytë ose pikat rënëse.

Pasthënie

Ne kemi mbuluar gjithçka që na nevojitet për të krijuar animacion CSS e pastër... Do të merremi me të shumë shpejt 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!

Ky koleksion përmban çipat CSS më të mirë dhe me cilësi më të lartë. Këtu mund të gjeni demonstrime dhe teknika të ndryshme dhe të mahnitshme nga stilistë dhe stilistë të famshëm të paraqitjes, të cilët po përpiqen të vërtetojnë se tani është e mundur të bësh pothuajse gjithçka vetëm në CSS të pastër. Gjithashtu këtu mund të gjeni disa mësime në të cilat përshkruhet në detaje se si të bëni një krijim të tillë. Shpresoj që ky koleksion të jetë i dobishëm për ju.

CSS retë 3D

Në këtë demonstrim mund të krijoni dhe modifikoni retë e zbukuruara në 3D. Këto re CSS na e bëjnë të qartë se mundësitë e teknologjive të ueb-it janë pothuajse të pafundme.

Logo të pastra CSS

Këta janë shembuj të logove të bëra vetëm në CSS të pastër. Vetëm mendoni, asnjë imazh nuk është përdorur në krijim. Është thjesht diçka.

Alfabeti me animacion CSS

Shembull i shkëlqyer dhe artistik duke përdorur CSS në alfabet

Navigimi 3D për sitin

Shirit i thjeshtë por shumë elegant navigimi për një faqe interneti, sigurisht i bërë vetëm me CSS3. asnjë imazh apo skript.

Google Doodle me CSS

Një nga fotografitë e shumta nga motor kërkimi google bërë në CSS. Ky është një shembull i shkëlqyer përdorim cilësor animacione CSS

Rrëshqitës

Një rrëshqitës i bërë mirë për fotografi. Plus 4 shembuj në demo.

Unazë e dyfishtë e animuar

Animacion i bukur dhe unazë shumëngjyrëshe me jo të fortë kod i madh CSS

Mjegulloni në CSS

Më duket se filtri është shumë i nevojshëm, veçanërisht pasi është bërë në CSS të pastër. duke përdorur turbullimin, mund të tërhiqni vëmendjen e përdoruesit në një pikë të caktuar.

Udhëzuesi përfundimtar për Flexbox

Ky artikull ka të bëjë me flexboxet reaguese. Ai tregon plotësisht për këto blloqe, megjithëse artikulli është në anglisht.

Menu e gjallë dhe e animuar CSS3

Meny e këndshme rënëse për sitin me ikona. Një plus i madh është se është bërë tërësisht në CSS.

Filtrat CSS

Material cilësor anglisht për të cilin flitet duke aplikuar CSS filtra në imazhe.

Format CSS

Postoni rreth Format CSS me shembuj të shumtë

Shiritat e progresit të CSS

Një mësim se si të krijoni shirita progresi elegant me CSS dhe animacion të pastër. Ju gjithashtu mund të shihni një shembull dhe të shkarkoni burimet.

Animacion - Animate.css

Projekti më i popullarizuar i animacionit CSS në internet sot. Dhe ndoshta më e thjeshta dhe cilësia më e lartë, dhe gjithashtu falas.

Treguesit e ngarkimit - Spinkit

Të them të drejtën, këta tregues tashmë janë plotësuar në blog, por më duket se duhet t'ju tregohen përsëri. Pasi këta janë treguesit më të bukur të CSS në internet.

Butonat

Tani butonat janë të ndezur CSS tashmë vështirë të befasosh, por është një opsion mjaft i mirë

Gjenerator për krijimin e çelsave

Të vogla dhe internet me cilësi të lartë aplikacion me të cilin mund të krijoni çelësa të bukur për t'u përdorur në sit.

Këshilla për veglat

Biblioteka CSS e këshillave falas - Hint.css

Skemat e ngjyrave

Skemat e ngjyrave për njerëzit që nuk u pëlqen të gërmojnë kodin

animacion CSS3 i bën faqet e internetit dinamike. Ai i jep jetë faqeve të internetit, duke përmirësuar përvojën e përdoruesit. Ndryshe nga tranzicionet CSS3, krijimi i animacionit bazohet në kornizat kryesore, të cilat ju lejojnë të luani dhe përsërisni automatikisht efektet për një kohë të caktuar, si dhe të ndaloni animacionin brenda një cikli.

Animacioni CSS3 mund të aplikohet pothuajse në të gjithë elementët html, si dhe në: para dhe: pas pseudo-elementeve. Lista e vetive të animuara është dhënë në faqe. Kur krijoni animacion, mos harroni problemet e mundshme me performancë, pasi ndryshimi i disa vetive kërkon shumë burime.

Hyrje në animacionin CSS

Mbështetja e shfletuesit

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Krom: 43.0, 4.0 -kit në internet-
Safari: 4.0 -kit në internet-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -kit në internet-
Opera Mini: —
Shfletuesi Android: 44, 4.1 -kit në internet-
krom për Android: 44

1. Rregulli @keyframes

Animacioni fillon me instalimin personelin kryesor Rregullat @keyframes. Kornizat përcaktojnë se cilat veçori në cilin hap do të animohen. Çdo kornizë mund të përfshijë një ose më shumë blloqe deklarimi të një ose më shumë çifteve të vetive dhe vlerave. Rregulli @keyframes përmban emrin e animacionit të elementit që lidh rregullin dhe bllokun e deklarimit të elementit.

@keyframes shadow (nga (tekst-hije: 0 0 3px e zezë;) 50% (tekst-hije: 0 0 30px e zezë;) në (tekst-hije: 0 0 3px e zezë;))

Kornizat kryesore krijohen duke përdorur fjalë kyçe nga dhe në (ekuivalente me 0% dhe 100%) ose në pikë përqindjeje, të cilat mund të vendosen sa herë të doni. Ju gjithashtu mund të kombinoni fjalë kyçe dhe pikë përqindjeje. Nëse kornizat kanë të njëjtat veti dhe vlerat, ato mund të kombinohen në një deklaratë:

@keyframes lëviz (nga, në (lart: 0; majtas: 0;) 25%, 75% (lart: 100%;) 50% (lart: 50%;))

Nëse kornizat 0% ose 100% nuk ​​janë të specifikuara, atëherë shfletuesi i përdoruesit i krijon ato duke përdorur vlerat e llogaritura (të vendosura fillimisht) të pronës së animuar. Nëse dy korniza kyçe kanë të njëjtët përzgjedhës, atëherë tjetri do të anulojë veprimin e të mëparshmit.

Pasi të deklarohet rregulli @keyframes, ne mund t'i referohemi atij në vetinë e animacionit:

H1 (madhësia e shkronjave: 3,5em; ngjyra: e errët magenta; animacion: shadow 2s infinite ease-in-out;)

Nuk rekomandohet të animohet vlerat numerike(me përjashtime të rralla), pasi rezultati në shfletues mund të jetë i paparashikueshëm. Gjithashtu, mos bëni korniza kyçe për vlerat e pronave që nuk kanë një pikë mes, siç janë vlerat vetitë e ngjyrave: rozë dhe ngjyra: #ffffff, gjerësia: auto dhe gjerësia: 100 px ose kufiri-radius: 0 dhe kufiri-radius: 50% (në këtë rast, do të ishte e saktë të specifikonim kufirin-radius: 0%).

2. Emri i animacionit-emri i animacionit

Vetia cakton emrin e animacionit. Emri i animacionit krijohet në rregullin @keyframes. Rekomandohet të përdorni një emër që pasqyron thelbin e animacionit, ndërsa mund të përdorni një ose më shumë fjalë të lidhura me njëra-tjetrën duke përdorur një hapësirë ​​- ose një simbol nënvizoj _. Prona nuk është e trashëguar.

Sintaksë

Div (emri i animacionit: mymove;)

3. Kohëzgjatja e animacionit animacion-kohëzgjatja

Vetia cakton kohëzgjatjen e animacionit, të vendosur në sekonda ose milisekonda, vlerat negative nuk lejohen. E pa trashëguar. Nëse për një element është specifikuar më shumë se një animacion, atëherë mund ta vendosni kohë të ndryshme për secilën, duke renditur vlerat e ndara me presje.

Sintaksë

Div (animacion-kohëzgjatja: 2s;)

4. Funksioni i kohës animacion-kohë-funksion

Vetia përcakton ndryshimin e shpejtësisë nga fillimi në fund të animacionit duke përdorur funksione të përkohshme. Specifikuar duke përdorur fjalë kyçe ose kub-bezier (x1, y1, x2, y2). E pa trashëguar.

Sintaksë

Div (animacion-kohë-funksion: linear;)

Nëpërmjet animacion hapash ju mund të krijoni efekte interesante të tilla si shtypja e tekstit ose shiriti i përparimit të ngarkimit.

5. Animacion me vonesë animacion-vonesë

Vetia injoron animacionin për një kohë të caktuar, gjë që bën të mundur fillimin e secilit animacion individualisht. Një vonesë negative e nis animacionin nga një pikë e caktuar brenda ciklit të tij, d.m.th. nga koha e treguar në vonesë. Kjo lejon që animacionet të aplikohen në elementë të shumtë të zhvendosur në fazë duke ndryshuar vetëm kohën e vonesës.

Për të nisur animacionin në mes, duhet të vendosni një vonesë negative të barabartë me gjysmën e kohës së caktuar në kohëzgjatjen e animacionit. E pa trashëguar.

Sintaksë

Div (animacion-vonesa: 2s;)

6. Animacion përsëritje-përsëritje-numërim

Vetia lejon që animacioni të ekzekutohet disa herë. Një vlerë prej 0 ose ndonjë numër negativ e heq animacionin nga luajtja. E pa trashëguar.

Sintaksë

Div (animacion-përsëritje-numërimi: 3;)

7. Drejtim i animacionit animacion-drejtim

Vetia cakton drejtimin në të cilin animacioni përsëritet. Nëse animacioni përsëritet vetëm një herë, atëherë kjo veti është e pakuptimtë. E pa trashëguar.

Sintaksë

Div (drejtimi-animacion: alternativ;)

8. Regjistrim i shkurtër i animacionit

Të gjithë parametrat e riprodhimit të animacionit mund të kombinohen në një veti - animacion, duke i renditur ato të ndara me një hapësirë:

Animacion: animacion-emër animacion-kohëzgjatje animacion-kohë-funksion animacion-vonesë animacion-iteriacion-count animacion-drejtim;

Për të luajtur animacionin, mjafton të specifikoni vetëm dy veti - emri i animacionit dhe kohëzgjatja e animacionit, pjesa tjetër e vetive do të marrin vlerat e paracaktuara. Rendi në të cilin janë renditur pronat nuk ka rëndësi, e vetmja gjë është koha e funksionimit animacion-kohëzgjatja duhet të vijë gjithmonë përpara vonesës së animacionit.

9. Riprodhimi i animacionit animacion-play-state

Vetia kontrollon luajtjen dhe ndalimin e animacionit. Ndalimi i animacionit brenda një cikli është i mundur duke përdorur këtë veçori në Skript JavaScript... Ju gjithashtu mund të ndaloni animacionin kur rri pezull mbi një objekt - gjendja: rri pezull. E pa trashëguar.

Sintaksë

Div: rri pezull (animacion-play-state: në pauzë;)

10. Gjendja e elementit para dhe pas animacionit luhet animacion-fill-mode

Vetia përcakton rendin në të cilin stilet e përcaktuara në @keyframes zbatohen në objekt. E pa trashëguar.

Shumë vizitorë pyesin veten se si ta përdorin në praktikë bibliotekën Animate.css. Në realitet, gjithçka ndodh mjaft thjesht, ju vetëm duhet të kaloni të gjitha fazat një herë, dhe më pas, për analogji, të përsërisni disa veprime.

1. Së pari ju duhet të shkarkoni dhe lidhni bibliotekën. Ka tre opsione.

• Versioni i plotë. Përmban më shumë se tre mijë rreshta kodi, me madhësi rreth 60 KB. Ai është i përshtatshëm për fazën e parë të njohjes me animacionin në përgjithësi, pasi ju lejon të shikoni se si funksionon gjithçka.
• Versioni i mbushur (i turbulluar duke thënë gjuha profesionale). Nuk ka skeda, hapësira dhe ndërprerje rreshtash në skedarin css. Për shkak të kësaj, madhësia e skedarit zvogëlohet me një herë e gjysmë, por leximi i kodit bëhet i vështirë.
• Efektet selektive. Ai është më i përshtatshmi për shumicën e detyrave, pasi ju lejon të specifikoni vetëm efektet që ju pëlqejnë, duke hequr qafe ato të panevojshme.

2. Për të aplikuar efektin e animacionit në elementin e dëshiruar, shtoni dy klasa në të - të animuar dhe një klasë me emrin e efektit, le të themi fadeInDown (shih listën e të gjitha efekteve dhe emrat e tyre). Për shembull, supozoni se dëshironi të shtoni dridhje në të gjitha imazhet në një faqe. Në HTML, shkruani sa vijon:

Nëse faqja përdor jQuery, atëherë shtimi i klasave thjeshtohet dhe bëhet përmes JavaScript.

3. Vetë animacioni ndizet automatikisht kur faqja ngarkohet. Kjo është e dobishme për mesazhet pop-up që synojnë të tërheqin vëmendjen e përdoruesit (shembulli 1).

Shembull 1. Mesazh pop-up

Që efekti të aktivizohet kur kursori i miut qëndron pezull mbi një element, duhet të përdorni JavaScript. Si shembull, merrni parasysh fotot që lëvizin kur rri pezull mbi to me kursorin e miut. Shkoni te etiketimi shtoni klasën e animuar dhe përfshini jQuery (shembulli 2).

Shembulli 2. Galeria

V ky shembull kur rri pezull mbi imazhin e animuar, shtohet një klasë tjetër kërcimi; nëse kursori hiqet, atëherë hiqet edhe klasa e kërcimit.

4. Së fundi, mund ta personalizoni animacionin sipas dëshirës tuaj duke ndryshuar shpejtësinë e animacionit, si dhe duke vendosur kohën e vonesës nëpërmjet CSS. Të dyja janë opsionale dhe aplikohen sipas nevojës.

Animuar (-webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: 0.6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o -vonesa e animacionit: 1s; -moz-vonesa e animacionit: 1s; vonesa e animacionit: 1s;)

Përshëndetje të dashur lexues. Në këtë ditë, le të flasim, pak a shumë, gjë 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ë në këtë rast kushton 0,8 s derisa ngjyra të ndryshojë plotësisht kur rri pezull dhe 0,1 s përpara se të fillojë animacioni pasi të rri pezull dhe të largohet kursorin. (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. Vlera standarde 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 zmadhoni 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-transform: 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 :-) Kam harruar t'ju kujtoj se kjo 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.