CSS Animazzjoni u l-possibbiltajiet tagħha

Mintix kif jagħmlu animazzjoni CSS, ħafna utenti tmur fit-tfittxija ta 'lezzjonijiet u l-istruzzjonijiet. U għalkemm dawn l-istruzzjonijiet jista 'jinstab hawn, fost affarijiet oħra, ahna naghtuk l-pariri utli prinċipali fil-ħolqien ta' animazzjoni jużaw CSS.

ideali iżvilupp sigriet

Parir li jista 'jingħata lil dawk li jixtiequ jkunu jafu bis-sħiħ dak huwa CSS animazzjoni bla xkiel, huwa kif ġej. Meta l-esperimenti ta 'kuljum ma' biċċiet ippreparat ta 'kodiċi u jippruvaw li jsiru esperimenti tagħhom stess. Fil-ħin liberu mix-xogħol fis-siti tagħhom stess, tipprova tara x'jiġri mal-tiwi ta 'biċċa tal-kodiċi, għal dan jew dik il-proprjetà studju bis-sħiħ. Tipprova timplimenta kull xorta ta 'ideat interessanti użu ta' għodod lingwistiċi kompletament differenti, u animazzjonijiet CSS se tiftaħ għalik b'mod ġdid. Dan il-parir sempliċi hija din - esperiment għalik innifsek.

dehra CSS-animazzjoni

U issa għall-eżempji interessanti. Bħala regola, l-użu normali ta 'animazzjoni huwa li tinbidel xi elementi tas-sit gradwalment maż-żmien. Iżda dan huwa wisq ovvju, hux? Allura hawn aħna naqsmu miegħek b'mod straordinarju biex jużaw il-ħin tad-dehra ta 'animazzjoni.

Il-fatt li l-bidliet attwali għas-sit fil-biċċa ta 'animazzjoni jew fit-totalità tagħha jista' jkun kważi istantanja. Biex tagħmel dan, aħna nistaqsu kwalunkwe żewġ keyframes, iżda jużaw firxa żgħira ħafna. Per eżempju, jista 'jkun ugwali għal 0.001%. F'dan il-każ, animazzjoni CSS jista 'jiġri istantanjament. Huwa perfetta għas-simulazzjoni sinjal neon. Dan is-sinjal se blink, u jekk il-CSS animazzjoni imbagħad se jkun aktar trasparenza u biex jintużaw u karatteristika test dell, is-sinjal se kważi bħall-ħaġa reali.

Hawn hu kodiċi eżempju.

Itejbu l-buttuni funzjonali

Jekk inqisu li l-kwistjoni ta 'liema jista' jkun mhux tas-soltu buttuna CSS-animazzjoni, jista 'jingħad li l-buttuna għażliet dekorazzjoni fuq is-siti sett kbir. Ikkunsidra eżempju wieħed. L-effett tal tagħfas il-buttuni konvessi. kodiċi eżempju - hawn taħt.

Ma 'tali biċċa sempliċi ta' animazzjoni blokk CSS ta 'kodiċi se tħares pretty ukoll. Huwa jistenna interessanti ħafna u spiss jintuża fuq siti kompletament differenti.

CSS-animazzjoni meta inti imbagħad jerġgħu jsiru fuq snippet sit

Is-sit dinamika u moderna, l-itwal jibqa 'fuq l-utent. Barra minn hekk, rwol importanti wkoll rwol minn interattività. Dan huwa ċertament veru, imma dak li jista 'jgħin biex tagħmel is-sit kemm interattiv kemm jista' jkun?

Tajjeb ħafna imbagħad tfittex li taħdem ma 'elementi tad-disinn u frammenti ta' sit meta l-maws. buttuni animazzjoni meta inti imbagħad jerġgħu aħna diskuss hawn fuq, iżda barra minn dan inti tista ' "terġa' titqajjem" u biċċiet differenti tas-sit, li jagħmluhom l-aktar stylish. Bħal kull ħaġa oħra, il-prinċipju ewlieni hawnhekk - ma overdo dan.

Allura, hemm proprjetà transizzjoni eċċellenti, li jistgħu jieħdu sa erba 'proprjetajiet relatati.

