Umfanekiso woku: ujoyina iprojekthi entsha, ungene kwi-codebase, kwaye kwiiyure ezimbalwa zokuqala, ufumanisa into ephazamisayo eqhelekileyo. Usasazeke kuwo wonke amaphepha esitayile, ufumana ezininzi @keyframes iinkcazo zoopopayi ezifanayo. Iziphumo ezintathu ezahlukeneyo zokufiphala-ngaphakathi, iinguqu ezimbini okanye ezintathu zesilayidi, ii-animations zoom ezimbalwa, kunye noopopayi ababini abahlukeneyo abahlukeneyo kuba, kuhle, kutheni kungenjalo? @keyframes pulse { ukusuka { isikali: 1; } ukuya { isikali: 1.1; } }
@keyframes i-pulse enkulu { 0%, 20%, 100% { isikali: 1; } 10%, 40% { isikali: 1.2; } }
Ukuba le meko ivakala iqhelekile, awuwedwa. Kumava am kwiiprojekthi ezahlukeneyo, enye yezona zinto zikhawulezayo eziphumeleleyo endinokuzisa kukudibanisa kunye nokulinganisa amagama angundoqo. Ibe yipateni ethembekileyo kangangokuba ngoku ndijonge phambili kolu kucoca njengomnye wemisebenzi yam yokuqala kuyo nayiphi na ikhowudi entsha. Ingqiqo Esemva Kwesiphithiphithi Le mfuneko yenza ingqiqo xa ucinga ngayo. Sonke sisebenzisa oopopayi abafanayo kumsebenzi wethu wemihla ngemihla: ukucima, izilayidi, ukukhulisa, ukujikeleza, kunye nezinye iziphumo eziqhelekileyo. Ezi oopopayi zithe ngqo, kwaye kulula ukucofa inkcazo ekhawulezayo ye-@keyframes ukwenza umsebenzi wenziwe. Ngaphandle kwenkqubo yopopayi esembindini, abaphuhlisi ngokwendalo babhala la magama angundoqo ukusuka ekuqaleni, bengazi ukuba oopopayi abafanayo sele bekho kwenye indawo kwisiseko sekhowudi. Oku kuxhaphake ngakumbi xa usebenza kulwakhiwo olusekwe kumacandelo (uninzi lwethu olulwenzayo kwezi ntsuku), njengoko amaqela ehlala esebenza ngokunxuseneyo kwiindawo ezahlukeneyo zesicelo. Isiphumo? Oopopayi chaos. Ingxaki encinci Eyona miba icacileyo ngokuphinda-phindwa kwamagama angundoqo kukumosha ixesha lophuhliso kunye nokudumba kwekhowudi okungeyomfuneko. Iinkcazo ezininzi ze-keyframe zithetha iindawo ezininzi zokuhlaziya xa iimfuno zitshintsha. Ngaba ufuna ukulungelelanisa ixesha lopopayi wakho we-fade? Kuya kufuneka uzingele yonke imizekelo kwi-codebase yakho. Ngaba uyafuna ukumisela imisebenzi elula? Ithamsanqa lokufumana zonke iinguqulelo. Olu phindo lwamanqaku ogcino lwenza nohlaziyo olulula lopopayi lube ngumsebenzi otya ixesha. Ingxaki Enkulu Oku kuphinda-phindwa kweeframes ezingundoqo kudala ingxaki efihlakeleyo encame ngaphantsi komhlaba: umgibe wehlabathi jikelele. Naxa usebenza ngolwakhiwo olusekwe kwicandelo, ii-keyframes zeCSS zihlala zichazwa kububanzi behlabathi. Oku kuthetha ukuba zonke izakhelo ezingundoqo zisebenza kuwo onke amalungu. Ngalo lonke ixesha. Ewe, oopopayi bakho abasebenzisi amagama angundoqo owachazile kwicandelo lakho. Isebenzisa izitshixo zokugqibela ezihambelana nelo gama linye lalilayishwe kumda wehlabathi. Logama nje onke amagama akho angundoqo afanayo, oku kunokubonakala ngathi ngumba omncinci. Kodwa ngalo mzuzu ufuna ukwenza oopopayi ngokwezifiso kwimeko ethile yokusetyenziswa, usengxakini, okanye okubi ngakumbi, iya kuba nguwe obabangelayo. Nokuba oopopayi bakho abayi kusebenza ngenxa yokuba elinye icandelo lilayishwe emva kwelakho, libhala ngaphezulu izitshixo zakho, okanye icandelo lakho lilayisha okokugqibela kwaye ngempazamo litshintshe indlela yokuziphatha yopopayi kulo lonke elinye icandelo usebenzisa igama le-keyframe, kwaye usenokungayiqondi. Nanku umzekelo olula obonisa ingxaki: .icandelo-enye { /* izimbo zecandelo */ oopopayi: i-pulse 1s lula-in-out infinite alternate; }
/* le @keyframes inkcazo ayizukusebenza */ @keyframes pulse { ukusuka { isikali: 1; } ukuya { isikali: 1.1; } }
/* kamva kwikhowudi... */
.icandelo-ezimbini { /* izimbo zecandelo */ oopopayi: i-pulse 1s lula-in-out infinite; }
/* la magama angundoqo aya kusebenza kuwo omabini amacandelo */ @keyframes pulse { 0%, 20%, 100% { isikali: 1; } 10%, 40% { isikali: 1.2; } }
Omabini amalungu asebenzisa igama lopopayi elifanayo, kodwa elesibini @keyframes inkcazo ibhala ngaphezulu eyokuqala. Ngoku zombini icandelo-enye kunye necandelo-ezimbini ziyakusebenzisa izakhelo ezingundoqo zesibini, kungakhathaliseki ukuba leliphi icandelo elichaza ukuba ngawaphi amagama angundoqo. Jonga i-Pen Keyframes Tokens-Idemo 1 [ifolokhwe] ngu-Amit Sheen. Eyona ndawo imbi? Oku kuhlala kusebenza ngokugqibeleleyo kuphuhliso lwasekhaya kodwa kophuka ngendlela engaqondakaliyo kwimveliso xa iinkqubo zokwakha zitshintsha ulandelelwano lokulayisha lwamaphepha akho esitayile. Ugqibela ngoopopayi abaziphatha ngokwahlukileyo kuxhomekeke ekubeni ngawaphi amacandelo alayishiweyo kwaye koluphi ulandelelwano. Isisombululo: Iifreyimu ezingundoqo eziManyeneyo Impendulo yalo mbhodamo ilula ngokumangalisayo: i-keyframes echazwe kwangaphambili eguquguqukayo egcinwe kwiphepha lesimbo ekwabelwana ngalo. Endaweni yokuvumela icandelo ngalinye lichaze oopopayi balo, sidala amaqhosha angundoqo abekwe embindini abhalwe kakuhle, kulula ukuwenza.ukusetyenziswa, ukugcinwa, kwaye ilungiselelwe iimfuno ezithile zeprojekthi yakho. Yicinge njengeethokheni zamagama angundoqo. Kanye njengoko sisebenzisa iithokheni zemibala kunye nezithuba, kwaye uninzi lwethu sele lusebenzisa iithokheni kwiipropathi zoopopayi, njengobude bexesha kunye nemisebenzi yokunciphisa, kutheni ungasebenzisi amathokheni amaqhosha angundoqo ngokunjalo? Le ndlela inokudibanisa ngokwemvelo kunye naluphi na umqondiso woyilo lwangoku lokuhamba komsebenzi owusebenzisayo, ngelixa usombulula zombini ingxaki encinci (ukuphindaphinda kwekhowudi) kunye nengxaki enkulu (ungquzulwano lwe-global scope) ngexesha elinye. Uluvo luthe tye: yenza umthombo omnye wenyaniso kuzo zonke oopopayi zethu ezifanayo. Eli cwecwe lesimbo ekwabelwana ngalo liqulethe izakhelo ezingundoqo eziyilwe ngononophelo ezigquma iipatheni zoopopayi ezisebenzisayo ngokwenene. Akusekho ukuthelekelela ukuba oopopayi abafade sele bekhona naphi na kwisiseko sekhowudi yethu. Akusayi kuphinda kubhale ngaphezulu oopopayi ngempazamo kwamanye amalungu. Kodwa nasi isitshixo: ezi ayizomifanekiso-popayi yokukopa nje emileyo. Ziyilelwe ukuba ziguquguquke kwaye zenziwe ngokwezifiso ngeepropathi zesiko le-CSS, ezisivumela ukuba sigcine ukungaguquguquki ngelixa sisenobhetyebhetye lokulungelelanisa oopopayi kwiimeko ezithile zokusetyenziswa, njengaxa ufuna upopayi “wepulse” enkulu kancinane kwindawo enye. Ukwakha iThokheni yezakhelo ezingundoqo zokuQala Esinye seziqhamo zokuqala ezijingayo esimele sijongane nazo yi "fade-in" oopopayi. Kwenye yeeprojekthi zam zakutsha nje, ndifumene ngaphezulu kweshumi elinesibini leenkcazo ezahlukeneyo ezifade, kwaye ewe, zonke zivele zabonisa i-opacity ukusuka ku-0 ukuya ku-1. Ke, masenze icwecwe lesitayile esitsha, silibize kf-tokens.css, silingenise kwiprojekthi yethu, kwaye sibeke iiframes zethu ezingundoqo kunye nezimvo ezifanelekileyo ngaphakathi kuyo. /* izakhelo ezingundoqo-iimpawu.css */
/* * Fade In-fiphale i-animation yokungena * Usetyenziso: oopopayi: kf-fade-in 0.3s lula-ngaphandle; */ @keyframes kf-fade-in { ukusuka { ukukhanya okukhanya: 0; } ukuya { ukukhanya okukhanya: 1; } }
Esi sibhengezo singatshatanga @keyframes sithatha indawo yazo zonke ezo zisasazekileyo zoopopayi kwi-codebase yethu. Icocekile, ilula, kwaye iyasebenza kwihlabathi jikelele. Kwaye ngoku sinolu phawu luchaziweyo, sinokulusebenzisa kulo naliphi na icandelo kuyo yonke iprojekthi yethu: .imodeli { oopopayi: kf-fade-in 0.3s lula-ngaphandle; }
.ingcebiso yesixhobo { oopopayi: kf-fade-in 0.2s lula-ngaphakathi-ngaphandle; }
.isaziso { oopopayi: kf-fade-in 0.5s lula-ngaphandle; }
Jonga i-Pen Keyframes Tokens-Idemo yesi-2 [ifolokhwe] ngu-Amit Sheen. Qaphela: Sisebenzisa isimaphambili se-kf kuwo onke amagama ethu @keyframes. Esi simaphambili sisebenza njengendawo yamagama ethintela ukungqubuzana kwamagama kunye neepopayi ezikhoyo kwiprojekthi kwaye yenza ukuba kucace ngokukhawuleza ukuba ezi zikhokelo zivela kwifayile yethu yefayile ye-keyframes. Ukwenza isilayidi esiDynamic I-kf-fade-in keyframes isebenza kakuhle kuba ilula kwaye kukho indawo encinci yokumosha izinto. Kwezinye oopopayi, nangona kunjalo, kufuneka sibe namandla ngakumbi, kwaye apha sinokunyusa amandla amakhulu eempawu zesiko le-CSS. Apha kulapho iithokheni ze-keyframes zikhanya ngokwenene xa zithelekiswa neepopayi ezithe saa. Makhe sithathe imeko eqhelekileyo: "isilayidi-ngaphakathi" oopopayi. Kodwa slayida ungene usuka phi? 100px ukusuka ekunene? 50% ukusuka ekhohlo? Ngaba kufuneka ingene ukusuka phezulu kwesikrini? Okanye mhlawumbi ukudada ukusuka ezantsi? Maninzi kakhulu amathuba, kodwa endaweni yokwenza izakhelo ezingundoqo ezahlukeneyo kwicala ngalinye kunye nokwahluka ngalunye, sinokwakha ithokheni enye ebhetyebhetye eqhelana nazo zonke iimeko: /* * Isilayidi Ngaphakathi - oopopayi bezilayidi ezikwalathiso * Sebenzisa --kf-slide-ukusuka kwicala lolawulo * Ukuhlala kukho: izilayidi ukusuka ekhohlo (-100%) * Ukusetyenziswa: * oopopayi: kf-slide-in 0.3s lula-ngaphandle; * --kf-slide-ukusuka: -100px 0; // isilayidi ukusuka ekhohlo * --kf-slide-ukusuka: 100px 0; // isilayidi ukusuka ekunene * --kf-slide-ukusuka: 0 -50px; // isilayidi ukusuka phezulu */
@keyframes kf-slide-in { ukusuka { translate: var(--kf-slide-from, -100% 0); } ukuya { guqulela: 0 0; } }
Ngoku sinokusebenzisa oluphawu olulodwa @keyframes kulo naluphi na ulwalathiso lwesilayidi ngokutshintsha i --kf-slide-ukusuka kwipropati yesiko: .ibar esecaleni { oopopayi: kf-slide-in 0.3s lula-ngaphandle; /* Sebenzisa ixabiso elimiselweyo: izilayidi ukusuka ekhohlo */ }
.isaziso { oopopayi: kf-slide-in 0.4s lula-ngaphandle; --kf-slide-ukusuka: 0 -50px; /* isilayidi ukusuka phezulu */ }
.imodeli { oopopayi: kf-fade-ku-0.5s, kf-isilayidi-kwi-0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-ukusuka: 50px 50px; /* isilayidi ukusuka ezantsi-ekunene */ }
Le ndlela isinika ukuguquguquka okumangalisayo ngelixa sigcina ukuhambelana. Isibhengezo seframe engundoqo, amathuba angenasiphelo. Jonga iPen Keyframes Tokens-Demo 3 [ifolokhwe] ngu-Amit Sheen. Kwaye ukuba sifuna ukwenza oopopayi bethu babe bhetyebhetye ngakumbi, sivumela iziphumo “zesilayidi-ngaphandle” ngokunjalo, singakwaziYongeza ngokulula i --kf-slide-kwipropati yesiko, efanayo naleyo siza kuyibona kwicandelo elilandelayo. Iifreyimu ezingundoqo zokuSondeza kwi-Bidirectional Olunye upopayi oluxhaphakileyo oluphindwaphindwa kuzo zonke iiprojekthi ziziphumo “zoom”. Nokuba sisikali esichuliweyo semiyalezo yethosti, ukondezwa okukhulu kweemodyuli, okanye isiphumo esithambileyo sokwehlisa izihloko, oopopayi basondeze kuyo yonke indawo. Endaweni yokwenza izakhelo ezingundoqo ezahlukeneyo kwixabiso lesikali ngasinye, masakhe iseti enye ebhetyebhetye ye-kf-zoom keyframes:
/* * Sondeza - oopopayi besikali * Sebenzisa --kf-zoom-ukusuka kunye --kf-zoom-ukuya ukulawula amaxabiso esikali * Ukuhlala kukho: ukusondeza ukusuka kwi-80% ukuya kwi-100% (0.8 ukuya ku-1) * Ukusetyenziswa: * oopopayi: kf-zoom 0.2s lula-ngaphandle; * --kf-zoom-ukusuka: 0.5; --kf-zoom-ukuya: 1; // sondeza ukusuka kwi-50% ukuya kwi-100% * --kf-zoom-ukusuka: 1; --kf-zoom-ukuya: 0; // sondeza ukusuka kwi-100% ukuya kwi-0% * --kf-zoom-ukusuka: 1; --kf-zoom-ukuya: 1.1; // sondeza ukusuka kwi-100% ukuya kwi-110% */
@keyframes kf-zoom { ukusuka { isikali: var(--kf-zoom-ukusuka, 0.8); } ukuya { isikali: var(--kf-zoom-to, 1); } }
Ngengcaciso enye, sinokufezekisa nayiphi na i-zoom eyahlukileyo esiyifunayo: .ithosi { oopopayi: kf-isilayidi-ku-0.2s, kf-zoom 0.4s lula-ngaphandle; --kf-slide-ukusuka: 0 100%; /* isilayidi ukusuka phezulu */ /* Sebenzisa ukusondeza okungagqibekanga: izikali ukusuka kwi-80% ukuya kwi-100% */ }
.imodeli { oopopayi: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-ukusuka: 0; /* ukusondeza okumangalisayo ukusuka kwi-0% ukuya kwi-100% */ }
.isihloko { oopopayi: kf-fade-in 2s, kf-zoom 2s lula-ngaphakathi; --kf-zoom-ukusuka: 1.2; --kf-zoom-ukuya: 0.8; /* ukuthoba kancinci */ }
Ukungagqibeki kwe-0.8 (80%) kusebenza ngokugqibeleleyo kwizinto ezininzi ze-UI, njengemiyalezo ye-toast kunye namakhadi, ngelixa kulula ukwenza iimeko ezizodwa. Jonga i-Pen Keyframes Tokens-Idemo yesi-4 [ifolokhwe] ngu-Amit Sheen. Usenokuba uqaphele into enomdla kwimizekelo yamva nje: besidibanisa oopopayi. Enye yeenzuzo eziphambili zokusebenza kunye @keyframes amathokheni kukuba yenzelwe ukudibanisa ngaphandle komthungo omnye komnye. Le ndlela igudileyo yenziwe ngabom, ayizenzekelanga. Siza kuxoxa ngokwenziwa koopopayi ngokweenkcukacha ezithe vetshe kamva, kubandakanywa apho banokuba yingxaki khona, kodwa uninzi lwendibaniselwano zichanekile kwaye kulula ukuziphumeza. Qaphela: Ngelixa ndibhala eli nqaku, kwaye mhlawumbi ngenxa yokulibhala, ndiye ndazifumana ndiphinda ndicinga ngayo yonke imbono yokungena oopopayi. Ngayo yonke inkqubela phambili yamva nje kwi-CSS, ngaba sisayifuna kwaphela? Ngethamsanqa, uAdam Argyle uphonononge imibuzo efanayo kwaye wayichaza ngobuchule kwibhlog yakhe. Oku akuchasananga noku kubhaliweyo apha, kodwa kubonisa indlela ekufanele iqwalaselwe, ngakumbi ukuba iiprojekthi zakho zithembele kakhulu kwimifanekiso eshukumayo yokungena. Oopopayi abaqhubekayo Ngelixa oopopayi bokungeniswa, njengokuthi “fade”, “slide”, “zoom” zisenzeka kube kanye emva koko zime, oopopayi abaqhubekayo bahamba ngokungenasiphelo ukutsalela ingqalelo okanye ukubonisa umsebenzi oqhubekayo. Iipopayi ezimbini eziqhelekileyo eziqhelekileyo endidibana nazo "zi-spin" (kwizalathi zokulayisha) kunye "ne-pulse" (yokuqaqambisa izinto ezibalulekileyo). Ezi oopopayi zinika imingeni ekhethekileyo xa kufikwa ekudaleni iithokheni ze-keyframes. Ngokungafaniyo neepopayi zokungena ezidla ngokuhamba ukusuka kwelinye ilizwe ukuya kwelinye, oopopayi abaqhubekayo kufuneka benziwe ngokwezifiso kakhulu kwiipatheni zabo zokuziphatha. UGqirha weSpin Yonke iprojekthi ibonakala isebenzisa oopopayi abaninzi. Abanye bajikeleza ngasekunene, abanye bajika ngasekunene. Abanye benza ujikelezo olulodwa lwe-360-degree, abanye benza ujiko oluphindaphindiweyo ngesiphumo esikhawulezayo. Esikhundleni sokwenza amaqhosha ahlukeneyo ahlukeneyo kuguquko ngalunye, masakhe enye i-spin eguquguqukayo ephethe zonke iimeko:
/* * Spin - oopopayi abajikelezayo * Sebenzisa --kf-spin-ukusuka kunye --kf-spin-ukuya ukulawula uluhlu lokujikeleza * Sebenzisa --kf-spin-turns ukulawula isixa sojikelezo * Ukuhlala kukho: ijikeleza ukusuka kwi-0deg ukuya kwi-360deg (ukujikeleza oku-1 okupheleleyo) * Ukusetyenziswa: * oopopayi: kf-spin 1s linear engapheliyo; * --kf-spin-turn: 2; // 2 ukujikeleza okupheleleyo * --kf-spin-ukusuka: 0deg; --kf-spin-ukuya: 180deg; // ukujikeleza kwesiqingatha * --kf-spin-ukusuka: 0deg; --kf-spin-ukuya: -360deg; // ngokuchasene newotshi */
@keyframes kf-spin { ukusuka { jikelezisa: var(--kf-spin-ukusuka, 0deg); } ukuya { jikelezisa: calc(var(--kf-spin-ukusuka, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Ngoku sinokwenza nayiphi na i-spin eyahlukileyo esiyithandayo:
.iyalayisha-isipina { oopopayi: kf-spin 1s linear infinite; /* Isebenzisa ukungagqibeki: ijikeleza ukusuka kwi-0deg ukuya kwi-360deg */ }
.umlayishi okhawulezayo { oopopayi: kf-spin 1.2s lula-ngaphakathi-ngaphandle enye engenasiphelo; --kf-spin-turn: 3; /* 3 ujikelezo olupheleleyo kwicala ngalinye kumjikelo ngamnye*/ }
.inyathelwe-umva { oopopayi: kf-spin 1.5s amanyathelo(8) angenasiphelo; --kf-spin-ukuya: -360deg; /* ngokuchasene newotshi */ }
.ukuzulazula okufihlakeleyo { oopopayi: kf-spin 2s lula-in-out infinite alternate; --kf-spin-ukusuka: -16deg; --kf-spin-ukuya: 32deg; /* wiggle 36 deg: phakathi -18deg kunye +18deg */ }
Jonga i-Pen Keyframes Tokens-Demo 5 [ifolokhwe] ngu-Amit Sheen. Ubuhle bale ndlela kukuba ama-keyframes afanayo asebenza kukulayisha ii-spinners, ii-icon ezijikelezayo, iziphumo ze-wiggle, kunye neepopayi eziguqukayo ezintsonkothileyo. I-Pulse Paradox Imifanekiso eshukumayo ye-Pulse inamaqhinga ngakumbi kuba “inokubetha” iipropathi ezahlukeneyo. Abanye bacofa isikali, abanye bacofa i-opacity, kunye nezinye iipropathi zemibala yepulse njengokukhanya okanye ukugcwala. Kunokuba sidale izakhelo ezingundoqo ezahlukeneyo zepropati nganye, singenza ii-keyframes ezisebenza nayo nayiphi na ipropati ye-CSS. Nanku umzekelo wesandi esingundoqo se-pulse esinesikali kunye nokhetho lokungafihli:
/* * I-Pulse- pulsing animation * Sebenzisa --kf-pulse-scale-ukusuka kunye --kf-pulse-scale-kuya ukulawula uluhlu lwesikali * Sebenzisa --kf-pulse-opacity-ukusuka kunye --kf-pulse-opacity-ukuya ukulawula uluhlu lweopacity * Ukuhlala kukho: akukho pulse (onke amaxabiso 1) * Ukusetyenziswa: * oopopayi: kf-pulse 2s lula-in-out infinite alternate; * --kf-pulse-scale-ukusuka: 0.95; --kf-pulse-scale-to: 1.05; // ukubetha kwesantya * --kf-pulse-opacity-ukusuka: 0.7; --kf-pulse-opacity-ukuya: 1; // i-opacity pulse */
@keyframes kf-pulse { ukusuka { isikali: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ukuya { isikali: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Oku kudala i-pulse eguquguqukayo enokuthi iphilise iipropathi ezininzi: .ubizo-esenzweni { oopopayi: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-ukusuka: 0.5; /* i-opacity pulse */ }
.ichaphaza-isaziso { oopopayi: kf-pulse 0.6s lula-in-out infinite alternate; --kf-pulse-scale-ukusuka: 0.9; --kf-pulse-scale-to: 1.1; /* isikali sokubetha kwentliziyo */ }
.ugqatso lokubhaliweyo { oopopayi: kf-pulse 1.5s ukukhululeka-ngaphandle okungapheliyo; --kf-pulse-scale-ukusuka: 0.8; --kf-pulse-opacity-ukusuka: 0.2; /* isikali kunye ne-opacity pulse */ }
Jonga i-Pen Keyframes Tokens-Idemo yesi-6 [ifolokhwe] ngu-Amit Sheen. Esi sitshixo se-kf-pulse sinokuphatha yonke into ukusuka kwingqwalasela efihlakeleyo ukuya kumanqaku aphezulu, lonke ngelixa kulula ukwenza ngokwezifiso. Ukulula okuPhezulu Enye yezinto ezintle malunga nokusebenzisa iithokheni zeeframes ezingundoqo yindlela ekulula ngayo ukwandisa ilayibrari yethu yoopopayi kunye nokubonelela ngeziphumo uninzi lwabaphuhlisi abangenakuzihlupha ngokuzibhala ukusuka ekuqaleni, njengeelastiki okanye ukugqabhuka. Nanku umzekelo we "bounce" ithokheni yamagama angundoqo esebenzisa i --kf-bounce-ukusuka kwipropathi yesiko ukulawula umphakamo wokutsiba. /* * Bounce - oopopayi bokugxumeka ekungeneni * Sebenzisa --kf-bounce-ukusuka ukulawula umphakamo wokutsiba * Ukuhlala kukho: tsiba ukusuka kwi-100vh (ngaphandle kwesikrini) * Ukusetyenziswa: * oopopayi: kf-bounce 3s lula-ngaphakathi; * --kf-bounce-ukusuka: 200px; // tsiba ukusuka kwi-200px ukuphakama */
@keyframes kf-bounce { 0% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { guqulela: 0 0; oopopayi-ixesha-umsebenzi: ukukhululeka; } }
Oopopayi abafana ne "elastic" baqina kancinci ngenxa yokubala ngaphakathi kwikeyframes. Kufuneka sichaze --kf-elastic-ukusuka-X kunye --kf-elastic-ukusuka-Y ngokwahlukeneyo (zombini azikhethi), kwaye kunye zisenza sidale umnyango olastiki ukusuka kuyo nayiphi na indawo kwikhusi.
/* * Elastiki Ngaphakathi-elastiki yokungena oopopayi * Sebenzisa --kf-elastic-ukusuka-X kunye --kf-elastic-ukusuka-Y ukulawula indawo yokuqala * Ukuhlala kukho: ingena kwiziko eliphezulu (0, -100vh) * Ukusetyenziswa: * oopopayi: kf-elastic-in 2s lula-ngaphakathi-ngaphandle zombini; * --kf-elastic-ukusuka-X: -50px; * --kf-elastic-ukusuka-Y: -200px; // ngenisa ukusuka (-50px, -200px) */
@keyframes kf-elastic-in { 0% { translate: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-ukusuka-Y, 0px) * 0.1312); }
44% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { guqulela: 0 0; } }
Le ndlela yokwenza kube lula ukuphinda usebenzise kwaye wenze ngokwezifiso izakhelo eziphambili ezingundoqo kuyo yonke iprojekthi yethu, ngokutshintsha nje ipropathi yesiko elinye.
.gxumeka-kwaye-zoom { oopopayi: kf-bounce 3s lula-ngaphakathi, kf-zoom 3s kumgca; --kf-zoom-ukusuka: 0; }
.gxumeka-kunye-isilayidi { oopopayi-uqulunqo: yongeza; /* Zombini oopopayi zisebenzisa ukuguqulela */ oopopayi: kf-bounce 3s lula-ngaphakathi, kf-slide-in 3s ukukhululeka-ngaphandle; --kf-slide-ukusuka: -200px; }
.elastic-ngaphakathi { oopopayi: kf-elastic-in 2s lula-ngaphakathi-ngaphandle zombini; }
Jonga iPen Keyframes Tokens-Demo 7 [ifolokhwe] ngu-Amit Sheen. Ukuza kuthi ga kweli nqanaba, sibonile ukuba singadibanisa njani amaqhosha angundoqo ngendlela ekrelekrele nesebenzayo. Ewe kunjalo, unokufuna ukulungisa izinto ukuze zilungele iimfuno zeprojekthi yakho, kodwa sigubungele imizekelo yeepopayi ezininzi eziqhelekileyo kunye neemeko zokusetyenziswa kwemihla ngemihla. Kwaye ngezi tokens zeframes eziphambili zisendaweni, ngoku sineebhloko zokwakha ezinamandla zokudala okungaguquguqukiyo, oopopayi abagcinekayo kuyo yonke iprojekthi. Akusekho ziphindwaphindwa zamagama angundoqo, akusekho ngquzulwano lomhlaba jikelele. Indlela nje ecocekileyo, efanelekileyo yokuphatha zonke iimfuno zethu zoopopayi. Kodwa owona mbuzo ngulo: Sizibumba njani ezi zitena zokwakha kunye? Ukuhlanganisa Konke Siye sabona ukuba ukudibanisa iithokheni ezisisiseko ze-keyframes zilula. Asifuni nto ikhethekileyo kodwa ukuchaza oopopayi bokuqala, chaza eyesibini, seta izinto eziguquguqukayo njengoko zifuneka, yiyo loo nto. /* Bulala kwi + isilayidi kwi */ .ithosi { oopopayi: kf-fade-ku-0.4s, kf-isilayidi-kwi-0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-ukusuka: 0 40px; }
/* Sondeza + ncipha */ .imodeli { oopopayi: kf-fade-ku-0.3s, kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-ukusuka: 0.7; --kf-zoom-ukuya: 1; }
/* Slayida kwi + pulse */ .isaziso { oopopayi: kf-slide-ku-0.5s, i-kf-pulse 1.2s ukukhululeka-ngaphakathi-ngaphandle okutshintshisanayo; --kf-slide-ukusuka: -100px 0; --kf-pulse-scale-ukusuka: 0.95; --kf-pulse-scale-to: 1.05; }
Ezi ndibaniselwano zisebenza kakuhle ngenxa yokuba i-animation nganye ijolise kwipropati eyahlukileyo: i-opacity, inguqu (guqulela / isikali), njl. Xa oopopayi ababini bezama ukuphilisa ipropathi efanayo-umzekelo, zombini isikali sophiliso okanye zombini i-opacity ephilayo-isiphumo asiyi kuba yile uyilindeleyo. Ngokungagqibekanga, inye kuphela yoopopayi esetyenziswayo kuloo mpahla, eyeyokugqibela kuluhlu lopopayi. Lo ngumda wendlela iCSS ephatha ngayo oopopayi abaninzi kwipropati enye. Umzekelo, oku akuzukusebenza njengoko bekucetyiwe kuba kuphela uphiliso lwe-kf-pulse oluya kusebenza. .i-bad-combo { oopopayi: kf-sondeza 0.5s phambili, kf-pulse 1.2s infinite alternate; --kf-zoom-ukusuka: 0.5; --kf-zoom-ukuya: 1.2; --kf-pulse-scale-ukusuka: 0.8; --kf-pulse-scale-to: 1.1; }
Oopopayi Ukongeza Eyona ndlela ilula nethe ngqo yokuphatha oopopayi abaninzi abachaphazela ipropathi efanayo kukusebenzisa ipropathi yokwakheka kopopayi. Kumzekelo wokugqibela ongentla, uphiliso lwe-kf-pulse luthatha indawo yopopayi ye-kf-zoom, ngoko ke asizukubona ukuzulisa kokuqala kwaye asizukufumana isikali esilindelekileyo ukuya kwi-1.2. Ngokuseta i-animation-composition ukuba yongeze, sixelela isikhangeli ukuba sidibanise zombini oopopayi. Oku kusinika isiphumo esisifunayo. .icandelo-ezimbini { oopopayi-uqulunqo: yongeza; }
Jonga i-Pen Keyframes Tokens-Demo 8 [ifolokhwe] ngu-Amit Sheen. Le ndlela isebenza kakuhle kwiimeko ezininzi apho sifuna ukudibanisa iziphumo kwipropati efanayo. Ikwaluncedo xa sifuna ukudibanisa oopopayi kunye namaxabiso epropathi engatshintshiyo. Umzekelo, ukuba sinesiqalelo esisebenzisa ipropathi yoguqulo ukuyimisa ngqo apho sifuna khona, kwaye emva koko sifuna ukuyiphilisa nge-kf-slide-in izakhelo ezingundoqo, sifumana umtsi ombi obonakalayo ngaphandle ko-animation-uqulunqo. Jonga i-Pen Keyframes Tokens-Demo 9 [ifolokhwe] ngu-Amit Sheen. Ngoopopayi-uqulunqo olusetiyo ukongeza, oopopayi zidityaniswe kakuhle nekhoyoguqula, ke isiqalelo sihlala sisendaweni kwaye siphile njengoko kulindelekile. Oopopayi bayagxadazela Enye indlela yokuphatha oopopayi abaninzi “kukugxadazela”- oko kukuthi, ukuqala oopopayi besibini kancinane emva kokuba eyokuqala igqibile. Ayisosisombululo esisebenza kuyo yonke imeko, kodwa iluncedo xa sinopopayi wokungena olandelwa ngupopayi oqhubekayo. /* phelelwa ku + i-opacity pulse */ .isaziso { oopopayi: kf-fade-in 2s lula-out, kf-pulse 0.5s 2s lula-in-out infinite alternate; --kf-pulse-opacity-ukuya: 0.5; }
Jonga i-Pen Keyframes Tokens-Idemo ye-10 [ifolokhwe] ngu-Amit Sheen. Umyalelo weMiba Inxalenye enkulu yoopopayi esisebenza nabo basebenzisa ipropathi yokuguqula. Kwiimeko ezininzi, oku kulula ngakumbi. Ikwanayo nenzuzo yokusebenza njengoko oopopayi benguqu banokukhawuleziswa yi-GPU. Kodwa ukuba sisebenzisa iinguqu, kufuneka siyamkele into yokuba indlela esenza ngayo iinguqu zethu ibalulekile. Kakhulu. Kumagama ethu angundoqo ukuza kuthi ga ngoku, sisebenzise utshintsho lomntu ngamnye. Ngokweenkcazo, ezi zihlala zisetyenziswa ngokulandelelana okumiselweyo: okokuqala, i-elementi iguqulelwa, emva koko ijikeleze, emva koko isikali. Oku kunengqiqo kwaye yinto uninzi lwethu oluyilindeleyo. Nangona kunjalo, ukuba sisebenzisa ipropathi yokuguqula, ulandelelwano apho imisebenzi ibhalwe khona yindlela esetyenziswa ngayo. Kule meko, ukuba sihambisa into ngeepixels ezili-100 kwi-X-axis kwaye emva koko siyijikeze ngama-45 degrees, ayifani nokuqala ukuyijikelezisa ngama-45 degrees kwaye emva koko iyihambise i-100 pixels. /* Isikwere esipinki: Qala uguqulele, emva koko ujikelezise */ .umzekelo-enye { guqula: translateX(100px) jikelezisa(45deg); }
/* Isikwere esiluhlaza: Okokuqala jikelisa, uze uguqulele */ .umzekelo-ezimbini { guqula: jikelisa(45deg) translateX(100px); }
Jonga iPen Keyframes Tokens-Demo 11 [ifolokhwe] ngu-Amit Sheen. Kodwa ngokomyalelo wenguqu, wonke umntu uguqula - yonke into esiyisebenzisileyo kwiithokheni ze-keyframes - yenzeka ngaphambi kokuba imisebenzi yokuguqula. Oko kuthetha ukuba nantoni na oyisetayo kwipropathi yenguqu iyakwenzeka emva koopopayi. Kodwa ukuba uyacwangcisa, umzekelo, guqulela kunye ne kf-spin amagama angundoqo, uguqulo luyakwenzeka phambi kophiliso. Ubhidekile kengoku?! Oku kukhokelela kwiimeko apho amaxabiso angatshintshiyo anokubangela iziphumo ezahlukeneyo zoopopayi, njengale meko ilandelayo:
/* Oopopayi abaqhelekileyo kuzo zombini izijikelezi */ .ispina { oopopayi: kf-spin 1s linear infinite; }
/* Pinki spinner: guqulela phambi kokujikeleza (utshintsho lomntu ngamnye) */ .spinner-pinki { guqulela: 100% 50%; }
/* Ispina eluhlaza: jikelisa emva koko uguqulele (ulandelelwano lomsebenzi) */ .spinner-green { guqula: guqulela (100%, 50%); }
Jonga iPen Keyframes Tokens-Demo 12 [ifolokhwe] ngu-Amit Sheen. Uyabona ukuba i-spinner yokuqala (epinki) ifumana uguqulo olwenzeka phambi kojikelo lwe-kf-spin, ngoko ke iqala ishukume iye kwindawo yayo ize ijikelezise. Ispinner yesibini (eluhlaza) ifumana i-translate() umsebenzi owenzeka emva kotshintsho lomntu, ngoko into yokuqala ijikelezisa, emva koko ishukume ngokunxulumene ne-engile yayo yangoku, kwaye sifumana loo mpembelelo ye-orbit ebanzi. Hayi, oku akuyongxaki. Yenye yezo zinto kufuneka sizazi malunga neCSS kwaye sizigcine engqondweni xa sisebenza ngoopopayi abaninzi okanye iinguqu ezininzi. Ukuba kuyimfuneko, ungenza kwakhona iseti eyongezelelweyo ye kf-spin-alt izakhelo ezingundoqo ezijikelezisa iziqalelo usebenzisa jikezo() umsebenzi. Intshukumo eNcitshisiweyo Kwaye ngelixa sithetha ngamanye amagama angundoqo, asinako ukungayihoyi inketho ethi "akukho mifanekiso". Enye yeenzuzo ezinkulu zokusebenzisa iithokheni zeeframes kukuba ukufikelela kunokubhaka ngaphakathi, kwaye eneneni kulula kakhulu ukuyenza. Ngokuyila ii-keyframes zethu ngokufikeleleka engqondweni, sinokuqinisekisa ukuba abasebenzisi abakhetha intshukumo encitshisiweyo bafumana amava alula, angenasiphazamisi, ngaphandle komsebenzi owongezelelweyo okanye ukuphindaphinda ikhowudi. Eyona ntsingiselo ye "Intshukumo eNcitshisiweyo" inokutshintsha kancinci ukusuka komnye upopayi ukuya kwenye, kwaye ukusuka kwiprojekthi ukuya kwiprojekthi, kodwa nanga amanqaku ambalwa okufuneka uwagcine engqondweni: Ukuthulisa izakhelo ezingundoqo Ngelixa ezinye oopopayi zinokuthanjiswa okanye zicuthwe, kukho ezinye ekufuneka zinyamalale ngokupheleleyo xa kucetywa isindululo esincitshisiweyo. Imifanekiso ye-Pulse ngumzekelo omhle. Ukuqinisekisa ukuba ezi oopopayi azisebenzi kwimowudi yentshukumo encitshisiweyo, singazisonga ngokulula kumbuzo wemidiya efanelekileyo.
@media (ikhetha-incitshisiwe-intshukumo: akukho-kukhetha) { @keyfrmaes kf-pulse { ukusuka { isikali: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ukuya { isikali: var(--kf-pulse-scale-to, 1); ukukhanya:var(--kf-pulse-opacity-to, 1); } } }
Oku kuqinisekisa ukuba abasebenzisi abamisele i- prefers-reduced-motion ukunciphisa abayi kubona i-animation kwaye baya kufumana amava ahambelana nokukhetha kwabo. Instant In Kukho amanye amagama angundoqo esingenako ukuwasusa ngokulula, afana neepopayi zokungena. Ixabiso kufuneka litshintshe, liphile; ngenye indlela, isiqalelo asiyi kuba namaxabiso achanekileyo. Kodwa kwintshukumo encitshisiweyo, olu tshintsho ukusuka kwixabiso lokuqala kufuneka lube kwangoko. Ukufezekisa oku, siza kuchaza iseti eyongezelelweyo yamagama angundoqo apho ixabiso litsibela ngoko nangoko ukuya ekupheleni. Ezi ziba zizitshixo zethu ezingagqibekanga. Emva koko, siya kongeza i-keyframes eqhelekileyo ngaphakathi kombuzo wemidiya ngokukhetha-ukuncitshiswa-ukunyuswa kweseti yokungakhethi, njengakumzekelo wangaphambili. /* ngena ngoko nangoko ukwenzela ukunciphisa intshukumo */ @keyframes kf-zoom { ukusuka, ukuya { isikali: var(--kf-zoom-to, 1); } }
@media (ikhetha-incitshisiwe-intshukumo: akukho-kukhetha) { /* Izakhelo ezingundoqo zokwandiswa koqobo */ @keyframes kf-zoom { ukusuka { isikali: var(--kf-zoom-ukusuka, 0.8); } ukuya { isikali: var(--kf-zoom-to, 1); } } }
Ngale ndlela, abasebenzisi abakhetha intshukumo encitshisiweyo baya kubona into ibonakala kwangoko kwimeko yayo yokugqibela, ngelixa wonke umntu efumana inguqu ephilayo. Indlela ethambileyo Kukho iimeko apho sifuna ukugcina intshukumo ethile, kodwa ithambile kwaye izolile kunopopayi wokuqala. Umzekelo, singatshintsha indawo yokungena ebounce nge-fade-in ethambileyo.
@keyframes kf-bounce { /* Ukucima okuthambileyo kwintshukumo encitshisiweyo */ }
@media (ikhetha-incitshisiwe-intshukumo: akukho-kukhetha) { @keyframes kf-bounce { /* Izakhelo ezingundoqo zokugqabhuza */ } }
Ngoku, abasebenzisi abanentshukumo encitshisiweyo enikwe amandla basafumana imbonakalo yenkangeleko, kodwa ngaphandle kwentshukumo ebukhali yokugxuma okanye upopayi olulastiki. Ngeebhloko zokwakha ezikhoyo, umbuzo olandelayo ngowokwenza ukuba ube yinxalenye yendlela yokusebenza. Ukubhala iiframes eziziintloko eziguquguqukayo yinto enye, kodwa ukuzenza zithembeke kuyo yonke iprojekthi enkulu kufuna amacebo ambalwa ekufuneka ndiwafunde kabuhlungu. IiNdlela zokuSebenza kunye neZenzo eziGqwesileyo Nje ukuba sibe nethala leencwadi eliqinileyo lamathokheni ee-keyframes, owona mceli mngeni yindlela yokuzizisa kumsebenzi wemihla ngemihla.
Isilingo kukulahla zonke iiframes ezingundoqo ngaxeshanye kwaye ubhengeze ingxaki esonjululwe, kodwa ekusebenzeni ndifumanise ukuba ezona ziphumo zintle zivela kukwamkelwa kancinci kancinci. Qala ngoopopayi abaxhaphakileyo, njengokufiphala okanye isilayidi. Ezi ziloyiso ezilula ezibonisa ixabiso elikhawulezayo ngaphandle kokufuna ukubhalwa kwakhona okukhulu. Ukuthiywa yenye ingongoma efuna ingqalelo. Isimaphambili esingaguqukiyo okanye isithuba segama senza ukuba kucace ukuba zeziphi iipopayi eziyimiqondiso kwaye zeziphi ezingoowodwa basekuhlaleni. Ikwanqanda ukungqubana ngengozi kwaye inceda amalungu eqela amatsha aqaphele inkqubo ekwabelwana ngayo ngokujonga nje. Uxwebhu lubaluleke kakhulu njengekhowudi ngokwayo. Namagqabantshintshi amafutshane ngaphezulu kwethokheni nganye yezitshixo inokugcina iiyure zokuqikelela kamva. Umphuhlisi kufuneka akwazi ukuvula ifayile yeempawu, ahlolisise umphumo abawudingayo, kwaye akhuphele ipateni yosetyenziso ngqo kwicandelo labo. Ukuba bhetyebhetye kuko okwenza le ndlela iwufanele umgudu. Ngokuveza iipropati zesiko elisengqiqweni, sinika amaqela igumbi lokuziqhelanisa noopopayi ngaphandle kokwaphula inkqubo. Kwangaxeshanye, zama ukungabaxabanisi. Nika amaqhina abalulekileyo kwaye ugcine abanye benoluvo. Okokugqibela, khumbula ukufikeleleka. Ayizizo zonke oopopayi ezifuna enye intshukumo encitshisiweyo, kodwa uninzi luyayenza. Ukubhaka kolu hlengahlengiso kwangethuba kuthetha ukuba akusayi kuphinda kufuneke sizibuyisele emva kwexesha, kwaye kubonisa inqanaba lenkathalo abaya kuthi abasebenzisi bayiqaphele nokuba abakhe bayikhankanye.
Kumava am, ukuphatha amathokheni ee-keyframes njengenxalenye yoyilo lwethu lokuhamba kweethokheni yeyona nto ibenza babambelele. Xa sele bekhona, bayeka ukuziva njengeempembelelo ezizodwa kwaye babe yinxalenye yolwimi loyilo, ukwandiswa kwendalo kwindlela imveliso ehamba ngayo kwaye iphendule ngayo. Ukusonga Imifanekiso eshukumayo inokuba yenye yezona ndawo zonwabileyo zonxibelelwano lwesakhiwo, kodwa ngaphandle kolwakhiwo, zinokuba ngomnye weyona mithombo mikhulu yonxunguphalo. Ngokuphatha ama-keyframes njengamathokheni, uthatha into ehlala ingcolile kwaye inzima ukuyilawula kwaye uyiguqule ibe yinkqubo ecacileyo, eqikelelwayo. Ixabiso lokwenyani alikho nje ekugcineni imigca embalwa yekhowudi. Kukukuzithemba ukuba xa usebenzisa i-fade, isilayidi, i-zoom, okanye i-spin, uyazi kakuhle ukuba iya kuziphatha njani kwiprojekthi yonke. Kukuguquguquka okuvela kwiipropati eziqhelekileyo ngaphandle kwesiphithiphithi seenguqu ezingapheliyo. Kwaye kufikeleleko olwakhiwe kwisiseko kunokuba kongezwe njengeingcamango. Ndizibonile ezi ngcamango zisebenza kumaqela ahlukeneyo kunye ne-codebases ezahlukeneyo, kwaye iphethini ihlala ifana. Emva kokuba amathokheni ekhona, ii-keyframes ziyeke ukuba yingqokelela ehlakazekileyo yamaqhinga kwaye ibe yinxalenye yolwimi loyilo. Benza ukuba imveliso uzive unenjongo ngakumbi, ungaguquguquki, kwaye uphila ngakumbi. Ukuba uthatha into enye kweli nqaku, mayibe yile: oopopayi bafanelwe yinkathalo efanayo kunye nolwakhiwo esele silunika imibala, ukuchwetheza, kunye nezithuba. Utyalo-mali oluncinci kwiithokheni ze-keyframes zihlawula rhoqo xa ujongano lwakho luhamba.
