Shembuj të animacionit CSS dhe kod të gatshëm. Nëntë shembuj të thjeshtë të animacionit CSS3 Rrota e animuar e Londrës me dy elementë

Përditësimi i fundit: 11/06/2016

Animacioni ofron mundësi të mëdha për ndryshimin e stilit të një elementi. Në një tranzicion, ne kemi një grup pronash me vlera fillestare që elementi ka përpara fillimit të tranzicionit dhe vlerat përfundimtare që vendosen pas përfundimit të tranzicionit. Ndërsa gjatë animacionit mund të kemi jo vetëm dy grupe vlerash - fillestare dhe përfundimtare, por edhe shumë grupe vlerash të ndërmjetme.

Animacioni mbështetet në një ndryshim sekuencial të kornizave kryesore. Çdo kornizë kyçe përcakton një grup vlerash për vetitë për t'u animuar. Dhe ndryshimi vijues i kornizave të tilla kyçe do të përfaqësojë në të vërtetë animacionin.

Në thelb, tranzicionet përdorin të njëjtin model - dy korniza kyçe përcaktohen gjithashtu në mënyrë implicite - një fillim dhe një fund, dhe vetë tranzicioni përfaqëson kalimin nga korniza kryesore e fillimit në fund. I vetmi ndryshim me animacionin në këtë rast është se ju mund të përcaktoni shumë korniza kyçe të ndërmjetme për animacionin.

Në përgjithësi, një deklaratë e kornizës kyçe në CSS3 ka formën e mëposhtme:

@keyframes animation_name ( nga ( /* vlerat fillestare të vetive CSS */ ) në ( /* vlerat përfundimtare të vetive CSS */ ))

Pas fjalës kyçe @keyframes vjen emri i animacionit. Të paktën dy korniza kyçe përcaktohen më pas në mbajtëset kaçurrelë. Blloku pas fjalës kyçe nga deklaron kornizën kryesore fillestare, dhe pas fjalës kyçe to në bllok definohet korniza kyçe fundore. Brenda çdo kornize kyçe, përcaktohen një ose më shumë veti CSS, të ngjashme me mënyrën se si krijohet një stil i rregullt.

Për shembull, le të përcaktojmë një animacion për ngjyrën e sfondit të një elementi:

Në këtë rast, animacioni quhet backgroundColorAnimation. Animacioni mund të ketë çdo emër.

Ky animacion siguron një kalim nga një ngjyrë e kuqe e sfondit në një ngjyrë blu. Për më tepër, pasi të përfundojë animacioni, do të vendoset ngjyra që është përcaktuar për elementin div.

Për të bashkangjitur animacion në një element, përdorni tiparin animation-name në stilin e tij. Vlera e kësaj vetie është emri i animacionit që do të aplikohet.

Gjithashtu, duke përdorur veçorinë animacion-kohëzgjatja, duhet të caktoni kohën e animimit në sekonda ose milisekonda. Në këtë rast, koha e animacionit është 2 sekonda.

Me këtë përkufizim, animacioni do të fillojë menjëherë pas ngarkimit të faqes. Megjithatë, ju gjithashtu mund të aktivizoni një animacion bazuar në veprimin e përdoruesit. Për shembull, duke përcaktuar një stil për pseudo-klasën :hover, mund të specifikoni se një animacion do të fillojë kur treguesi i miut rri pezull mbi një element:

