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

Së pari Shënimi 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 e jashtme lart dhe poshtë me 20 px dhe shtrirje në qendër * / 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ë e prefiksuar 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 fituara - krijoni dokument HTML dhe skedar CSS, dhe aty futni (a duar më të mira shkruani) 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, atëherë e keni kuptuar tashmë të gjithë procesin dhe tani doni të dini se si mund të krijoni një më kompleks dhe animacion i 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.

| 18.02.2016

CSS3 hap mundësi të pakufizuara për dizajnerët e UI, dhe avantazhi kryesor është se pothuajse çdo ide mund të zbatohet dhe zbatohet lehtësisht pa përdorur JavaScript.

Është e mahnitshme se sa gjëra të thjeshta mund të gjallërojnë një faqe interneti të rregullt, duke e bërë atë më të aksesueshme për përdoruesit. Eshte rreth tranzicioneve CSS3, me të cilat mund të lejoni që një element të transformojë dhe të ndryshojë stilin, për shembull, në lëvizje. Nëntë shembujt e animacioneve CSS3 të disponueshme më poshtë do të ndihmojnë në krijimin e një atmosfere të përgjegjshme në faqen tuaj dhe gjithashtu do të përmirësojnë formë e përgjithshme faqe falë tranzicioneve të bukura të lëmuara.

Për informacion më të detajuar, mund të shkarkoni arkivin me skedarët.

Të gjitha efektet funksionojnë duke përdorur veçorinë e tranzicionit. tranzicionit- "tranzicioni", "transformimi") dhe pseudo-klasa: hover, e cila përcakton stilin e elementit kur kaloni mbi të me kursorin e miut (në tutorialin tonë). Për shembujt tanë, ne kemi përdorur bllok div madhësia 500 × 309 piksele, ngjyra origjinale e sfondit # 6d6d6d dhe kohëzgjatja e kalimit nga një gjendje në tjetrën 0,3 sekonda.