Matul ċertu żmien CSS 'animazzjoni meta inti imbagħad jerġgħu jsiru fuq din il-biċċa ta' kodiċi se jinbidlu. Il-ħin huwa determinat mill-proprjetà tul. Dan huwa, meta inti imbagħad jerġgħu jsiru fuq oġġett li jibda bidla partikolari kwalunkwe proprjetà li waqqafna fil-selettur. Fil-każ tagħna huwa - .element (punt ta 'quddiem). Kemmxejn hawn taħt huwa eżempju tal-kodiċi, meta t-tranżizzjoni mill-div kontenitur, li għandha l-.hover psewdo, l-isfond bidliet minn aħmar għal aħdar.

Meta utent hovers l-animazzjoni maws CSS ma jinbidilx immedjatament, iżda mdewma minn xi frazzjoni ta 'sekonda, li joħloq effett interessanti.

Barra minn hekk, jekk fil-eżempju preċedenti, inti tlabt regola ċerti li l-isfond f'element div nbidlet minn aħmar għal aħdar u jimxu ġewwa 0.4 sekondi, għandu jiġi osservat li l-użu tal-valur kollu, inti tista 'tapplika għall-proprjetà kollu huwa kompletament immedjatament.

kodiċi Eżempju rappreżentati kif ġej.

Kif muri fil-proprjetajiet ikkuttunar u l-effett ta 'tranżizzjoni isfond se jseħħu li tkun proprjetà ta' transizzjoni determinat. Wieħed għandu jinnota li inti tista 'tispeċifika separata bil-virgoli ċertu sett ta' valuri.

Xi sfumaturi ta 'tuża dan it-tip ta' animazzjoni fuq buttuni

Fil-prinċipju, fit-tul mhuwiex daqshekk importanti f'liema ordni se tkun speċifikata u trasferiti lill-valuri tad-data. Ħlief f'każ wieħed. Nistgħu jittrattaw mal-proprjetà dewmien. F'dan il-każ, għandna bżonn li jispeċifikaw it-tul u l-ħin. Fi kliem ieħor, ser ikollna bżonn il-kodiċi li tgħid kemm żmien il-ferm meħtieġ li minna se jseħħu dewmien.

Meta wieħed iżomm f'moħħu li xi proprjetajiet ma tistax tkun l-effett ta 'tranżizzjoni. Jiġifieri, dawn ma jistgħux jkunu temporanji. Dan huwa dovut għall-fatt li dawn ma jistgħux jiġu animati.

test animazzjoni

Bl-għajnuna tal-kodiċi jistgħu jiġu stabbiliti u eċċellenti test CSS animazzjoni. Dan jista 'jkun hemm xi tip ta' oġġett, u titolu maġġuri, titolu sit. Kif imsemmi hawn fuq, il-ħaġa prinċipali - ma overdo u ma dawran sit tiegħek ġo terraferma, li se tħares irħis.

Ukoll, ejja jippruvaw isibu dak CSS animazzjoni ta 'test, u joħolqu dan, u t-test dellijiet. Forsi inti stajt tidher films orrur, fejn l-ismijiet tal-pitturi nfushom dehru li fade fi kwalunkwe sfond dim dlam. Ejja nippruvaw jirrikreaw eżempju ġenerali ta 'xi ħaġa bħal din.

Janimaw it-test fl-istil ta 'films orrur

Attwalment, l-idea kollha hija li jagħmlu t-test li fih l-ittri kienu ftit vaga u se jduru. Fejn bejn ittri għandu jkun hemm spazju. Aħna ser nużaw dell interalphabetic, kif ukoll bħala l-intervall. Sabiex timplimenta l-idea, għandna bżonn b'kitba Lettering.js awtur Dave Rupert. Hu meħtieġ biex nagħlaq kliem flimkien ftit ittri fil-medda tikketta. L-ewwel għandek bżonn biex nagħlaq l-frażi tag h2. Hawn hu kodiċi eżempju.

Imbagħad obernom-kliem kollha fl tikketti h2 fil-medda tikketta.

Dan jiġri bħal dan.

Hija se teżamina pjuttost ikkumplikata, iżda ma let li jolqot.

Manija jiksbu struttura suffiċjenti.

Bħala riżultat, aħna għandna kull wieħed mill-ittri eżistenti tagħna mgeżwra fil-medda tikketta. Huma irriżultaw verament ħafna. Iżda fil-kodiċi hawn fuq jiġifieri eżempju ta 'xi daqsxejn sempliċistika. istruttura sħiħa tagħhom, tista 'tikteb lilek innifsek, u se jkun ftit aktar. Dan jiddependi wkoll fuq liema tip ta 'test li trid tuża.

Aħna nikkonkludu ħidma tagħna ftit stilizzata. Kollha ta 'titoli tagħna fil-eżempju hawn fuq, se tkun tinsab fil-wisa' kollha tal-iskrin. U dawn se jieħdu kważi l-ispazju disponibbli.

Minħabba li aħna qed tmur għall-post kollha ta 'l-ittri tagħna ċċentrata fuq l-iskrin, imbagħad, għall-kontenitur tagħna u għandna bżonn ukoll flexbox.

Hawn hu eżempju ta 'kodiċi tagħha.

Issa għandna għamlu hekk li l-ittri kollha, li huma mgeżwra fi klassi medda, li jappartjeni għall-klassi ġenitur .os-frażijiet, se tkun tinsab u se tkun mehmuża miegħu fin-nofs.

Tinsiex li żid daqsxejn ta 'spazju ħieles, li fih innifsu huwa ispazjar ittra.

F'dan il-każ, l-ewwel ippakkjar tixtieq li jkollha ċerti karatteristiċi addizzjonali. Din il-perspettiva proprjetà. Dan se jippermettilna naslu biex tiżgura li dan is-sit se jkun simili li jispikkaw, jaslu fuq quddiem.

Lilhom infushom bħala l-ittri tagħna se tkun trasparenti, u aħna se tniedi firxa ta 'animazzjoni għalihom x'imkien fil 5.2 sekondi. Hawn taħt - eżempju kodiċi.

Huwa wkoll importanti li jiddetermina kif u b'liema dewmien se jidhru sentenzi tagħna u frażijiet. Liema mill-partijiet tat-test se jidhru aktar mgħaġġel minn dak preċedenti, u kemm. Il-kodiċi se teżamina bħal dan.

Let us tagħti effett żgħir iżda interessanti ħafna. Poġġi l-opaċità ta '0.2. distanza Interalphabetic għalhekk se jkun pjuttost kbar. Ittri se tkun ukoll imdawwar għal diversi Y. assi Ara inti, kif ukoll l-utenti ta 'sit tiegħek se jkun biss parti żgħira ta' dawn l-ittri. Ukoll, ma ninsewx li jagħtu l-effett tal-proprjetajiet ta 'test-dell. Nofs animazzjoni, għamilna ħaġa mhux tas-soltu. Aħna se tidderieġi l-ittri infushom, u wkoll biex titnaqqas id-distanza li huwa bejniethom, u mbagħad iżidu l-opaċità, u wara sinjali povernom fuq 0 għat Y. assi

Fl-aħħar, aħna napprovaw żid ftit ittri jew ipperikolati promasshtabiruem minnhom. Dan jagħti effett ġdida ċċajpar żgħira.

U finalment l-aħħar frażi CSS-animazzjoni.

U iva, finalment żid il-touch finali. Aħna ser tiffoka fuq xi kliem speċifiċi. Huma se jkollhom jiffaċċjaw kuraġġużi. Dan se jagħti l-enfasi meħtieġa.

Tinsiex dwar inspirations

Meta inti tipprova esperiment ruħek mal-proprjetajiet u animazzjoni CSS, tipprova ssib ispirazzjoni fil kollox fil-ħajja ta 'kuljum. Dan jista 'jvarja mingħand min paġni tal-web interessanti għal xi effett vidjo wunderbare.

Barra minn hekk, jekk inti ma PRY, kif tagħmel dan jew dak l-effett, u jippruvaw jirrikreaw dan waħedhom, inti tista 'tikseb riżultati kbira. Jew, għall-inqas, dejjem titgħallem xi ħaġa aktar dwar il-possibbiltajiet tal-lingwa ta 'programmar li inti, fil-fatt, l-użu. Mhux anki jitlesta għal kollox l-idea tiegħek tista 'ukoll jipprova li jkun ħafna spettakolari.