CSS Animation en har mooglikheden

Benijd hoe't om animaasjes CSS, in soad brûkers gean op syk nei lessen en ynstruksjes. En al sokke ynstruksjes hjir te finen, ûnder oare dingen, wy sille jouwe jo de wichtichste brûkbere advys yn 'e oprjochting fan animaasje mei help CSS.

ideale ûntwikkeling geheim

Advys dat kinne jûn wurde oan dyjingen dy't wolle witte folslein wat is in glêde animation CSS, sjocht der sa út. Doe't de deistige eksperiminten mei ree stikjes koade en besykje te fieren út harren eigen eksperiminten. Yn de tiid frij fan wurk op harren eigen siden, besykje om te sjen wat der bart mei de folding fan in stik koade, te bestudearjen dit of dat pân yn fol. Besykje te fieren allerhanne nijsgjirrige ideeën mei help fan in folslein oare taal ark, en CSS animaasjes sille iepen foar jo op in nije manier. Dizze ienfâldige advys is dat - eksperimint foar dysels.

CSS-animation uterlik

En no foar de nijsgjirrige foarbylden. As regel, de standert brûken fan animaasje is te feroarjen guon eleminten fan de side stadichoan boppe de tiid. Mar dit is te fanselssprekkend, is it net it? Sa hjir wy diele mei jo in bûtengewoane wize te brûken de tiid fan it uterlik fan 'animaasje.

It feit dat de werklike feroarings oan de site yn in stik animatie of yn syn hiele hear en fear kin hast instantaneous. Om do dit, wy freegje gjin twa keyframes, mar brûk in hiel lyts berik. Bygelyks, it kin wêze gelyk oan 0.001%. Yn dit gefal, CSS animation kin barre direkt. It is perfekt neimakke in neon teken. Dit teken sil blink, en as it animation CSS sil dan wêze mear transparânsje en te brûken en funksje text-skaad, it teken sil hast lykas de echte ding.

Hjir is in foarbyld koade.

It ferbetterjen fan de funksjonele knoppen

As wy beskôgje de fraach fan wat kin ûngewoane CSS-Animation knop, kin sein wurde dat de fersiering opsjes knop op de sites grutte set. Tink oan ien foarbyld. It effekt fan it drukken de bolle knoppen. Foarbyld code - hjirûnder.

Mei sa'n ienfâldige stikje animaasje CSS blok fan koade sil sjen moaie goed. It sjocht der hiel nijsgjirrich en wurdt faak brûkt op folslein ferskillende siden.

CSS-animaasje as jo mûs oer in site Snippet

De dynamyske en moderne site, hoe langer it bliuwt op de brûker. Boppedat, in wichtige rol wurdt ek spile troch ynteraktiviteit. Dat is grif wier, mar wat kin helpe om de side sa ynteraktyf mooglik?

Hiel goed dan sjogge om te wurkjen mei design eleminten en fragminten fan side as de mûs. Animation knoppen as jo de mûs wy besprutsen hjirboppe, mar ôfsjoen fan dat jo kinne "doen herleven" en ferskate stikken fan de site, wêrtroch't se de meast stylish. Lykas mei al it oare, de wichtichste prinsipe hjir - net overdo is.

Sa is der in poerbêste oergong eigendom, dat kin it maksimaal fjouwer relatearre eigenskippen.

Tidens in bepaalde tiid CSS-animaasje as jo mei de mûs oer dit stik koade sil feroarje. De tiid wurdt bepaald troch de doer eigendom. Dat is, as jo mei de mûs oer in item dat begjint in nuveraardige feroaring alle eigendom dat wy sette yn 'e selektor. Yn ús gefal is - .element (punt nei foaren). Wat ûnder is in foarbyld fan 'e koade, doe't de oergong fan de container div, dat hat de pseudo .hover, de eftergrûn feroaret fan read oant grien.

Wannear't in brûker hinget de mûs CSS animation feroaret net direkt, mar fertrage troch guon fraksje fan in sekonde, dy't soarget foar in nijsgjirrich effekt.

Boppedat, as yn 'e foarige foarbyld, jo frege in beskate regel dy't achtergrûn yn in div elemint waard feroare fan read foar grien en bewegen binnen 0,4 sekonden, dan moat sein wurde dat mei help fan de hiele wearde, kinne jo jilde foar de hiele eigendom is hielendal fuortendaliks.

Foarbyld koade fertsjintwurdige as folget.

Sa't bliken docht út eigenskippen padding en eftergrûn oergong effekt sil foarkomme dat is fêst fan doel oergong eigendom. Jo moatte der rekken mei dat jo kinne oantsjutte in komma skieden in beskate set fan wearden.

Guon nuânses fan it brûken fan dit type animaasje op knoppen

Yn prinsipe, yn 'e lange doer is it net sa wichtich yn wat oarder wurdt spesifisearre en oerbrocht nei it gegevens wearden. Utsein yn ien gefal. Kinne wy omgean mei de fertraging eigendom. Yn dit gefal, wy moatte oantsjutte hoelang 'en tiid. Mei oare wurden, wy sille moatte de koade om te fertellen hoe lang it tige nedich om ús in fertraging sil optrede.