Trupi> div (gjerësia: 500 px; lartësia: 309 px; sfondi: # 6d6d6d; -webkit-transition: all 0.3s ease ;; -moz-transition: all 0.3s ease ;; -o-transition: all 0.3s ease ;; tranzicioni: të gjitha 0.3s lehtësi;)

1. Ndrysho ngjyrën kur rri pezull

Njëherë e një kohë, zbatimi i një efekti të tillë ishte një punë mjaft e mundimshme, me llogaritjet matematikore vlera specifike RGB. Tani për tani, mjafton të shkruajmë Stili CSS, në të cilën duhet të shtoni: hover pseudo-klasa në përzgjedhës dhe vendoseni ngjyrë e sfondit, e cila do të zëvendësojë pa probleme (në 0,3 sekonda) ngjyrën origjinale të sfondit kur rri pezull mbi bllok:

Ngjyra: rri pezull (sfondi: # 53ea93;)

2. Pamja e kornizës

Një transformim interesant dhe i gjallë - një kornizë e brendshme që shfaqet pa probleme në lëvizjen e miut. E mirë për të dekoruar butona të ndryshëm. Për të arritur këtë efekt, ne përdorim: hover pseudo-class dhe vetinë box-shadow me parametrin inset (vendos hijen brenda elementit). Përveç kësaj, do t'ju duhet të vendosni shtrirjen e hijes (në rastin tonë, është 23 px) dhe ngjyrën e saj:

Kufiri: rri pezull (kuti-hije: futur 0 0 0 23px # 53ea93;)

3. Lëkundje

Ky animacion CSS është një përjashtim pasi vetia e tranzicionit nuk përdoret këtu. Në vend të kësaj, ne përdorëm:

• @keyframes është një direktivë bazë për krijimin e animacioneve CSS kornizë për kornizë që ju lejon të bëni të ashtuquajturat. përshkrimi dhe përshkruani animacionin si një listë pikash kryesore;
• animacion dhe animacion-përsëritje-count - vetitë për vendosjen e parametrave të animacionit (kohëzgjatja dhe shpejtësia) dhe numri i cikleve (përsëritjet). Në rastin tonë, përsërisni 1.

@ -webkit-keyframes lëkundje (15% (-webkit-transform: translateX (9px); transformim: translateX (9px);) 30% (-webkit-transform: translateX (-9px); transform: translateX (-9px); ) 40% (-webkit-transform: translateX (6px); transformim: translateX (6px);) 50% (-webkit-transform: translateX (-6px); transform: translateX (-6px);) 65% (-webkit -transformoj: translateX (3px); transformim: translateX (3px);) 100% (-webkit-transform: translateX (0); transformim: translateX (0);)) @keyframes swing (15% (-webkit-transform: translateX (9px); transformim: translateX (9px);) 30% (-webkit-transform: translateX (-9px); transformim: translateX (-9px);) 40% (-webkit-transform: translateX (6px); transformoj : translateX (6px);) 50% (-webkit-transform: translateX (-6px); transform: translateX (-6px);) 65% (-webkit-transform: translateX (3px); transform: translateX (3px); ) 100% (-webkit-transform: translateX (0); transformim: translateX (0);)) .luhatje: rri pezull (-webkit-animation: s krahu 0.6s lehtësi; animacion: lëkundje 0.6s lehtësi; -webkit-animation-iteration-count: 1; animacion-përsëritje-numërim: 1; )

4. Zbutja

Një efekt fade është në thelb një ndryshim i thjeshtë në transparencën e një elementi. Animacioni krijohet në dy faza: së pari, ju duhet të vendosni gjendjen fillestare të transparencës në 1 - domethënë patejdukshmëri të plotë, dhe më pas të specifikoni vlerën e tij në maus mbi - 0.6:

Zbehet (errësirë: 1;) .zbehet: rri pezull (opaciteti: 0,6;)

Për rezultatin e kundërt, ndërroni vlerat:

5. Rritja

Për ta bërë bllokun të rritet në lëvizje, ne do të përdorim vetinë e transformimit dhe do ta vendosim në shkallë (1.2). Në këtë rast, blloku do të rritet me 20 përqind duke ruajtur përmasat e tij:

Rritje: rri pezull (-webkit-transform: shkalle (1.2); -ms-transform: shkalle (1.2); transformim: shkalle (1.2);)

6. Ulje

Tkurrja e një elementi është po aq e lehtë sa ta bësh atë më të madh. Nëse në paragrafin e pestë, për të rritur shkallën, na duhej të specifikonim një vlerë më të madhe se 1, atëherë për të zvogëluar bllokun, thjesht specifikojmë një vlerë që do të jetë më e vogël se një, për shembull, shkalla (0.7). Tani, me lëvizjen e miut, blloku do të tkurret proporcionalisht me 30 përqind të madhësisë së tij origjinale:

Tkurret: rri pezull (-webkit-transform: shkalle (0.7); -ms-transformim: shkalle (0.7); transformim: shkalle (0.7);)

7. Shndërrimi në një rreth

Një nga animacionet e përdorura zakonisht është një element drejtkëndor që shndërrohet në një rreth në lëvizje. Përdorimi i pronës Rrezja kufitare CSS përdoret në lidhje me: hover dhe tranzicion, kjo mund të bëhet pa problem:

Rrethi: rri pezull (rrezja e kufirit: 70%;)

8. Rrotullimi

Një opsion qesharak i animacionit është të rrotulloni një element në një numër të caktuar gradësh. Për këtë do të na duhet përsëri transformimin e pronës, por me një vlerë të ndryshme - rotateZ (20deg). Me këto parametra, blloku do të rrotullohet 20 gradë në drejtim të akrepave të orës rreth boshtit Z:

Rrotulloni: rri pezull (-webkit-transform: rrotullojZ (20 gradë); -ms-transformoj: rrotullojZ (20 gradë); transformim: rrotullojZ (20 gradë);)

Hije 9.3D

Dizajnerët nuk pajtohen nëse ky efekt është i përshtatshëm për dizajn të sheshtë. Megjithatë, ky animacion CSS3 është shumë origjinal dhe përdoret gjithashtu në faqet e internetit. Ne do të arrijmë një efekt tre-dimensional duke përdorur vetitë tashmë të njohura të hijes së kutisë (do të krijojmë një hije me shumë shtresa) dhe do të transformojmë me parametrin translateX (-7 px) (do të sigurojë një zhvendosje horizontale të bllokut majtas me 7 pikselë ):

Treshe: rri pezull (kuti-hije: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53px 5px # 53px 5px # 53px 3px93, 3px 3px, 3px, 3px, 3px, 3px, 3px, 3 px, -7px); transformimi: translateX (-7px);)

Mbështetja e shfletuesit

Vetia e tranzicionit aktualisht mbështetet nga shfletuesit e mëposhtëm:

Shfletuesit e desktopit
Internet Explorer	Mbështetur nga IE 10 dhe më lart
krom	Mbështetet nga versioni 26 (deri në versionin 25 funksionon me prefiksin -webkit-)
Firefox	Mbështetet që nga versioni 16 (në versionet 4-15 funksionon me prefiksin -moz-)
Opera	Mbështetet që nga versioni 12.1
Safari	Mbështetet që nga versioni 6.1 (në versionet 3.1-6 funksionon me prefiksin -webkit-)

Pjesa tjetër e veçorive të përdorura në këta shembuj, si transformimi, kuti-hija, etj., mbështeten gjithashtu nga pothuajse të gjithë. shfletues modern... Megjithatë, nëse do t'i përdorni këto ide për projektet tuaja, ju rekomandojmë fuqimisht që të kontrolloni dy herë për pajtueshmërinë e ndërshfletuesve.

Shpresojmë që këta shembuj të animacionit CSS3 të jenë të dobishëm për ju. Ju urojmë suksese krijuese!

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ëj tipe te ndryshme animacione për një artikull?
• animate një veçori specifike vetëm në Gjysma e rruga?
• imitoj funksione të ndryshme koha 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 ( Elementet 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: duhet lëvizja të shkojë në ana e kundërt ose 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ë kyçe nga dhe në në vend të 0% dhe 100%, përkatësisht.

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ërpara se të vinte CSS3, fjala "animacion" do t'u jepte dizenjuesve të faqosjes një djersë të ftohtë. Dhe gjithçka sepse në ato ditë nuk ishte një detyrë e parëndësishme të bësh animacion me cilësi të lartë dhe të bukur. CSS nuk mund ta bënte këtë, kështu që të gjitha animacionet u bënë në JavaScript. Ishte e nevojshme të shfletosh nëpër një mori forumesh, të gjeje të njëjtët shokë në fatkeqësi, të shpenzoje shumë kohë në zhvillim dhe në fund të dëgjoje nga stilisti: "Mirë, kjo është mirë". Dhe kur më në fund doli CSS3, fishekzjarrët vazhduan deri në mëngjes dhe shampanja rridhte si ujë. Ishte një ditë e madhe për të gjithë zhvilluesit e uebit (dita tjetër ishte kur Microsoft njoftoi se do t'i jepte fund mbështetjes për Internet Explorer). Me ardhjen e CSS3, shumë më herët detyra sfiduese janë bërë të thjeshta dhe të këndshme për të punuar. E njëjta gjë vlen edhe për animacionet CSS, të cilat do t'i trajtoj në këtë artikull.

Tranzicionet CSS

Tranzicionet CSS ju lejojnë të bëni ndryshime në vetitë e CSS pa probleme dhe me kalimin e kohës. Kështu, ju merrni mundësinë për të kontrolluar procesin e kalimit të një elementi nga një gjendje në tjetrën. Le të fillojmë me shembullin më të thjeshtë dhe të vazhdojmë.

Kur rri pezull mbi një katror, ​​ngjyra e sfondit ndryshon pa probleme.

Tani le të hedhim një vështrim më të afërt se si të menaxhojmë tranzicionet në CSS. Ne jemi të armatosur me vetëm 5 veti që ju lejojnë të kontrolloni animacionin e tranzicionit:

• tranzicioni-pronë;
• tranzicioni-kohëzgjatja;
• tranzicioni-koha-funksioni;
• kalim-vonesa;
• tranzicioni;

tranzicioni-pronë- tregon një listë të vetive që do të animohen; pronat që nuk janë të listuara këtu do të ndryshojnë normalisht. Ju mund të animoni të gjitha vetitë për një element specifik duke specifikuar vlerën të gjitha. Nëse nuk keni specifikuar ndonjë veçori, atëherë parazgjedhja është e gjitha.

Tranzicioni-pasuria: gjerësia;

tranzicioni-kohëzgjatja- cakton kohëzgjatjen e animacionit, koha mund të specifikohet në sekonda ose milisekonda.

Tranzicioni-kohëzgjatja: 1s;

tranzicioni-koha-funksioni- funksioni i kohës, tregon pikat e nxitimit dhe ngadalësimit për periudhë të caktuar koha për të kontrolluar ndryshimin në shpejtësinë e animacionit. Me fjalë të thjeshta, mund ta përdorni këtë veti për të specifikuar sjelljen për një animacion. Për shembull, ne mund të shpejtojmë animacionin në fillim dhe të ngadalësojmë në fund, ose anasjelltas. Kurbat Bezier përdoren për të përcaktuar procesin e animimit. Në përgjithësi, funksioni i tranzicionit-kohë-funksioni ju lejon të bëni shumë sjellje të ndryshme për animacione, kjo është një temë e tërë për një artikull, kështu që ne nuk do të shkojmë më thellë këtu.

Funksioni i kohës së tranzicionit: kub-bezier (0, 0, 1, 1);

kalim-vonesë- cakton vonesën kohore përpara fillimit të animacionit, mund ta specifikoni në sekonda ose milisekonda.

Vonesë e tranzicionit: 500ms;

tranzicionit- atë pronë e përbashkët, i cili ju lejon të renditni katër vetitë e para sipas radhës: vetitë, kohëzgjatja, funksioni-koha, vonesa.

Tranzicioni: ngjyra e sfondit 1s kub-bezier (0, 0, 1, 1) 500ms;

Ne e morëm këtë animacion i thjeshtë: kur kaloni miun mbi një katror, ​​gjerësia ndryshon; kohëzgjatja e animacionit është një sekondë; animacioni luhet nga funksion linear; vonesë para fillimit të animacionit 500 milisekonda.

ME duke përdorur CSS tranzicionet mund të animojnë pothuajse të gjitha vetitë dhe të krijojnë shumë animacione interesante, të bukura, funksionale dhe madje komplekse që do të plotësojnë dhe përmirësojnë projektin tuaj. Për shembull, unë bëra një Material-FAB ​​si ky CSS e pastër duke përdorur tranzicionet:

animacione CSS

Animacionet CSS lejojnë animacione më komplekse sesa tranzicionet CSS. I gjithë sekreti është në @keyframes. Rregulli @keyframes ju lejon të krijoni animacion duke përdorur një grup kornizash kyç, domethënë ai përshkruan gjendjen e një objekti në një moment të caktuar kohor. Le të hedhim një vështrim në një shembull të thjeshtë.

Rrethi ynë ka marrë jetë dhe duket se po pulson.

Ka 9 veti që ju lejojnë të kontrolloni animacionet CSS:

• Emri i animacionit;
• animacion-kohëzgjatja;
• animacion-kohë-funksion;
• animacion-vonesa;
• animacion-përsëritje-numërim;
• animacion-regji;
• animacion-luaj-gjendje;
• animacion-mbushje-mode;
• animacion;

Emri i animacionit- ky është emri i animacionit që lidh rregullin @keyframes me përzgjedhësin.

Emri i animacionit: animacioni im; @keyframes my-animation (0% (opacity: 0;) 100% (opacity: 1;))

animacion-përsëritje-numërim- vendos numrin e përsëritjeve të animacionit, vlera e paracaktuar është 1. Vlera e pafund do të thotë që animacioni do të luhet pafundësisht.

Animacion-përsëritje-numërim: 2;

animacion-regji- vendos drejtimin e animacionit.

Animacion-drejtim: anasjelltas;

animacion-luaj-gjendje - këtë pronë kontrollon ndalimin dhe luajtjen e animacionit. Ka dy vlera, në ekzekutim (animacioni luhet, si parazgjedhje) dhe në pauzë (ndalon animacionin).

Animacion-play-state: në pauzë;

animacion-mbushje-mode- përcakton cilat veti CSS do të aplikohen në objekt para ose pas animacionit. Mund të marrë vlerat e mëposhtme:

• asnjë - vetitë e animuara CSS do të aplikohen në objekt vetëm gjatë riprodhimit të animacionit, pas përfundimit objekti kthehet në gjendjen e tij origjinale;
• përpara - vetitë e animuara CSS do të aplikohen në objekt kur animacioni të përfundojë së luajturi.
• prapa - vetitë e animuara CSS do të aplikohen në objekt përpara se animacioni të fillojë të luajë.
• të dyja - vetitë e animuara CSS do të aplikohen në objekt si përpara dhe pas luajtjes së animacionit;

Modaliteti i mbushjes së animacionit: prapa;

Vetitë animacion-kohëzgjatja, animacion-kohë-funksion, animacion-vonesa punoni në të njëjtën mënyrë si vetitë e ngjashme në tranzicionet CSS, për të cilat kam shkruar më herët, kështu që nuk do ta përsëris veten.

Me animacionet CSS mund të krijoni animacione mjaft komplekse pa duke përdorur JavaScript... Një shembull i mrekullueshëm janë ngarkuesit, domethënë elementët që tregojnë se diçka po ngarkohet në faqen tuaj. Ketu jane disa shembuj:

Moduli i Rrugës së Lëvizjes

Moduli i Rrugës së Lëvizjes CSS ju lejon të krijoni lëvizje të objekteve përgjatë një shtegu përmes veçorisë së veçantë të rrugës së lëvizjes. Më parë, ky animacion mund të bëhej vetëm me duke përdorur SVG ose skriptet komplekse.

Ky specifikim ka 3 veti:

• shtegu i lëvizjes;
• lëvizje-offset;
• lëvizje-rrotullim;

lëvizje-shtegu- kjo veti ju lejon të specifikoni pikat (koordinatat) përgjatë të cilave do të lëvizë objekti. Sintaksa është e njëjtë me atributin e rrugës SVG.

Rruga e lëvizjes: shteg ("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

lëvizje-kompensimi- kjo veti e vë objektin në lëvizje nga pika e fillimit deri në pikën e fundit. Ajo merr ose dyfishin e gjatësisë ose një përqindje. Që objekti të fillojë të lëvizë, duhet të përcaktoni një animacion që do të shkojë nga 0 në 100%.

@keyframes aeroplan-fly (0% (lëvizja e zhvendosjes: 0;) 100% (zhvendosja e lëvizjes: 100%;))

lëvizje-rrotullim- kjo veti ju lejon të specifikoni se në cilën anë objekti do të lëvizë përpara. Ju mund të specifikoni vlerën automatike, të kundërt ose vlerën tuaj në gradë ("-45 gradë", "30 gradë", etj.).

Lëvizje-rrotullim: auto;

Fatkeqësisht, motion-path aktualisht mbështetet vetëm në Chrome dhe Opera, por le të shpresojmë që shfletuesit e tjerë do të ndjekin së shpejti shembullin e tyre, sepse gjëja është vërtet e dobishme.

Për ata që nuk e kanë kuptuar ende se si funksionon, ose duan ta kuptojnë më mirë, bëra një shembull (link to codeopen).

Gjithnjë e më shumë në shumë faqe e uljes ose faqet promovuese, mund të gjeni efekte të ndryshme animacion. Në fund të fundit, ata e bëjnë faqen më interesante dhe tërheqëse.

Në thelb, këto efekte vendosen ose në ndonjë ngjarje (duke klikuar ose duke qëndruar pezull mbi një element), ose në momentin e lëvizjes së faqes. Unë mendoj se ju keni parë faqe si kjo kur lëvizni nëpër faqe, elemente të ndryshme shfaqen qetë dhe bukur.

Më parë, për të zbatuar këto efekte, duhej të përdorje vetëm JS, por zhvillimi nuk qëndron ende, dhe me lëshimin e CSS3, të gjitha këto efekte mund të zbatohen në të.

V këtë mësim do të njihemi me një mjet shumë interesant të quajtur gjallëroj.css... Kjo është tashmë CSS e përfunduar fletë stili, e cila ka mbi 50 efekte të ndryshme në arsenalin e saj, dhe të gjitha këto efekte janë implementuar në CSS3.

Për ta përdorur atë, ju vetëm duhet të vendosni për elementin e kërkuar një klasë të caktuar dhe një efekt animacioni do të aplikohet për këtë element. Siç thashë më herët, ky animacion është implementuar në CSS3, kështu që këto efekte do të funksionojnë në të gjithë shfletuesit modernë.

Tani le të hedhim një vështrim më të afërt gjallëroj.css.

Shënimi bazë HTML

Shikoni video tutorialin

• kërcej
• blic
• pulsi
• rrip gome
• shkund
• lëkundje
• lëkundem
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceout
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• zbehet në
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• shuhem
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• FlipInY
• flipOutX
• FlipOutY
• lightSpeedIn
• lightSpeedOut
• rrotullojNë
• rotateInDownLeft
• rrotullohuNëDjathtas
• rotateInUpLeft
• rrotullohemInUpDjathtas
• rotateOut
• rotateOutDownLeft
• rotateOutDownDjathtas
• rotateOutUpLeft
• rrotulloOutUpDjathtas
• mentesha
• rollIn
• hapje
• zmadhimi
• zoomInDown
• zoomInLeft
• zoomInDjathtas
• zoomInUp
• zvogëloni
• zoomOutDown
• zoomOutMajtas
• zoomOutDjathtas
• zoomOutUp
• rrëshqitjeInPoshtë
• rrëshqitjeNëMajtas
• rrëshqitjeDjathtas
• rrëshqitjeInUp
• slideOutDown
• slideOutLeft
• rrëshqitjeDjathtas
• slideOutUp

Animacion pa fund

Nëse keni bërë gjithçka siç përshkruhet më sipër, atëherë në momentin që faqja ngarkohet, ky efekt do të zbatohet në element dhe kaq, animacioni do të përfundojë atje.

Por, çka nëse dëshironi që animacioni të vazhdojë pa u ndalur?

Për ta bërë këtë, thjesht shtoni një klasë tjetër për elementin tonë të animuar. Kjo është një klasë - e pafundme.

Drejtimi

Vendosja e animacionit kur rri pezull mbi një element

Shikoni video tutorialin

Të gjithë shembujt e përshkruar më parë vendosin animacionin menjëherë pas ngarkimit të faqes, por në praktikë kjo është rrallë e nevojshme. Në praktikë, shumë shpesh kërkohet të vendosni animacion kur rri pezull mbi një element, dhe për këtë arsye e kam dhënë më poshtë kod i gatshëm këtë zbatim.

HTML

HTML shënimi ynë ka ndryshuar pak, tani nuk kemi nevojë të vendosim një klasë që është përgjegjëse për një animacion specifik. Duhet ta specifikojmë këtë vlerë në atribut i veçantë efekti i të dhënave... Kushtojini vëmendje kësaj, kjo është shumë e rëndësishme.

Drejtimi

Këtu është një kod i vogël për jQuery i cili do të gjurmojë ngjarjen e kalimit të miut mbi elementin dhe në rast të ndodhjes këtë ngjarje, skripti do t'i shtojë një klasë, vlera e së cilës shkruhet në atribut efekti i të dhënave... Duke shtuar këtë klasë, do të aplikohet animacioni.

Funksioni animate (elem) (var efekt = elem.data ("efekt"); nëse (! Efekt || elem.hasClass (efekt)) kthen false; elem.addClass (efekt); setTimeout (funksioni () (elem.removeClass (efekt);), 1000);) $ (" animuar") mouseenter (funksioni () (animate ($ (kjo));));

Natyrisht, mund ta ndryshoni këtë skript sipas dëshirës, ​​për shembull, mund të ndryshoni ngjarjen në të fut miun në klikoni... Atëherë, në këtë rast, animacioni do të zhvillohet jo në momentin që mausi qëndron pezull mbi elementin, por në momentin e klikimit.

Krijimi i animacionit gjatë lëvizjes së faqes

Shikoni video tutorialin

Dhe së fundi, le të shohim një shembull tjetër ku mund të aplikoni lehtësisht gjallëroj.css.

Gjegjësisht, mund të vendosni efekte të ndryshme për elementë kur lëvizni faqen. Për këto qëllime, përveç gjallëroj.css, ne kemi nevojë për më shumë skenar i veçantë wow.js.