@keyframes backgroundColorAnimation ( nga ( ngjyra e sfondit: e kuqe; ) në ( ngjyra e sfondit: blu; ) ) div( gjerësia: 100 pikselë; lartësia: 100 pikselë; kufiri: 40 pikselë 30 pikselë; kufiri: 1 pikselë solid #333; ngjyra e sfondit: # ccc; ) div:hover( emri i animacionit: backgroundColorAnimation; kohëzgjatja e animacionit: 2s; )

Shumë korniza kyçe

Siç u përmend më lart, animacioni, përveç dy kornizave standarde kryesore, ju lejon të përdorni shumë të ndërmjetme. Për të përcaktuar kornizën tween, zbatohet përqindja e animacionit në të cilën duhet të përdoret korniza tween:

@keyframes backgroundColorAnimation ( nga ( sfondi-ngjyra: e kuqe; ) 25% (ngjyra e sfondit: e verdhë; ) 50% (ngjyra e sfondit: jeshile; ) 75% (ngjyra e sfondit: blu; ) në (ngjyra e sfondit: vjollcë ;))

Në këtë rast, animacioni fillon me ngjyrën e kuqe. Pas 25% të kohës së animacionit, ngjyra ndryshon në të verdhë, pas 25% të tjera - në jeshile, e kështu me radhë.

Ju gjithashtu mund të animoni disa veçori në të njëjtën kohë në një kornizë kyçe:

@keyframes backgroundColorAnimation ( nga ( ngjyra e sfondit: e kuqe; errësirë: 0,2; ) në (ngjyra e sfondit: blu; errësirë: 0,9; ) )

Ju gjithashtu mund të përcaktoni disa animacione të veçanta, por t'i zbatoni ato së bashku:

@keyframes backgroundColorAnimation ( nga ( sfondi-ngjyra: e kuqe; ) në (ngjyra e sfondit: blu; ) ) @keyframes opacityAnimation ( nga ( opacity: 0,2; ) në ( opacity: 0,9; ) ) div ( gjerësia: 100px; lartësia: 100 px; margjina: 40 px 30 pikselë; kufiri: 1 px solid #333; ngjyra e sfondit: #cccc; emri i animacionit: sfondNgjyraAnimacion, opacityAnimacion; animacion-kohëzgjatja: 2s, 3s; )

Vlera e vetive animacion-name liston animacionet e ndara me presje dhe vetia animacion-kohëzgjatja përcakton gjithashtu kohën e këtyre animacioneve të ndara me presje. Emri i animacionit dhe koha e tij përputhen me pozicionin, domethënë opacityAnimation do të zgjasë 3 sekonda.

Plotësimi i animacionit

Në përgjithësi, pasi të ketë përfunduar intervali kohor i specifikuar nga vetia animacion-kohëzgjatja, animacioni përfundon. Megjithatë, me vetitë shtesë ne mund ta anashkalojmë këtë sjellje.

Kështu, vetia animacion-iteracion-count përcakton se sa herë do të përsëritet animacioni. Për shembull, 3 përsëritje të animacionit me radhë:

Animacion-përsëritje-numërimi: 3;

Nëse dëshironi që animacioni të ekzekutohet një numër i pafundëm herë, atëherë kjo veti vendoset në pafundësi:

Animacion-përsëritje-numërim: i pafund;

Kur përsëritet, animacioni do të fillojë përsëri nga korniza kryesore fillestare. Por duke përdorur drejtimin e animacionit: alternativë; veti drejtimi i kundërt i animacionit kur përsëritet. Kjo do të thotë, do të fillojë me kornizën kyçe që përfundon dhe më pas do të kalojë në kornizën fillestare:

Emri i animacionit: backgroundColorAnimation, opacityAnimation; animacion-kohëzgjatja: 2s, 2s; animacion-përsëritje-numërim: 3; animacion-drejtim: alternativ;

Kur animacioni përfundon, shfletuesi vendos elementin e animuar në stilin që do të kishte para se të aplikohej animacioni. Por vetia animation-fill-mode: forwards ju lejon të vendosni vlerën përfundimtare të vetive të animuar pikërisht në atë që ishte në kornizën e fundit:

Emri i animacionit: backgroundColorAnimation; animacion-kohëzgjatja: 2s; animacion-përsëritje-numërim: 3; animacion-drejtim: alternativ; animacion-fill-mode: përpara;

Vonesa e animacionit

Duke përdorur veçorinë animacion-vonesë, mund të përcaktoni kohën e vonesës së animacionit:

Emri i animacionit: backgroundColorAnimation; animacion-kohëzgjatja: 5s; animacion-vonesa: 1s; /* vonesë 1 sekondë */

Funksioni i qetë i animacionit

Ashtu si me tranzicionet, mund të aplikoni të njëjtat funksione zbutëse për animacionet:

linear: funksioni linear i butësisë, vetia ndryshon në mënyrë uniforme me kalimin e kohës

lehtësi: një veçori lehtësie ku animacioni shpejtohet drejt mesit dhe ngadalësohet drejt fundit, duke siguruar një variacion më të natyrshëm

ease-in: një funksion lehtësimi që përshpejtohet vetëm në fillim

ease-out: një funksion lehtësimi që përshpejtohet vetëm në fillim

ease-in-out: Një veçori lehtësimi ku animacioni shpejtohet drejt mesit dhe ngadalësohet drejt fundit, duke ofruar një variacion më të natyrshëm

cubic-bezier : Funksioni kubik Bezier përdoret për animacion

Për të vendosur funksionin e butësisë, përdorni veçorinë animacion-kohë-funksion:

@keyframes backgroundColorAnimation ( nga ( ngjyra e sfondit: e kuqe; ) në (ngjyra e sfondit: blu; ) ) div( gjerësia: 100 px; lartësia: 100 px; kufiri: 40 px 30 px; kufiri: 1 px solid #333; emri i animacionit: backgroundColorAnimation ; kohëzgjatja e animacionit: 3 sekonda; funksioni i kohës së animacionit: lehtësimi në dalje; )

veti e animacionit

Vetia e animacionit është një mënyrë e shkurtër për të përcaktuar vetitë e diskutuara më sipër:

Animacion: animacion-emër animacion-kohëzgjatje animacion-kohë-funksion animacion-përsëritje-count animacion-drejtim animacion-vonesa animacion-plotësim-mode

Kërkohen dy parametrat e parë, të cilët japin emrin dhe kohën e animacionit. Vlerat e mbetura janë opsionale.

Le të marrim grupin e mëposhtëm të vetive:

Emri i animacionit: backgroundColorAnimation; animacion-kohëzgjatja: 5s; animacion-koha-funksioni: lehtësi-në-jashtë; animacion-përsëritje-numërim: 3; animacion-drejtim: alternativ; animacion-vonesa: 1s; animacion-fill-mode: përpara;

Ky grup do të jetë i barabartë me përkufizimin e mëposhtëm të animacionit:

Animacion: backgroundColorAnimation 5s lehtësim-në-out 3 alternativë 1s përpara;

Krijimi i një baneri me animacion

Si shembull me animacionin, le të krijojmë një baner të thjeshtë të animuar:

Këtu funksionojnë tre animacione njëkohësisht. Animacioni "banner" ndryshon ngjyrën e sfondit të banderolës dhe animacionet text1 dhe text2 shfaqin dhe fshehin tekstin duke përdorur cilësimet e transparencës. Kur teksti i parë është i dukshëm, i dyti nuk është i dukshëm dhe anasjelltas. Kështu, ne marrim animacion të tekstit në baner.

animacion CSS3 Jep dinamizëm faqeve. 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ë përdoret pothuajse për të gjithë elementët html, si dhe pseudoelementet:para dhe:after. Lista e vetive të animuara është dhënë në faqe. Kur krijoni animacione, mos harroni për problemet e mundshme të performancës, pasi ndryshimi i disa vetive kërkon shumë burime.

Hyrje në CSS Animation

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-
Chrome për Android: 44

1. Kornizat kryesore

Kornizat kryesore përdoren për të specifikuar vlerat e vetive të animacionit në pika të ndryshme të animacionit. Kornizat kryesore përcaktojnë sjelljen e një cikli animacioni; animacioni mund të përsëritet zero ose më shumë herë.

Kornizat kryesore specifikohen duke përdorur rregullin @keyframes, i përcaktuar si më poshtë:

Emri i animacionit @keyframes (lista e rregullave)

Krijimi i animacionit fillon me instalimin korniza kyçe Rregullat @keyframes. Kornizat përcaktojnë se cilat veti do të animohen në cilin hap. Ç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, i cili 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ë (text-hije: 0 0 3px e zezë;) )

Kornizat kryesore krijohen duke përdorur fjalët kyçe nga dhe te (ekuivalente me vlerat 0% dhe 100%) ose duke përdorur pikë përqindjeje, të cilat mund të specifikohen sa të doni. Ju gjithashtu mund të kombinoni fjalë kyçe dhe pikë përqindjeje. Nëse kornizat kanë të njëjtat veti dhe vlera, 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 disa rregulla @keyframes përcaktohen me të njëjtin emër, i fundit në renditjen e dokumentit do të aktivizohet dhe të gjitha ato të mëparshme do të shpërfillen.

Pasi të deklarohet rregulli @keyframes, ne mund ta referojmë atë në vetitë e animacionit:

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

Nuk rekomandohet të animoni vlera jo numerike (me përjashtime të rralla), pasi rezultati në shfletues mund të jetë i paparashikueshëm. Gjithashtu nuk duhet të krijoni korniza kyçe për vlerat e pronave që nuk kanë një pikë mes, si p.sh. vlerat e vetive ngjyra: rozë dhe ngjyra: #ffffff, gjerësia: automatik dhe gjerësia: 100 px, ose rreze-kufi: 0 dhe kufiri- rrezja: 50% (në këtë rast, do të ishte e saktë të specifikohej rreze-kufi: 0%).

1.1. Funksioni i kohës për kornizat kryesore

Një rregull i stilit të kuadrit kyç mund të deklarojë gjithashtu një funksion të përkohshëm që duhet të përdoret kur animacioni kalon në kuadrin tjetër kyç.

Shembull

fryrje @keyframes ( nga ( lart: 100 pikselë; funksioni i kohës së animacionit: lehtësimi; ) 25% ( lart: 50 px; funksioni i kohës së animacionit: lehtësimi; ) 50% ( lart: 100 px; koha e animimit- funksioni: ease-out; ) 75% (lart: 75px; animacion-koha-funksioni: lehtësim; ) në (lart: 100px; ) )

Pesë korniza kyçe janë specifikuar për animacionin e quajtur "bounce". Midis kuadrit të parë dhe të dytë kyç (d.m.th., midis 0% dhe 25%), përdoret funksioni lehtësues. Midis kuadrit të dytë dhe të tretë kyç (d.m.th., midis 25% dhe 50%), përdoret funksioni i përshpejtimit të qetë. Dhe kështu me radhë. Elementi do të lëvizë lart në faqe me 50 pikselë, duke u ngadalësuar ndërsa arrin pikën e tij më të lartë dhe më pas duke u shpejtuar ndërsa zbret në 100 pikselë. Gjysma e dytë e animacionit sillet në mënyrë të ngjashme, por vetëm e zhvendos elementin 25 px lart në faqe.

Funksioni i kohës i specifikuar në kuadrin kyç në ose 100% injorohet.

2. Emri i animacionit: vetia e emrit të animacionit

Vetia animacion-name specifikon listën e animacioneve të aplikuara në element. Çdo emër përdoret për të zgjedhur një kornizë kyçe në një rregull që siguron vlerat e vetive për animacionin. Nëse emri nuk përputhet me asnjë kornizë kyçe në rregull, nuk ka veçori për të animuar, ose nuk ka emër animacioni, animacioni nuk do të ekzekutohet.

Nëse animacione të shumta tentojnë të ndryshojnë të njëjtën veti, animacioni më afër fundit të listës së emrave do të ekzekutohet.

Emri i animacionit është i ndjeshëm ndaj shkronjave të vogla dhe fjala kyçe asnjë nuk lejohet. Rekomandohet të përdorni një emër që pasqyron thelbin e animacionit dhe mund të përdorni një ose më shumë fjalë të renditura me vizë - ose karakterin nënvizues _ .

Prona nuk është e trashëguar.

Sintaksë

Emri i animacionit: asnjë; Emri i animacionit: test-01; Emri i animacionit: -rrëshqitje; Emri i animacionit: lëviz-vertikalisht; Emri i animacionit: test2; Emri i animacionit: test3, lëvizje4; Emri i animacionit: fillestar; animacion-emri: trashëgoj;

3. Kohëzgjatja e animacionit: vetia animacion-kohëzgjatje

Vetia animacion-kohëzgjatja specifikon kohëzgjatjen e një cikli animacioni. Specifikuar në sekonda s ose milisekonda ms. Nëse një element ka më shumë se një animacion të specifikuar, mund të caktoni një kohë të ndryshme për secilin duke renditur vlerat e ndara me presje.

Prona nuk është e trashëguar.

Sintaksë

Animacion-kohëzgjatja: .5s; animacion-kohëzgjatja: 200ms; animacion-kohëzgjatja: 2s, 10s; animacion-kohëzgjatja: 15s, 30s, 200ms;

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

Vetia animacion-kohë-funksion përshkruan se si animacioni do të përparojë ndërmjet çdo çifti kornizash kyçe. Gjatë vonesës së animacionit, funksionet e kohës nuk zbatohen.

Prona nuk është e trashëguar.

Sintaksë

Animacion-kohë-funksion: lehtësi; animacion-koha-funksion: lehtësim; animacion-kohë-funksion: lehtësim; animacion-koha-funksioni: lehtësi-në-jashtë; animacion-kohë-funksion: linear; animacion-kohë-funksion: hap-fillim; animacion-kohë-funksion: hap-fund; funksioni i animacionit-kohës: kubik-bezier(0.1, 0.7, 1.0, 0.1); animacion-koha-funksioni: hapat (4, fundi); funksioni animacion-koha: lehtësi, hap-fillim, kub-bezier (0.1, 0.7, 1.0, 0.1); animacion-kohë-funksion: fillestar; animacion-kohë-funksion: trashëgoj;

Animacioni hap pas hapi mund të përdoret për të krijuar efekte interesante, të tilla si teksti që printohet ose një tregues ngarkimi.

5. Përsëritja e animacionit: vetia animacion-përsëritje-count

Vetia animacion-iteracion-count specifikon numrin e herëve që luhet animacioni. Një vlerë fillestare prej 1 do të thotë që animacioni do të luhet nga fillimi në fund një herë. Kjo veti shpesh përdoret së bashku me vlerën alternative të vetive animacion-drejtim, gjë që bën që animacioni të luajë në rend të kundërt në sythe alternative.

Prona nuk është e trashëguar.

Sintaksë

Animacion-përsëritje-numërim: i pafund; animacion-përsëritje-numërim: 3; animacion-përsëritje-numërim: 2.5; animacion-përsëritje-numërim: 2, 0, i pafund;

6. Drejtimi i animacionit: veti animacion-drejtim

Vetia animacion-drejtim përcakton nëse animacioni duhet të luajë në rend të kundërt në disa ose të gjitha unazat. Kur animacioni luhet në rend të kundërt, funksionet e kohës janë gjithashtu të kundërta. Për shembull, kur luhet në rend të kundërt, funksioni i lehtësimit do të sillet si lehtësim.

Prona nuk është e trashëguar.

Për të përcaktuar nëse një përsëritje e ciklit të animacionit është çift apo tek, numri i përsëritjeve fillon me 1.

Sintaksë

Animacion-drejtimi: normal; animacion-drejtim: anasjelltas; animacion-drejtim: alternativ; animacion-drejtim: alternativ-reverse; animacion-drejtim: normal, i kundërt; animacion-drejtim: alternativ, i kundërt, normal; animacion-drejtim: fillestar; animacion-drejtim: trashëgoj;

7. Luajtja e animacionit: veti animacion-luaj-state

Vetia animacion-play-state përcakton nëse animacioni do të fillojë ose do të ndalet. Ndalimi i animacionit brenda një cikli është i mundur duke përdorur këtë veçori në një skript JavaScript. Ju gjithashtu mund të ndaloni animacionin kur vendosni miun mbi një objekt - gjendje:hover .

Prona nuk është e trashëguar.

Sintaksë

Animation-play-state: running; animacion-play-state: në pauzë; animacion-play-state: në pauzë, vrapim, vrapim; animacion-play-state: fillestar; animacion-play-state: trashëgoj;

8. Vonesa e animacionit: veti animacion-vonesë

Vetia animacion-vonesa përcakton se kur do të fillojë animacioni. Specifikuar në sekonda s ose milisekonda ms.

Prona nuk është e trashëguar.

Sintaksë

Animacion-vonesa: 5s; animacion-vonesa: 3s, 10ms;

9. Gjendja e elementit para dhe pas luajtjes së animacionit: vetia animacion-fill-mode

Vetia animacion-fill-mode përcakton se cilat vlera zbatohen nga animacioni jashtë kohës së ekzekutimit të tij. Kur animacioni përfundon, elementi kthehet në stilet e tij origjinale. Si parazgjedhje, animacioni nuk ndikon në vlerat e vetive kur animacioni aplikohet në një element - emri i animacionit dhe vonesa e animacionit. Për më tepër, si parazgjedhje, animacionet nuk ndikojnë në vlerat e vetive të kohëzgjatjes së animacionit dhe numërimit të animacionit-përsëritjes pasi ato të përfundojnë. Vetia animacion-mbushje-mode mund të anashkalojë këtë sjellje.

Prona nuk është e trashëguar.

Sintaksë

Modaliteti i mbushjes së animacionit: asnjë; animacion-fill-mode: përpara; animacion-mbushje-mode: prapa; animacion-fill-mode: të dyja; animacion-fill-mode: asnjë, prapa; animacion-fill-mode: të dyja, përpara, asnjë;

10. Përshkrim i shkurtër i animacionit: vetia e animacionit

Të gjithë parametrat e riprodhimit të animacionit mund të kombinohen në një veçori - animacion, duke i renditur ato të ndara me një hapësirë:
animacion: animacion-emër animacion-kohëzgjatje animacion-kohë-funksion animacion-vonesa 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, veçoritë e mbetura do të marrin vlerat e tyre të paracaktuara. Rendi në të cilin janë renditur pronat nuk ka rëndësi, e vetmja gjë është që koha e ekzekutimit të kohëzgjatjes së animacionit duhet të vijë përpara vonesës së animacionit-vonesës.

11. Animacione të shumta

Për një element, mund të vendosni disa animacione, duke renditur emrat e tyre të ndarë me presje:

Div (animacion: shadow 1s ease-in-out 0,5s alternuar, lëvizja 5s lineare 2s;)

| 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 lehtësisht dhe të realizohet pa përdorur JavaScript.

Është e mahnitshme se sa gjëra të thjeshta mund të gjallërojnë një faqe interneti të zakonshme dhe ta bëjnë atë më të aksesueshme për përdoruesit. Ne po flasim për tranzicionet CSS3, me të cilat mund të lejoni që një element të transformojë dhe të ndryshojë stilin, për shembull, në hover. Nëntë shembujt e animacionit CSS3 të disponueshëm më poshtë do t'ju ndihmojnë të krijoni një ndjenjë të përgjegjshme në faqen tuaj, si dhe të përmirësoni pamjen e përgjithshme të faqes me tranzicion të bukur dhe të qetë.

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

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 kursori i miut rri pezull mbi të (në tutorialin tonë). Për shembujt tanë, ne kemi përdorur një div 500x309 px, një ngjyrë fillestare të sfondit prej #6d6d6d dhe një kohëzgjatje tranzicioni prej 0,3 sekondash.

Trupi > div ( gjerësia: 500 pikselë; lartësia: 309 pikselë; sfondi: #6d6d6d; -kit-ueb-kalim: të gjitha lehtësitë 0,3s;; -moz-tranzicioni: të gjitha 0,3s lehtësia;; -o-tranzicioni: të gjitha 0,3s lehtësia;; tranzicioni: të gjitha lehtësitë 0.3s;)

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 të vlerave të caktuara RGB. Tani mjafton të shkruani një stil CSS në të cilin duhet të shtoni një pseudo-klasë: rri pezull në përzgjedhës dhe vendosni një ngjyrë sfondi që do të zëvendësojë pa probleme (në 0,3 sekonda) ngjyrën origjinale të sfondit kur kaloni pezull mbi bllok:

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

2. Pamja e kornizës

Një transformim interesant dhe i mrekullueshëm është korniza e brendshme që shfaqet pa probleme kur rri pezull miun. I përshtatshëm për të dekoruar butona të ndryshëm. Për të arritur këtë efekt, ne përdorim pseudo-class:hover 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, sepse vetia e tranzicionit nuk përdoret këtu. Në vend të kësaj kemi përdorur:

• @keyframes është një direktivë bazë për krijimin e animacionit CSS kornizë për kornizë, e cila 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.

4. Zbutja

Efekti i zbehjes ë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ë, errësirë ​​të plotë, dhe më pas specifikoni vlerën e tij kur rri pezull miun - 0.6:

Zbehet ( errësirë: 1; ) . zbehet: hover ( tejdukshmëri: 0,6; )

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

5. Zmadhimi

Për ta bërë bllokun më të madh kur vendoset sipër, 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: scale (1.2); -ms-transform: scale (1.2); transform: scale (1.2); )

6. Reduktimi

Të bësh një element më të vogël është po aq e lehtë sa ta bësh atë më të madh. Nëse në pikën 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 do të specifikojmë një vlerë që do të jetë më e vogël se një, për shembull, shkalla(0.7) . Tani, kur rri pezull miun, blloku do të tkurret proporcionalisht me 30 përqind të madhësisë së tij origjinale:

Shrink:hover ( -webkit-transform: scale (0.7); -ms-transform: scale (0.7); transform: scale (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 kur rri pezull. Duke përdorur veçorinë e rrezes kufitare CSS, e përdorur së bashku me :hover dhe transition, kjo mund të arrihet pa probleme:

Rrethi: rri pezull (rrezja kufitare: 70%; )

8. Rrotullimi

Një opsion argëtues i animacionit është të rrotulloni një element me një numër të caktuar gradësh. Për ta bërë këtë, do të na duhet përsëri vetia e transformimit, 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 në lidhje me boshtin Z:

Rrotulloni: rri pezull ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transformim: rotateZ(20deg); )

9. Hije 3D

Mendimet e stilistëve ndryshojnë nëse ky efekt është i përshtatshëm në dizajnin e sheshtë. Megjithatë, ky animacion CSS3 është mjaft 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(-7px) (do të sigurojmë 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 #53ea93, 6x3px #53ea93, 6x3px 9px #53ea93 ; -webkit-transform: translateX( -7px); transformimi: translateX(-7px); )

Mbështetja e shfletuesit

Shfletuesit e mëposhtëm aktualisht mbështesin veçorinë e tranzicionit:

Vetitë e mbetura të përdorura në këta shembuj, si transformimi , box-shadow, etj., mbështeten gjithashtu nga pothuajse të gjithë shfletuesit 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ërputhshmërinë e shfletuesve.

Shpresojmë t'i keni gjetur të dobishëm këta shembuj të animacionit CSS3. Ju urojmë suksese krijuese!

Ky koleksion përmban veçoritë më të mira dhe cilësore të CSS. Këtu mund të gjeni shembuj dhe teknika të ndryshme dhe të mahnitshme demo nga stilistë dhe stilistë të famshëm të paraqitjes, të cilët po përpiqen të provojnë se tani është e mundur të bësh pothuajse gjithçka duke përdorur vetëm CSS të pastër. Këtu mund të gjeni edhe disa mësime që ju tregojnë 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 do të jeni në gjendje 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ë uebit janë pothuajse të pakufishme.

Logo të pastra CSS

Këta janë shembuj të logove të bëra vetëm me CSS të pastër. Vetëm mendoni për këtë, asnjë imazh nuk u përdor në krijimin e tij. Është thjesht diçka.

Alfabeti me animacion CSS

Shembull i shkëlqyeshëm dhe artistik i përdorimit të CSS në alfabet

Navigimi 3D për sitin

Një shirit navigimi i thjeshtë por shumë elegant për faqen, sigurisht i bërë duke përdorur vetëm CSS3. nuk ka imazhe apo skripta.

Google Doodle me CSS

Një nga fotografitë e shumta nga motori i kërkimit Google, i bërë në CSS. Ky është një shembull i shkëlqyer i përdorimit të mirë të animacionit CSS.

Rrëshqitës

Një rrëshqitës imazhi i punuar mirë dhe me cilësi të lartë. Plus 4 shembuj në demo.

Unazë e dyfishtë e animuar

Një unazë e bukur e animuar dhe me shumë ngjyra me jo shumë kod CSS

Mjegulloni në CSS

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

Udhëzuesi i plotë për Flexbox

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

Menu shumëngjyrëshe dhe e animuar duke përdorur CSS3

Një menu e bukur rënëse për një faqe interneti me ikona. Një plus i madh është se është bërë tërësisht në CSS.

Filtrat CSS

Material me cilësi të lartë në anglisht, i cili flet për përdorimin e filtrave CSS në imazhe.

Format CSS

Një postim në lidhje me format CSS me shembuj të shumtë

Shiritat e progresit në CSS

Një mësim se si të krijoni shirita progresi elegant duke përdorur CSS të pastër dhe animacion. Ju gjithashtu mund të shikoni shembullin 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.

). CSS3 na ofron një mjet tjetër më të fuqishëm animacioni që shkon përtej vetëm një tranzicioni dhe na lejon të krijojmë numër i pakufizuar i kalimeve të tilla.

Me fjalë të tjera, animacioni na lejon të lëvizim nga një gjendje (bashkësi e vetive) për të e dyta, nga e dyta te e treta, dhe, edhe nëse është e nevojshme, luani animacionin në rend të kundërt kur të plotësohet numri i tranzicioneve.

Ngjashëm me efektet e tranzicionit, në mënyrë që një animacion të luhet, duhet të aktivizoni riprodhimin e tij, qoftë kur faqja ngarkohet për herë të parë, ose kur një element fiton fokus, kur treguesi i miut rri pezull mbi një element, etj.

Fazat e krijimit të animacionit

Le të shohim se nga përbëhet procesi i krijimit të animacionit në CSS. Së pari, ju duhet të përcaktoni kornizat kryesore të animacionit. Çfarë është një kornizë kyçe? Imagjinoni një element që është i pozicionuar në të majtë të dritares së shfletuesit dhe ju duhet ta animoni atë në mes të dritares dhe ta ktheni në pozicionin e tij origjinal. Për këtë animacion na duhen tre korniza kyçe:

• Së pari– përcakton pozicionin fillestar të elementit.
• Së dyti– përcakton pozicionin e elementit pas zhvendosjes së elementit në mes të dritares.
• Së treti– përcakton pikën përfundimtare të animacionit (pozicionin fillestar të elementit).

Pasi të përcaktohen kornizat kryesore të nevojshme, i takon shfletuesit të përdoruesit të vizatojë të gjitha fazat e ndërmjetme që kemi përcaktuar duke përdorur kornizat kryesore. Kjo do të thotë, detyra e vizatimit të elementit në këto intervale i takon vetëm shfletuesit; nga ana jonë, ne vetëm duhet të specifikojmë këto pika animacioni, ose me fjalë të tjera, duhet t'i tregojmë shfletuesit se si duhet të ndryshojë nga një stil në tjetrin. midis kornizave kryesore.

Hapi tjetër është caktimi i animacionit për elementin ose elementët për të cilët jemi të interesuar. Në këtë rast, është e mundur të specifikoni cilësimet individuale të animacionit për secilin element.

Më vonë në këtë artikull, ne do të shikojmë në detaje se si të vendosni një vonesë animacioni, si të vendosni numrin e cikleve të animacionit, të vendosni kohëzgjatjen e tij, të tregoni shpejtësinë dhe drejtimin e tij, gjendjen e animacionit në momentin aktual dhe madje të përcaktoni stili për një element në një kohë kur animacioni nuk luhet. .

Përpara se të kalojmë në krijimin e animacioneve, do të doja të tërhiqja vëmendjen tuaj në mbështetjen aktuale për vetitë e animacionit në shfletues:

Përcaktimi i kornizave kyçe

Rezultati i shembullit tonë:

Merrni parasysh shembullin e mëposhtëm në të cilin ne do të krijojmë disa animacione të ndryshme dhe do t'i caktojmë ato në një element.

Në këtë shembull, ne krijuam disa animacione në të cilat gjerësia e elementit rritet gradualisht, ngjyra e sfondit ndryshon dhe elementi anon negativisht në lidhje me boshtin e tij X(boshti horizontal) në mes të animacionit dhe elementi që zvogëlohet në madhësinë origjinale të elementit drejt fundit të animacionit, i cili shoqërohet me një ndryshim në ngjyrën e sfondit dhe animin e elementit përgjatë boshtit X i kundërt.

Rezultati i shembullit tonë:

Numri i cikleve të animacionit

Si parazgjedhje, çdo animacion në CSS do të luhet vetem nje here. Falë vetive animacion-iteracion-count, ne do të jemi në gjendje të specifikojmë se sa herë do të luhet cikli i animacionit, ky mund të jetë një numër arbitrar herësh, ose mund të tregojmë se animacioni do të luhet pafundësisht, në disa raste kjo është shumë e dobishme.

Ju lutemi vini re se Vlerat negative janë të ndaluara për arsye objektive, por lejohet të specifikohen vlera jo të plota, me ç'rast do të luhet vetëm një pjesë e ciklit të animacionit - në proporcion me vlerën e specifikuar (për shembull, vlera 1.5 korrespondon me luajtjen e ciklit të animacionit një herë e gjysmë).

Merrni parasysh shembullin e mëposhtëm:

Në këtë shembull, ne krijuam një animacion të thjeshtë në të cilin përdorim vetinë e sipërme CSS për të lëvizur elementët e pozicionuar relativ në lidhje me skajin e sipërm të pozicionit aktual, duke ndryshuar ngjyrën e sfondit të elementit.