Bearing yn gedachten dat guon eigenskippen kin net it effekt fan 'e oergong. Dêrby wurdt, se kin net wêze oergeande. Dat komt troch it feit dat se kinne net animearre.

tekst animation

Mei de help fan 'e koade kin ynsteld wurde en treflike animation CSS tekst. Dit kin wêze wat soarte fan artikel, en in grutte titel, site titel. Lykas hjirboppe neamde, de wichtichste ding - net overdo it en net draaie jo side yn in stoart, dat sil útsjen goedkeap.

No, lit ús besykje om út te finen hokker CSS animaasje fan de tekst, en meitsje him, en tekst schaduwen. Miskien ha jim sjoen horror films, dêr't de nammen fan de skilderijen sels like to fade op elts dim-tsjustere eftergrûn. Lit ús besykje te opnij oanmeitsje in algemiene foarbyld fan wat as dit.

Bringt it tekst yn 'e styl fan' e horror films

Eins de hiele idee is om de tekst dêr't de brieven wiene in bytsje dizenich en soe draaie. Wêrby't tusken brieven moat in romte. Wy sille brûke interalphabetic skaad, krektas it ynterval. Om de útfiering fan it idee, wy moatte in skript Lettering.js skriuwerskip Dave Rupert. Hy nedich om wrap wurden plus in pear brieven yn de tag span. Earst jo moatte wrap it sin yn h2 tag. Hjir is in foarbyld koade.

Doe obernom al de wurden yn h2 tags yn de tag span.

It bart as dit.

It sil sjen wat omslachtich, mar net litte dat lestich falle.

Manic krijen genôch struktuer.

Dêrtroch hawwe wy elk fan ús besteande brieven ferpakt yn in tag span. Se draaide út echt in soad. Mar it foarbyld is frij simplistic yn de koade boppe de resultearre. Har hiele struktuer, kinne jo skriuwe sels, en it scil wêze in pear mear. It hinget ek oan hokker soarte fan tekst dy't jo wolle brûke.

Wy konkludearje ús wurk in bytsje stilearre. Al ús titels yn it boppesteande foarbyld, komt te lizzen yn de hiele breedte fan it skerm. En hja sille nimme op hast alle beskikbere romte.

Om't wy sille om al ús brieven midden op it skerm, dan, foar ús container en wy ek nedich flexbox.

Hjir is in foarbyld fan syn koade.

No wy hawwe dien sadat alle brieven, dy't ferpakt yn in span klasse, dy't heart ta de âlder klasse .os-sinnen, komt te lizzen en sil taheakke wurde oan it yn 'e midden.

Ferjit net te foegjen in bytsje frije romte, dat is himsels letter spacing.

Yn dit gefal, it earste wrapper soe graach hawwe bepaalde ekstra eigenskippen. Dit eigendom perspektyf. It makket it mooglik ús om der wis fan dat dizze side sil wêze as te stean út, komme op de foargrûn.

Harsels as ús brieven sille wêze transparant, en wy sille begjinne in oanbod fan animaasje foar harren earne yn 5.2 sekonden. Hjirûnder - foarbyld koade.

It is ek wichtich om fêst te stellen hoe en mei hokker fertraging sil ferskine ús sinnen en útdrukkings. Hokker fan de dielen fan 'e tekst sil ferskine flugger as it foarige, en hoefolle. De koade sil der sa útsjen.

Lit ús jouwe in lyts, mar hiel nijsgjirrich effekt. Set de dekking fan 0,2. Interalphabetic ôfstân dus sil frij grut. Brieven sille ek rotearre wurde foar ferskate axis Y. Sjoch dy, likegoed as brûkers fan jo side sil wêze mar in lyts part fan dizze brieven. Ek, ferjit net om te jaan it effekt fan 'e eigenskippen fan' text-skaad. Heal animation, wy makken in ûngewoane ding. Wy wy sille direkte de brieven sels, en ek te ferminderjen de ôfstân dy't der tusken har, en dan tanimme de dekking, en nei povernom tekens op 0 foar as Y.

Yn 'e ein, we wer in pear brieven of bedrige promasshtabiruem se. Dit sil jaan nije lytse blur effekt.

En lang om let de lêste wurden CSS-animaasje.

En ja, lang om let heakjen de finale touch. Wy sille rjochtsje op guon spesifike wurden. Se sille hawwe in dappere gesicht. Dit sil jou de nedige neidruk.

Net ferjitte oer Inspirations

As jo besykje te eksperimintearjen sels mei de eigenskippen en CSS animation, besykje te finen ynspiraasje yn alles yn it deistich libben. Dit kin wêze neat út in nijsgjirrige websiden oan guon prachtige fideo effekt.

Boppedat, as jo net PRY, hoe te dwaan dit of dat effekt, en besykje it opnij oanmeitsje dat op har eigen, kinne jo berikke grutte resultaten. Of, op syn minst, altyd leare wat mear oer de mooglikheden fan de programmearring taal dy't jim binne, yn feite, der gebrûk fan meitsje. Net iens folslein yn ferwêzentlike dyn idee miskien ek blike te wêzen hiel spektakulêr.