CSS Animation ak posiblite li yo

Mande ki jan fè animasyon CSS, anpil divinò ale nan rechèch nan leson ak enstriksyon. Epi menm si enstriksyon sa yo ka jwenn isit la, pami lòt bagay, n ap ba ou prensipal konsèy la itil nan kreyasyon an nan animasyon lè l sèvi avèk CSS.

ideyal devlopman sekrè

Konsèy ki ka bay tout moun ki ta vle konnen konplètman sa ki se yon animasyon CSS lis, se jan sa a. Lè eksperyans yo chak jou avèk moso prepare nan kòd epi eseye pote soti nan eksperyans pwòp yo. Nan tan an gratis nan travay sou sit pwòp yo, eseye wè sa ki k ap pase ak plisman a nan yon moso nan kòd, yo etidye sa a oswa pwopriyete ki nan plen. Eseye aplike tout kalite lide enteresan lè l sèvi avèk yon zouti ak lang konplètman diferan, ak Animations CSS yo ap louvri pou ou nan yon nouvo fason. konsèy sa a ki senp se sa a - eksperyans pou tèt ou.

CSS-animasyon aparans

Epi, koulye a pou egzanp yo ki enteresan. Kòm yon règ, itilize nan estanda nan animasyon se chanje kèk eleman nan sit la piti piti sou tan. Men, sa a se twò evidan, se pa li? Se konsa, isit la nou pataje avèk ou yon fason ekstraòdinè yo sèvi ak moman sa a nan aparans nan animasyon.

Lefèt ke chanjman yo reyèl nan sit la nan yon moso nan animasyon oswa nan antye li yo ka prèske Enstantane. Pou fè sa, nou mande nenpòt de keyframes, men sèvi ak yon seri trè piti. Pou egzanp, li pouvwa dwe egal a 0,001%. Nan ka sa a, CSS animasyon ka rive imedyatman. Li se pafè pou similye yon siy lumineuz. siy sa a ap bat, epi si CSS nan animasyon pral Lè sa a gen plis transparans ak yo sèvi ak ak karakteristik tèks-lonbraj, siy a pral prèske tankou bagay ki reyèl.

Isit la se yon kòd egzanp.

Amelyore bouton sa yo fonksyonèl

Si nou konsidere kesyon an nan sa ki ka konsidere etranj bouton CSS-animasyon, li kapab te di ke bouton an decoration opsyon sou sit gwo ansanm. Konsidere yon egzanp. Efè a nan peze bouton sa yo konvèks. Kòd Egzanp - anba a.

Avèk tankou yon moso senp nan animasyon blòk CSS nan kòd pral gade trè byen. Li sanble trè enteresan ak se souvan yo itilize sou sit konplètman diferan.

CSS-animasyon lè ou hover sou yon brib sit

Sou sit la dinamik ak modèn, ankò an li rete sou itilizatè a. Anplis de sa, se yon wòl enpòtan tou te jwe pa interactivité. Sa a se sètènman vre, men sa ki ka ede nou fè sit la kòm entèaktif ke posib?

Trè byen Lè sa a, gade nan travay ak eleman konsepsyon ak fragman nan sit lè sourit la. bouton Animation lè ou hover nou diskite pi wo a, men apa de ke ou ka "reviv" ak moso divès kalite nan sit la, ki fè yo ki pi élégance la. Menm jan ak tout lòt bagay, prensip la prensipal isit la - pa twòp li.

Se konsa, gen yon pwopriyete tranzisyon ekselan, sa ki ka pran jiska kat pwopriyete ki gen rapò.

Pandan yon sèten tan CSS-animasyon lè ou hover sou pyès sa a nan kòd pral chanje. se tan an detèmine pa pwopriyete a dire. Sa se, lè ou hover sou yon atik li kòmanse yon chanjman spesifik nenpòt ki byen ke nou mete nan seleksyon an. Nan ka nou an li se - .Eleman (pwen pou pi devan). On ti jan anba a se yon egzanp sou kòd la, lè tranzisyon soti nan div nan veso, ki te gen .Hover nan pseudo, jan nou koumanse a chanje soti nan wouj nan vèt.

Lè yon itilizatè plan animasyon an sourit CSS pa chanje imedyatman, men reta pa kèk fraksyon nan yon dezyèm, ki kreye yon efè ki enteresan.

Anplis de sa, si nan egzanp lan anvan, ou te mande yon règ sèten ke te background nan yon eleman div chanje soti nan wouj nan vèt yo epi li deplase nan 0.4 segonn, li ta dwe remake ke moun ki lè l sèvi avèk tout valè a, ou ka aplike nan pwopriyete a tout antye se antyèman imedyatman.

Kòd Egzanp reprezante jan sa a.

Menm jan yo montre nan pwopriyete padding ak efè tranzisyon jan nou koumanse ap fèt ki se detèmine pwopriyete tranzisyon an. Ou ta dwe sonje ke ou ka presize yon yon seri sèten vigil-separe ak valè yo.

Gen kèk nuans nan lè l sèvi avèk sa a ki kalite animasyon sou bouton

Nan prensip, nan kouri nan longè li se pa tèlman enpòtan nan ki lòd yo pral espesifye ak transfere nan valè yo done. Eksepte nan yon sèl ka. Nou ka fè fas ak reta pwopriyete a. Nan ka sa a, nou bezwen presize dire a ak tan. Nan lòt mo, nou pral bezwen kòd la di konbyen tan nesesè a anpil nan nou yon reta pral rive.

