Ímyndaðu þér þetta: þú tekur þátt í nýju verkefni, kafar ofan í kóðagrunninn og á fyrstu klukkustundunum uppgötvar þú eitthvað pirrandi kunnuglegt. Á víð og dreif um stílblöðin finnurðu margar @keyframes skilgreiningar fyrir sömu grunn hreyfimyndirnar. Þrjár mismunandi innsveiflubrellur, tvö eða þrjú skyggnuafbrigði, handfylli af aðdráttarhreyfingum og að minnsta kosti tvö mismunandi snúningshreyfingar því, jæja, hvers vegna ekki? @keyframes púls { frá { mælikvarði: 1; } til { mælikvarði: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { mælikvarði: 1; } 10%, 40% { mælikvarði: 1,2; } }
Ef þessi atburðarás hljómar kunnuglega ertu ekki einn. Reynsla mín í ýmsum verkefnum er að einn samkvæmasti skyndivinningurinn sem ég get skilað er að sameina og staðla lykilramma. Það er orðið svo áreiðanlegt mynstur að ég hlakka nú til þessarar hreinsunar sem eitt af mínum fyrstu verkum á nýjum kóðagrunni. Rökfræðin á bak við óreiðu Þessi offramboð er fullkomlega skynsamleg þegar þú hugsar um það. Við notum öll sömu grundvallar hreyfimyndirnar í daglegu starfi okkar: dofna, skyggnur, aðdráttur, snúningur og önnur algeng áhrif. Þessar hreyfimyndir eru frekar einfaldar og það er auðvelt að búa til fljótlega @keyframes skilgreiningu til að vinna verkið. Án miðstýrðs hreyfimyndakerfis skrifa þróunaraðilar þessa lykilramma frá grunni, ómeðvitaðir um að svipaðar hreyfimyndir séu þegar til annars staðar í kóðagrunninum. Þetta er sérstaklega algengt þegar unnið er í arkitektúr sem byggir á íhlutum (sem flest okkar gera þessa dagana), þar sem teymi vinna oft samhliða á mismunandi hlutum forritsins. Niðurstaðan? Hreyfimyndaóreiðu. Litla vandamálið Augljósustu vandamálin við tvíverknað lykilramma eru sóun á þróunartíma og óþarfa kóðauppblástur. Margar lykilrammaskilgreiningar þýða marga staði til að uppfæra þegar kröfur breytast. Þarftu að stilla tímasetningu á hverfa hreyfimyndinni þinni? Þú þarft að leita að hverju tilviki í kóðagrunninum þínum. Viltu staðla slökunaraðgerðir? Gangi þér vel að finna öll afbrigðin. Þessi margföldun viðhaldspunkta gerir jafnvel einfaldar hreyfimyndauppfærslur að tímafrekt verkefni. Stærra vandamálið Þessi tvöföldun lykilramma skapar mun skaðlegra vandamál sem leynist undir yfirborðinu: alþjóðlegu umfangsgildran. Jafnvel þegar unnið er með arkitektúr sem byggir á íhlutum, eru CSS lykilrammar alltaf skilgreindir á alþjóðlegu umfangi. Þetta þýðir að allir lykilrammar eiga við um alla hluti. Alltaf. Já, hreyfimyndin þín notar ekki endilega lykilrammana sem þú skilgreindir í íhlutnum þínum. Það notar síðustu lykilrammana sem passa við nákvæmlega sama nafnið sem var hlaðið inn í alþjóðlegt umfang. Svo lengi sem allir lykilrammar þínir eru eins gæti þetta virst vera smávægilegt mál. En um leið og þú vilt sérsníða hreyfimynd fyrir tiltekið notkunartilvik ertu í vandræðum, eða það sem verra er, þú verður sá sem veldur þeim. Annaðhvort virkar hreyfimyndin þín ekki vegna þess að annar íhlutur hlaðinn á eftir þínum, skrifar yfir lykilrammana þína, eða íhluturinn þinn hleðst síðast og breytir óvart hegðun hreyfimynda fyrir hvern annan íhlut sem notar nafn þess lykilramma, og þú áttar þig kannski ekki einu sinni á því. Hér er einfalt dæmi sem sýnir vandamálið: .component-one { /* hluti stíll */ hreyfimynd: púls 1s vellíðan-í-út óendanlega varamaður; }
/* þessi @keyframes skilgreining mun ekki virka */ @keyframes púls { frá { mælikvarði: 1; } til { mælikvarði: 1,1; } }
/* seinna í kóðanum... */
.component-two { /* hluti stíll */ hreyfimynd: púls 1s vellíðan-í-út óendanlega; }
/* þessi lykilrammi mun gilda um báða hluti */ @keyframes púls { 0%, 20%, 100% { mælikvarði: 1; } 10%, 40% { mælikvarði: 1,2; } }
Báðir þættirnir nota sama nafn hreyfimynda, en önnur @keyframes skilgreiningin skrifar yfir þá fyrstu. Nú munu bæði hluti-einn og hluti-tveir nota seinni lykilrammana, óháð því hvaða hluti skilgreindi hvaða lykilramma. Sjáðu Pen Keyframes Tokens - Demo 1 [forked] eftir Amit Sheen. Það versta? Þetta virkar oft fullkomlega í staðbundinni þróun en brotnar á dularfullan hátt í framleiðslu þegar byggingarferlar breyta hleðsluröð stílblaðanna þinna. Þú endar með hreyfimyndir sem hegða sér mismunandi eftir því hvaða íhlutir eru hlaðnir og í hvaða röð. Lausnin: Sameinaðir lykilrammar Svarið við þessari óreiðu er furðu einfalt: Forskilgreindir kraftmiklir lykilrammar sem eru geymdir í sameiginlegu stílblaði. Í stað þess að láta hvern íhlut skilgreina eigin hreyfimyndir búum við til miðlæga lykilramma sem eru vel skjalfestir, auðvelt aðnota, viðhaldið og sérsniðið að sérstökum þörfum verkefnisins. Hugsaðu um það sem lykilramma tákn. Rétt eins og við notum tákn fyrir liti og bil, og mörg okkar nota nú þegar tákn fyrir hreyfimyndareiginleika, eins og tímalengd og slökunaraðgerðir, hvers vegna ekki líka að nota tákn fyrir lykilramma? Þessi nálgun getur samþættast á náttúrulegan hátt við hvaða núverandi hönnunartáknverkflæði sem þú notar, á sama tíma og þú leysir bæði litla vandamálið (kóða tvíverknað) og stærra vandamálið (átök á heimsvísu) í einu lagi. Hugmyndin er einföld: búðu til eina uppsprettu sannleika fyrir allar algengar hreyfimyndir okkar. Þetta sameiginlega stílblað inniheldur vandlega útbúna lykilramma sem ná yfir hreyfimynstrið sem verkefnið okkar notar í raun og veru. Ekki lengur að giska á hvort hverfandi hreyfimynd sé þegar til einhvers staðar í kóðagrunninum okkar. Ekki lengur að skrifa yfir hreyfimyndir af öðrum íhlutum fyrir slysni. En hér er lykillinn: þetta eru ekki bara kyrrstæður afrita-líma hreyfimyndir. Þau eru hönnuð til að vera kraftmikil og sérhannaðar með sérsniðnum CSS-eiginleikum, sem gerir okkur kleift að viðhalda samkvæmni en samt hafa sveigjanleika til að aðlaga hreyfimyndir að sérstökum notkunartilvikum, eins og ef þú þarft aðeins stærri „púls“ hreyfimynd á einum stað. Byggja fyrsta lykilramma táknið Einn af fyrstu lághangandi ávöxtunum sem við ættum að takast á við er „fade-in“ hreyfimyndin. Í einu af nýlegum verkefnum mínum fann ég yfir tylft aðskildar innfelldar skilgreiningar, og já, þær hreyfðu einfaldlega ógagnsæið frá 0 í 1. Svo, búum til nýtt stílblað, köllum það kf-tokens.css, flytjum það inn í verkefnið okkar og setjum lykilramma okkar með viðeigandi athugasemdum inni í því. /* keyframes-tokens.css */
/* * Fade In - dofna inngangur fjör * Notkun: hreyfimynd: kf-fade-in 0.3s vellíðan út; */ @keyframes kf-fade-in { frá { ógagnsæi: 0; } til { ógagnsæi: 1; } }
Þessi eina @keyframes yfirlýsing kemur í stað allra þessara dreifðu innsláttar hreyfimynda um kóðagrunninn okkar. Hreint, einfalt og á heimsvísu. Og nú þegar við höfum þetta tákn skilgreint, getum við notað það úr hvaða íhlut sem er í verkefninu okkar: .modal { hreyfimynd: kf-fade-in 0.3s vellíðan út; }
.tooltip { hreyfimynd: kf-fade-in 0.2s vellíðan-inn-út; }
.tilkynning { hreyfimynd: kf-fade-in 0,5s vellíðan út; }
Sjáðu Pen Keyframes Tokens - Demo 2 [forked] eftir Amit Sheen. Athugið: Við erum að nota kf- forskeyti í öllum @keyframes nöfnum okkar. Þetta forskeytið þjónar sem nafnrými sem kemur í veg fyrir að nafngiftir stangist á við núverandi hreyfimyndir í verkefninu og gerir það strax ljóst að þessir lykilrammar koma frá lykilramma táknskránni okkar. Að búa til kraftmikla rennibraut Kf-fade-in lykilrammar virka frábærlega vegna þess að þeir eru einfaldir og lítið pláss til að klúðra hlutunum. Í öðrum hreyfimyndum þurfum við hins vegar að vera mun kraftmeiri og hér getum við nýtt okkur gífurlegan kraft CSS sérsniðinna eiginleika. Þetta er þar sem lykilrammatákn skína í raun samanborið við dreifðar kyrrstæðar hreyfimyndir. Við skulum taka algenga atburðarás: „renna inn“ hreyfimyndir. En renna inn hvaðan? 100px frá hægri? 50% frá vinstri? Ætti það að fara inn efst á skjánum? Eða kannski fljóta inn frá botninum? Svo margir möguleikar, en í stað þess að búa til aðskilda lykilramma fyrir hverja stefnu og hvert afbrigði, getum við smíðað einn sveigjanlegan tákn sem aðlagast öllum aðstæðum: /* * Renndu inn - stefnuvirkt rennibraut * Notaðu --kf-slide-from til að stjórna stefnu * Sjálfgefið: rennur inn frá vinstri (-100%) * Notkun: * hreyfimynd: kf-slide-in 0,3s vellíðan út; * --kf-slide-from: -100px 0; // renna frá vinstri * --kf-slide-from: 100px 0; // renna frá hægri * --kf-slide-from: 0 -50px; // renna ofan */
@keyframes kf-slide-in { frá { þýða: var(--kf-slide-from, -100% 0); } til { þýða: 0 0; } }
Nú getum við notað þetta eina @keyframes tákn fyrir hvaða glærustefnu sem er einfaldlega með því að breyta --kf-slide-from sérsniðnum eiginleikum: .sidebar { hreyfimynd: kf-slide-in 0,3s vellíðan út; /* Notar sjálfgefið gildi: skyggnur frá vinstri */ }
.tilkynning { hreyfimynd: kf-slide-in 0,4s vellíðan út; --kf-slide-from: 0 -50px; /* renna að ofan */ }
.modal { fjör: kf-fade-in 0,5s, kf-slide-in 0,5s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* renna frá neðst til hægri */ }
Þessi nálgun veitir okkur ótrúlegan sveigjanleika en viðheldur stöðugleika. Einn lykilramma yfirlýsing, óendanlegir möguleikar. Sjáðu Pen Keyframes Tokens - Demo 3 [forked] eftir Amit Sheen. Og ef við viljum gera hreyfimyndirnar okkar enn sveigjanlegri og leyfa líka „renna“ áhrifum, getum viðbættu einfaldlega við --kf-slide-to sérsniðnum eiginleikum, svipað og við munum sjá í næsta kafla. Tvíátta aðdráttarlykilrammar Önnur algeng hreyfimynd sem er afrituð á milli verkefna eru „zoom“ áhrif. Hvort sem það er lúmskur uppsláttur fyrir ristuðu brauðskilaboð, stórkostleg aðdráttur fyrir gerðir eða mildur minnkandi áhrif fyrir fyrirsagnir, þá eru aðdráttarhreyfingar alls staðar. Í stað þess að búa til aðskilda lykilramma fyrir hvert kvarðagildi, skulum við smíða eitt sveigjanlegt sett af kf-zoom lykilramma:
/* * Aðdráttur - hreyfimynd í mælikvarða * Notaðu --kf-zoom-from og --kf-zoom-to til að stjórna kvarðagildum * Sjálfgefið: stækkar úr 80% í 100% (0,8 til 1) * Notkun: * hreyfimynd: kf-zoom 0,2s vellíðan út; * --kf-aðdrátt-frá: 0,5; --kf-zoom-to: 1; // aðdráttur úr 50% í 100% * --kf-aðdrátt-frá: 1; --kf-zoom-to: 0; // aðdráttur úr 100% í 0% * --kf-aðdrátt-frá: 1; --kf-zoom-to: 1.1; // aðdráttur úr 100% í 110% */
@keyframes kf-zoom { frá { mælikvarði: var(--kf-aðdrátt-frá, 0,8); } til { mælikvarði: var(--kf-zoom-to, 1); } }
Með einni skilgreiningu getum við náð hvaða aðdrætti sem við þurfum: .ristað brauð { fjör: kf-slide-in 0,2s, kf-aðdráttur 0,4s slökun; --kf-slide-from: 0 100%; /* renna að ofan */ /* Notar sjálfgefna aðdrátt: skalast frá 80% í 100% */ }
.modal { hreyfimynd: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-aðdrátt-frá: 0; /* stórkostlegur aðdráttur frá 0% í 100% */ }
.heading { fjör: kf-fade-in 2s, kf-zoom 2s auðvelda inn; --kf-aðdrátt-frá: 1.2; --kf-zoom-to: 0,8; /* varlega skala niður */ }
Sjálfgefið 0,8 (80%) virkar fullkomlega fyrir flesta UI þætti, eins og ristað brauð skilaboð og kort, en samt er auðvelt að sérsníða fyrir sérstök tilvik. Sjáðu Pen Keyframes Tokens - Demo 4 [forked] eftir Amit Sheen. Þú gætir hafa tekið eftir einhverju áhugaverðu í nýlegum dæmum: við höfum verið að sameina hreyfimyndir. Einn af helstu kostum þess að vinna með @keyframes tákn er að þau eru hönnuð til að samþættast óaðfinnanlega hvert við annað. Þessi slétta samsetning er viljandi, ekki óvart. Við munum ræða samsetningu hreyfimynda nánar síðar, þar á meðal hvar þær geta orðið erfiðar, en flestar samsetningar eru einfaldar og auðvelt að útfæra. Athugið: Á meðan ég skrifaði þessa grein, og kannski vegna þess að ég skrifaði hana, fann ég sjálfan mig að endurhugsa alla hugmyndina um inngangshreyfingar. Með allar nýlegar framfarir í CSS, þurfum við þær yfirleitt? Sem betur fer kannaði Adam Argyle sömu spurningarnar og tjáði þær á frábæran hátt á blogginu sínu. Þetta stangast ekki á við það sem er skrifað hér, en það býður upp á nálgun sem vert er að íhuga, sérstaklega ef verkefnin þín reiða sig mikið á inngangsteiknimyndir. Stöðugar hreyfimyndir Þó að inngangshreyfingar, eins og „fade“, „slide“ og „zoom“ gerast einu sinni og hætta síðan, hringjast samfelldar hreyfimyndir endalaust til að vekja athygli eða gefa til kynna áframhaldandi virkni. Tvær algengustu samfelldu hreyfimyndirnar sem ég lendi í eru „snúningur“ (til að hlaða vísbendingar) og „púls“ (til að auðkenna mikilvæga þætti). Þessar hreyfimyndir bjóða upp á einstaka áskoranir þegar kemur að því að búa til lykilramma tákn. Ólíkt inngangshreyfingum sem venjulega fara frá einu ríki til annars, þurfa samfelldar hreyfimyndir að vera mjög sérhannaðar í hegðunarmynstri sínum. The Spin Doctor Hvert verkefni virðist nota margar snúningshreyfingar. Sumir snúast réttsælis, aðrir rangsælis. Sumir gera einn 360 gráðu snúning, aðrir gera margar beygjur fyrir hraðari áhrif. Í stað þess að búa til aðskilda lykilramma fyrir hvert afbrigði, skulum við búa til einn sveigjanlegan snúning sem sér um allar aðstæður:
/* * Snúningur - snúningsfjör * Notaðu --kf-spin-from og --kf-spin-to til að stjórna snúningssviði * Notaðu --kf-snúningur til að stjórna snúningsmagni * Sjálfgefið: snýst úr 0° í 360° (1 fullur snúningur) * Notkun: * hreyfimynd: kf-snúningur 1s línuleg óendanlegur; * --kf-snúningur: 2; // 2 heilir snúningar * --kf-snúningur-frá: 0°; --kf-snúningur-til: 180°; // hálfur snúningur * --kf-snúningur-frá: 0°; --kf-snúningur-til: -360°; // rangsælis */
@keyframes kf-spin { frá { snúa: var(--kf-snúningur-frá, 0°); } til { snúa: calc(var(--kf-snúningur-frá, 0deg) + var(--kf-snúningur-til, 360deg) * var(--kf-snúningur, 1)); } }
Nú getum við búið til hvaða snúningsafbrigði sem okkur líkar:
.loading-spinner { fjör: kf-snúningur 1s línuleg óendanlegur; /* Notar sjálfgefið: snýst úr 0deg í 360deg */ }
.fast-loader { fjör: kf-snúningur 1.2s vellíðan-í-út óendanlega varamaður; --kf-snúningur: 3; /* 3 heilir snúningar fyrir hverja stefnu í hverri lotu*/ }
.steped-reverse { fjör: kf-snúningur 1.5s skref(8) óendanlegt; --kf-snúningur-til: -360°; /* rangsælis */ }
.subtle-wiggle { fjör: kf-snúningur 2s vellíðan-í-út óendanlega varamaður; --kf-snúningur-frá: -16°; --kf-snúningur-til: 32°; /* sveiflast 36 gráður: á milli -18 gráður og +18 gráður */ }
Sjáðu Pen Keyframes Tokens - Demo 5 [forked] eftir Amit Sheen. Fegurðin við þessa nálgun er að sömu lykilrammar virka til að hlaða spuna, snúningstákn, sveifluáhrif og jafnvel flóknar fjölbeygjuhreyfingar. Púls þversögnin Púls hreyfimyndir eru erfiðari vegna þess að þær geta „púlsað“ mismunandi eiginleika. Sumir púlsa kvarðann, aðrir púlsa ógagnsæið og sumir púlslitareiginleikar eins og birta eða mettun. Í stað þess að búa til sérstaka lykilramma fyrir hverja eign getum við búið til lykilramma sem virka með hvaða CSS eign sem er. Hér er dæmi um púlslykilramma með valmöguleika fyrir mælikvarða og ógagnsæi:
/* * Púls - pulsandi fjör * Notaðu --kf-pulse-scale-from og --kf-pulse-scale-to til að stjórna kvarðasviði * Notaðu --kf-pulse-opacity-from og --kf-pulse-opacity-to til að stjórna ógagnsæisviði * Sjálfgefið: enginn púls (öll gildi 1) * Notkun: * hreyfimynd: kf-pulse 2s vellíðan-í-út óendanlega varamaður; * --kf-púls-kvarði-frá: 0,95; --kf-púls-kvarði-til: 1,05; // skala púls * --kf-púls-ógagnsæi-frá: 0,7; --kf-púls-ógagnsæi-til: 1; // ógagnsæi púls */
@keyframes kf-pulse { frá { mælikvarði: var(--kf-púls-kvarði-frá, 1); ógagnsæi: var(--kf-púls-ógagnsæi-frá, 1); } til { mælikvarði: var(--kf-púls-kvarði-til, 1); ógagnsæi: var(--kf-púls-ógagnsæi-til, 1); } }
Þetta skapar sveigjanlegan púls sem getur lífgað marga eiginleika: .call-to-action { hreyfimynd: kf-púls 0,6s óendanlegur varamaður; --kf-púls-ógagnsæi-frá: 0,5; /* ógagnsæi púls */ }
.notification-dot { hreyfimynd: kf-púls 0,6s vellíðan-í-út óendanlega varamaður; --kf-púls-kvarði-frá: 0,9; --kf-pulse-scale-to: 1.1; /* kvarðapúls */ }
.text-highlight { hreyfimynd: kf-púls 1.5s léttir út óendanlega; --kf-púls-kvarði-frá: 0,8; --kf-púls-ógagnsæi-frá: 0,2; /* mælikvarði og ógagnsæi púls */ }
Sjáðu Pen Keyframes Tokens - Demo 6 [forked] eftir Amit Sheen. Þessi eini kf-púls lyklarammi getur séð um allt frá fíngerðum athygli til stórkostlegra hápunkta, allt á sama tíma og auðvelt er að sérsníða. Ítarleg slökun Eitt af því frábæra við að nota lykilramma-tákn er hversu auðvelt það er að stækka hreyfimyndasafnið okkar og koma með áhrif sem flestir forritarar myndu ekki nenna að skrifa frá grunni, eins og teygju eða hopp. Hér er dæmi um einfaldan „hopp“ lykilramma tákn sem notar --kf-bounce-from sérsniðna eiginleika til að stjórna stökkhæðinni. /* * Hopp - hreyfimynd fyrir skoppandi inngang * Notaðu --kf-bounce-from til að stjórna stökkhæð * Sjálfgefið: hoppar úr 100vh (af skjá) * Notkun: * hreyfimynd: kf-bounce 3s vellíðan inn; * --kf-hopp-frá: 200px; // hoppa úr 200px hæð */
@keyframes kf-bounce { 0% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -1); }
34% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -0.4); }
55% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -0.2); }
72% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -0.1); }
85% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -0,05); }
94% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -0,025); }
99% { þýða: 0 calc(var(--kf-hopp-frá, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { þýða: 0 0; fjör-tímasetning-aðgerð: vellíðan-út; } }
Hreyfimyndir eins og „teygjanlegt“ eru aðeins erfiðari vegna útreikninga inni í lykilrömmum. Við þurfum að skilgreina --kf-elastic-from-X og --kf-elastic-from-Y sérstaklega (bæði eru valfrjáls), og saman leyfa þau okkur að búa til teygjanlegt inngang frá hvaða stað sem er á skjánum.
/* * Teygjanlegt inn - teygjanlegt inngangsfjör * Notaðu --kf-elastic-from-X og --kf-elastic-from-Y til að stjórna upphafsstöðu * Sjálfgefið: fer inn frá efstu miðju (0, -100vh) * Notkun: * hreyfimynd: kf-teygjanlegt-í 2s vellíðan-í-út bæði; * --kf-teygjanlegt-frá-X: -50px; * --kf-teygjanlegt-frá-Y: -200px; // slá inn frá (-50px, -200px) */
@keyframes kf-elastic-in { 0% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * 1) calc(var(--kf-teygjanlegt-frá-Y, 0px) * 1); }
16% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * -0,3227) calc(var(--kf-teygjanlegt-frá-Y, 0px) * -0,3227); }
28% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * 0,1312)calc(var(--kf-teygjanlegt-frá-Y, 0px) * 0,1312); }
44% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * -0,0463) calc(var(--kf-teygjanlegt-frá-Y, 0px) * -0,0463); }
59% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * 0,0164) calc(var(--kf-teygjanlegt-frá-Y, 0px) * 0,0164); }
73% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * -0,0058) calc(var(--kf-teygjanlegt-frá-Y, 0px) * -0,0058); }
88% { þýða: calc(var(--kf-teygjanlegt-frá-X, -50vw) * 0,0020) calc(var(--kf-teygjanlegt-frá-Y, 0px) * 0,0020); }
100% { þýða: 0 0; } }
Þessi nálgun gerir það auðvelt að endurnýta og sérsníða háþróaða lykilramma í verkefninu okkar, bara með því að breyta einni sérsniðnum eiginleika.
.bounce-and-zoom { fjör: kf-bounce 3s léttir inn, kf-zoom 3s línuleg; --kf-aðdrátt-frá: 0; }
.bounce-and-slide { fjör-samsetning: bæta við; /* Báðar hreyfimyndirnar nota translate */ fjör: kf-bounce 3s léttir inn, kf-renna-inn 3s vellíðan út; --kf-slide-from: -200px; }
.elastic-in { fjör: kf-teygjanlegt-í 2s vellíðan-í-út bæði; }
Sjáðu Pen Keyframes Tokens - Demo 7 [forked] eftir Amit Sheen. Hingað til höfum við séð hvernig við getum sameinað lykilramma á snjallan og skilvirkan hátt. Auðvitað gætirðu viljað fínstilla hlutina til að passa betur við þarfir verkefnisins þíns, en við höfum farið yfir dæmi um nokkrar algengar hreyfimyndir og dagleg notkunartilvik. Og með þessum lykilrammatáknum á sínum stað höfum við nú öfluga byggingareiningar til að búa til samræmdar, viðhaldanlegar hreyfimyndir í öllu verkefninu. Ekki fleiri afritaðir lykilrammar, ekki fleiri alþjóðleg umfangsátök. Bara hrein, þægileg leið til að sinna öllum hreyfiþörfum okkar. En raunverulega spurningin er: Hvernig setjum við þessar byggingareiningar saman? Að setja allt saman Við höfum séð að það er einfalt að sameina grunnlykilramma tákn. Við þurfum ekkert sérstakt en að skilgreina fyrstu hreyfimyndina, skilgreina þá seinni, stilla breyturnar eftir þörfum, og það er það. /* Fade in + renna inn */ .ristað brauð { fjör: kf-fade-in 0.4s, kf-slide-in 0,4s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Aðdráttur + dofna inn */ .modal { fjör: kf-fade-in 0.3s, kf-aðdráttur 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-aðdrátt-frá: 0,7; --kf-zoom-to: 1; }
/* Renndu inn + púls */ .tilkynning { fjör: kf-slide-in 0,5s, kf-púls 1,2s vellíðan-inn-út óendanlega varamaður; --kf-slide-from: -100px 0; --kf-púls-kvarði-frá: 0,95; --kf-púls-kvarði-til: 1,05; }
Þessar samsetningar virka fallega vegna þess að hver hreyfimynd miðar við mismunandi eiginleika: ógagnsæi, umbreytingu (þýða/kvarða) o.s.frv. En stundum eru árekstrar og við þurfum að vita hvers vegna og hvernig á að bregðast við þeim. Þegar tvær hreyfimyndir reyna að hreyfa sama eiginleika - til dæmis bæði hreyfiskala eða bæði ógagnsæi hreyfimynda - verður niðurstaðan ekki sú sem þú bjóst við. Sjálfgefið er að aðeins eitt af hreyfimyndunum er í raun beitt á þá eiginleika, sem er það síðasta á hreyfimyndalistanum. Þetta er takmörkun á því hvernig CSS meðhöndlar margar hreyfimyndir á sömu eign. Til dæmis mun þetta ekki virka eins og ætlað er því aðeins kf-púls hreyfimyndin mun gilda. .bad-combo { fjör: kf-zoom 0,5s áfram, kf-púls 1,2s óendanlegur varamaður; --kf-aðdrátt-frá: 0,5; --kf-zoom-to: 1.2; --kf-púls-kvarði-frá: 0,8; --kf-pulse-scale-to: 1.1; }
Hreyfimyndaviðbót Einfaldasta og beinasta leiðin til að meðhöndla margar hreyfimyndir sem hafa áhrif á sama eiginleika er að nota eiginleikann hreyfimyndasamsetningu. Í síðasta dæminu hér að ofan kemur kf-púls hreyfimyndin í stað kf-zoom hreyfimyndarinnar, þannig að við munum ekki sjá upphafsaðdráttinn og fáum ekki væntanlegan mælikvarða upp í 1,2. Með því að stilla hreyfimyndasamsetninguna til að bæta við segjum við vafranum að sameina bæði hreyfimyndirnar. Þetta gefur okkur þá niðurstöðu sem við viljum. .component-two { fjör-samsetning: bæta við; }
Sjáðu Pen Keyframes Tokens - Demo 8 [forked] eftir Amit Sheen. Þessi nálgun virkar vel í flestum tilvikum þar sem við viljum sameina áhrif á sömu eign. Það er líka gagnlegt þegar við þurfum að sameina hreyfimyndir með kyrrstæðum eignagildum. Til dæmis, ef við höfum frumefni sem notar translate eiginleikann til að staðsetja hann nákvæmlega þar sem við viljum, og þá viljum við hreyfa hann inn með kf-slide-in keyframes, fáum við ógeðslegt sýnilegt stökk án hreyfimyndasamsetningar. Sjáðu Pen Keyframes Tokens - Demo 9 [forked] eftir Amit Sheen. Með hreyfimyndasamsetningu stillt á að bæta við er hreyfimyndin mjúklega sameinuð því sem fyrir erumbreyta, þannig að frumefnið helst á sínum stað og lífgar eins og búist er við. Fjör Stagger Önnur leið til að meðhöndla margar hreyfimyndir er að „stökkva“ þeim - það er að segja að hefja aðra hreyfimyndina örlítið eftir að þeirri fyrri lýkur. Það er ekki lausn sem virkar fyrir hvert tilvik, en það er gagnlegt þegar við erum með inngangsfjör sem fylgt er eftir með samfelldri hreyfimynd. /* dofna inn + ógagnsæi púls */ .tilkynning { fjör: kf-fade-in 2s vellíðan út, kf-púls 0,5s 2s vellíðan-inn-út óendanlegur varamaður; --kf-púls-ógagnsæi-til: 0,5; }
Sjáðu Pen Keyframes Tokens - Demo 10 [forked] eftir Amit Sheen. Röð skiptir máli Stór hluti af þeim hreyfimyndum sem við vinnum með notar umbreytingareiginleikann. Í flestum tilfellum er þetta einfaldlega þægilegra. Það hefur einnig frammistöðukosti þar sem umbreytingarhreyfingar geta verið GPU-hröðun. En ef við notum umbreytingar þurfum við að sætta okkur við að röðin sem við framkvæmum umbreytingar okkar skiptir máli. Mikið. Í lykilrömmum okkar hingað til höfum við notað einstaka umbreytingar. Samkvæmt forskriftunum er þessu alltaf beitt í fastri röð: í fyrsta lagi fær frumefnið að þýða, síðan snýst, síðan skala. Þetta er skynsamlegt og er það sem flest okkar búast við. Hins vegar, ef við notum umbreytingareiginleikann, þá er röðin sem föllin eru skrifuð í þeirri röð sem þeim er beitt. Í þessu tilviki, ef við færum eitthvað 100 pixla á X-ásnum og snúum því síðan um 45 gráður, þá er það ekki það sama og að snúa því fyrst um 45 gráður og færa það síðan 100 pixla. /* Bleikur ferningur: Þýða fyrst, síðan snúa */ .example-one { umbreyta: translateX(100px) snúa(45deg); }
/* Grænn ferningur: Snúa fyrst, síðan þýða */ .example-two { umbreyta: snúa(45deg) translateX(100px); }
Sjáðu Pen Keyframes Tokens - Demo 11 [forked] eftir Amit Sheen. En samkvæmt umbreytingarröðinni gerast allar einstakar umbreytingar - allt sem við höfum notað fyrir lykilrammatáknin - fyrir umbreytingaraðgerðirnar. Það þýðir að allt sem þú setur í umbreytingareiginleikanum mun gerast eftir hreyfimyndirnar. En ef þú stillir til dæmis þýðingu saman við kf-snúning lykilrammana, mun þýðingin gerast fyrir hreyfimyndina. Ertu enn ruglaður?! Þetta leiðir til aðstæðna þar sem kyrrstæð gildi geta valdið mismunandi niðurstöðum fyrir sömu hreyfimyndina, eins og í eftirfarandi tilfelli:
/* Algengt fjör fyrir báða spuna */ .spinnari { fjör: kf-snúningur 1s línuleg óendanlegur; }
/* Bleikur snúningur: þýða fyrir snúning (stök umbreyting) */ .spinner-bleikur { þýða: 100% 50%; }
/* Grænn snúningur: snúðu síðan og þýddu (aðgerðaröð) */ .spinner-green { umbreyta: þýða (100%, 50%); }
Sjáðu Pen Keyframes Tokens - Demo 12 [forked] eftir Amit Sheen. Þú getur séð að fyrsti snúningurinn (bleikur) fær þýðingu sem gerist fyrir snúning kf-snúningsins, þannig að hann færist fyrst á sinn stað og snýst síðan. Annar snúningur (grænn) fær translate() fall sem gerist eftir einstaka umbreytingu, þannig að frumefnið snýst fyrst, færist síðan miðað við núverandi horn sitt, og við fáum þessi breiðu sporbrautaráhrif. Nei, þetta er ekki galli. Það er bara eitt af því sem við þurfum að vita um CSS og hafa í huga þegar unnið er með margar hreyfimyndir eða margar umbreytingar. Ef þörf krefur geturðu líka búið til viðbótarsett af kf-spin-alt lykilrömmum sem snúa þáttum með því að nota rotate() aðgerðina. Minni hreyfing Og á meðan við erum að tala um aðra lykilramma, getum við ekki hunsað valkostinn „engin hreyfimynd“. Einn stærsti kosturinn við að nota lykilrammatákn er að hægt er að baka aðgengi inn og það er í raun frekar auðvelt að gera. Með því að hanna lykilramma okkar með aðgengi í huga getum við tryggt að notendur sem kjósa minni hreyfingu fái sléttari, minna truflandi upplifun, án aukavinnu eða tvíverknað kóða. Nákvæm merking „Reduced Motion“ getur breyst svolítið frá einni hreyfimynd til annarrar og frá verkefni til verkefnis, en hér eru nokkur mikilvæg atriði sem þarf að hafa í huga: Þagga lykilramma Þó að hægt sé að mýkja eða hægja á sumum hreyfimyndum, þá eru aðrar sem ættu að hverfa alveg þegar beðið er um minni hreyfingu. Púls hreyfimyndir eru gott dæmi. Til að ganga úr skugga um að þessar hreyfimyndir gangi ekki í minni hreyfiham getum við einfaldlega sett þær inn í viðeigandi fjölmiðlafyrirspurn.
@media (kýs-minni-hreyfingu: engin-val) { @keyfrmaes kf-pulse { frá { mælikvarði: var(--kf-púls-kvarði-frá, 1); ógagnsæi: var(--kf-púls-ógagnsæi-frá, 1); } til { mælikvarði: var(--kf-púls-kvarði-til, 1); ógagnsæi:var(--kf-púls-ógagnsæi-til, 1); } } }
Þetta tryggir að notendur sem hafa stillt prefers-reduced-motion til að minnka munu ekki sjá hreyfimyndina og fá upplifun sem passar við óskir þeirra. Augnablik inn Það eru nokkrir lykilrammar sem við getum ekki einfaldlega fjarlægt, eins og inngangshreyfingar. Gildið verður að breytast, verður að lífga; annars mun þátturinn ekki hafa rétt gildi. En í minni hreyfingu ætti þessi umskipti frá upphafsgildi að vera augnablik. Til að ná þessu, munum við skilgreina auka sett af lykilrömmum þar sem gildið hoppar strax í lokastöðu. Þetta verða sjálfgefnir lykilrammar okkar. Síðan munum við bæta við venjulegum lykilrömmum í miðlunarfyrirspurn fyrir prefers-reduced-motion stillt á enga val, rétt eins og í fyrra dæminu. /* skjóta inn samstundis fyrir minni hreyfingu */ @keyframes kf-zoom { frá, til { mælikvarði: var(--kf-zoom-to, 1); } }
@media (kýs-minni-hreyfingu: engin-val) { /* Upprunalegir aðdráttarlyklarammar */ @keyframes kf-zoom { frá { mælikvarði: var(--kf-aðdrátt-frá, 0,8); } til { mælikvarði: var(--kf-zoom-to, 1); } } }
Þannig munu notendur sem kjósa minnkaða hreyfingu sjá þáttinn birtast samstundis í lokaástandi sínu, á meðan allir aðrir fá hreyfimyndir. Mjúka nálgunin Það eru tilvik þar sem við viljum halda hreyfingu, en miklu mýkri og rólegri en upprunalega hreyfimyndin. Til dæmis getum við skipt út hoppinngangi fyrir mjúklega innfellingu.
@keyframes kf-bounce { /* Mjúk innsláttur fyrir minni hreyfingu */ }
@media (kýs-minni-hreyfingu: engin-val) { @keyframes kf-bounce { /* Upprunalegir hopplyklarammar */ } }
Núna fá notendur með minni hreyfingu virka enn tilfinningu fyrir útliti, en án mikillar hreyfingar hopps eða teygjanlegrar hreyfimyndar. Með byggingareiningarnar á sínum stað er næsta spurning hvernig eigi að gera þá hluti af raunverulegu verkflæðinu. Að skrifa sveigjanlega lyklaramma er eitt, en að gera þá áreiðanlega yfir stórt verkefni krefst nokkurra aðferða sem ég þurfti að læra á erfiðan hátt. Innleiðingaraðferðir og bestu starfsvenjur Þegar við höfum traust bókasafn af lykilrammatáknum er raunverulega áskorunin hvernig á að koma þeim inn í daglegt starf.
Freistingin er að sleppa öllum lykilrömmum í einu og lýsa því yfir að vandamálið sé leyst, en í reynd hef ég komist að því að besti árangurinn kemur frá hægfara upptöku. Byrjaðu á algengustu hreyfimyndunum, eins og að hverfa eða renna. Þetta eru auðveldir vinningar sem sýna strax gildi án þess að þurfa stórar endurskrifanir. Nafngift er annað atriði sem verðskuldar athygli. Samræmt forskeyti eða nafnrými gerir það augljóst hvaða hreyfimyndir eru tákn og hver eru staðbundin einskipti. Það kemur einnig í veg fyrir árekstra fyrir slysni og hjálpar nýjum liðsmönnum að þekkja sameiginlega kerfið í fljótu bragði. Skjöl eru jafn mikilvæg og kóðinn sjálfur. Jafnvel stutt athugasemd fyrir ofan hvern lykilrammatákn getur sparað klukkutíma ágiskun síðar. Framkvæmdaraðili ætti að geta opnað táknskrána, skannað eftir þeim áhrifum sem þeir þurfa og afritað notkunarmynstrið beint inn í hluti þeirra. Sveigjanleiki er það sem gerir þessa nálgun fyrirhafnarinnar virði. Með því að afhjúpa skynsamlega sérsniðna eiginleika gefum við liðum svigrúm til að aðlaga hreyfimyndina án þess að brjóta kerfið. Reyndu á sama tíma að flækja ekki of mikið. Gefðu þá hnappana sem skipta máli og haltu hinum skoðunum. Að lokum, mundu aðgengi. Ekki þarf sérhvert hreyfimyndir valkost með minnkaðri hreyfingu, en margar gera það. Að baka þessar stillingar snemma þýðir að við þurfum aldrei að endurbæta þær seinna, og það sýnir hversu umhyggjusöm sem notendur okkar munu taka eftir, jafnvel þótt þeir minnst aldrei á það.
Mín reynsla er sú að meðhöndla lykilrammatákn sem hluta af hönnunartáknum okkar er það sem lætur þá festast. Þegar þær eru komnar á sinn stað hætta þær að líða eins og tæknibrellur og verða hluti af hönnunarmálinu, eðlileg framlenging á því hvernig varan hreyfist og bregst við. Umbúðir Hreyfimyndir geta verið einn skemmtilegasti hlutinn við að byggja viðmót, en án uppbyggingar geta þau líka orðið ein stærsta uppspretta gremju. Með því að meðhöndla lykilramma sem tákn tekur þú eitthvað sem er venjulega sóðalegt og erfitt að stjórna og breytir því í skýrt, fyrirsjáanlegt kerfi. Raunverulegt gildi er ekki bara að vista nokkrar línur af kóða. Það er í trausti þess að þegar þú notar deyfingu, renna, aðdrátt eða snúning, þá veistu nákvæmlega hvernig það mun haga sér í verkefninu. Það er í sveigjanleikanum sem kemur frá sérsniðnum eiginleikum án óreiðu endalausra afbrigða. Og það er í aðgenginu innbyggt í grunninn frekar en bætt við semeftiráhugsun. Ég hef séð þessar hugmyndir vinna í mismunandi teymum og mismunandi kóðagrunnum og mynstrið er alltaf það sama. Þegar táknin eru komin á sinn stað hætta lykilrammar að vera dreifð safn brellna og verða hluti af hönnunarmálinu. Þeir láta vöruna líða meira viljandi, stöðugri og meira lifandi. Ef þú tekur eitt úr þessari grein, láttu það vera þetta: hreyfimyndir eiga skilið sömu umhyggju og uppbyggingu og við gefum nú þegar litum, leturfræði og bili. Lítil fjárfesting í lykilramma táknum skilar sér í hvert skipti sem viðmótið þitt hreyfist.