Kote yo pote nan tèt ou ke kèk pwopriyete pa kapab efè a nan tranzisyon an. Ki se, se yo pa ka pasajè. Sa a se akòz lefèt ke yo pa ka anime.

tèks animasyon

Avèk èd nan kòd la ka mete ak ekselan tèks animasyon CSS. Sa a pouvwa ap kèk kalite nan atik, ak yon tit pi gwo, tit sit la. Kòm mansyone pi wo a, bagay la prensipal - pa twòp li epi li pa vire sit ou nan yon dechaj, ki pral gade bon mache.

Oke, kite la eseye jwenn konnen ki sa ki CSS animasyon nan tèks, ak kreye li, epi lonbraj tèks. Petèt ou te wè sinema laterè, kote non yo nan penti yo tèt yo te sanble yo fennen nan nenpòt ki jan nou koumanse dim-nwa. Ann eseye rkree yon egzanp jeneral nan yon bagay tankou sa a.

Enkouraje tèks la nan style la nan sinema laterè

Aktyèlman, lide a tout antye se fè tèks la nan ki lèt yo te yon ti kras vag e yo ta Thorne. Sa fè ant lèt ta dwe gen yon espas. Nou pral sèvi ak interalphabetic lonbraj, osi byen ke entèval la. Yo nan lòd yo aplike lide a, nou bezwen yon script Lettering.js patènite Dave Rupert. Li te bezwen yo vlope mo plis yon lèt kèk moun nan span nan tag. Premye ou bezwen yo vlope fraz la nan H2 tag. Isit la se yon kòd egzanp.

Lè sa a, obernom tout mo yo nan Tags H2 nan span nan tag.

Li k ap pase tankou sa a.

Li pral gade yon ti jan ankonbran, men se pa kite sa deranje.

Manyak jwenn ase estrikti.

Kòm yon rezilta, nou gen chak nan lèt ki deja egziste nou an vlope nan yon span tag. Yo te tounen soti reyèlman yon anpil. Men, egzanp lan se byen senplist nan kòd la pi wo a lakòz la. tout estrikti yo, ou ka ekri tèt ou, epi li pral yon plis kèk. Sa depann tou sou ki kalite tèks ou vle sèvi ak.

Nou konkli travay nou yon ti kras stilize. Tout moun nan tit nou an nan egzanp ki anwo a, sa yo pral lokalize nan lajè a tout antye de ekran an. Apre sa, yo pral pran prèske tout espas ki la disponib.

Depi nou ap ale nan mete tout nan lèt nou an santre sou ekran an, lè sa a, pou veso nou yo ak nou menm tou nou bezwen flexbox.

Isit la se yon egzanp nan kòd li yo.

Koulye a, nou te fè sa ki tout lèt yo, ki fè yo vlope nan yon span class, ki fè pati nan klas paran .kreyòl-fraz yo, sa yo pral lokalize epi yo pral marye ak li nan mitan yo.

Pa bliye fè ajoute yon ti jan nan espas gratis, ki se tèt li lèt espas.

Nan ka sa a, pakè a premye ta renmen gen sèten pwopriyete adisyonèl. Sa a pèspektiv pwopriyete. Li pral pèmèt nou asire w ke sit sa a pral tankou kanpe deyò, vini nan avan an.

Tèt yo kòm lèt nou yo pral transparan, epi nou pral lanse yon seri nan animasyon pou yo yon kote nan 5.2 segonn. Anba a - Kòd egzanp.

Li enpòtan tou yo detèmine ki jan ak ki ak sa reta ap parèt fraz ak fraz nou an. Kilès nan pati pyès sa yo nan tèks la ap parèt pi vit pase yon sèl anvan an, e ki jan anpil. Kòd la pral gade tankou sa a.

Se pou nou bay yon efè ti men trè enteresan. Kote stupidity a nan 0.2. Interalphabetic distans konsa yo pral byen gwo. Lèt ap tou ap vire toutotou pou plizyè Y. aks Al gade nan ou, osi byen ke itilizatè yo nan sit ou yo pral sèlman yon ti pati nan lèt sa yo. Epitou, pa bliye bay efè a nan pwopriyete yo nan tèks ki lonbraj. Mwatye animasyon, nou te fè yon bagay dwòl. Nou nou pral dirije lèt yo tèt yo, epi tou li diminye distans la ki se ant yo, ak Lè sa a ogmante stupidity a, epi apre siy povernom sou 0 pou aks Y.

Nan fen a, nou ankò ajoute yon lèt kèk oswa an danje promasshtabiruem yo. Sa a pral bay nouvo ti efè flou.

Epi finalman fraz dènye CSS-animasyon an.

E wi, finalman ajoute manyen final la. Nou pral konsantre sou kèk mo espesifik. Yo pral gen yon figi karaktè fonse. Sa a ap ba anfaz la nesesè.

pa bliye sou enspirasyon

Lè w ap eseye eksperyans tèt ou ak pwopriyete yo ak CSS animasyon, eseye jwenn enspirasyon nan tout bagay nan lavi chak jou. Sa a kapab anyen nan men yon paj wèb ki enteresan nan kèk efè videyo bèl bagay.

Anplis de sa, si ou pa pry, ki jan fè sa a oswa ki efè, epi eseye rkree li sou pwòp yo, ou kapab reyalize rezilta gwo. Oswa, omwen, toujou aprann yon bagay plis enfòmasyon sou posiblite yo nan lang nan pwogram ke ou se, an reyalite, sèvi ak li. Pa menm aplike tout bon vre lide ou ka byen pwouve ke yo dwe trè espektakilè.