Hoton wannan: kun shiga sabon aiki, nutse cikin codebase, kuma a cikin 'yan sa'o'i na farko, kun gano wani abu mai ban takaici. An warwatse ko'ina cikin zane-zane, kuna samun ma'anar @keyframes da yawa don raye-raye na asali iri ɗaya. Daban-daban na fade-in daban-daban guda uku, bambance-bambancen faifai biyu ko uku, ɗimbin raye-rayen zuƙowa, da aƙalla raye-raye daban-daban guda biyu saboda, da kyau, me yasa? @keyframes bugun jini { daga { sikelin: 1; } zuwa { sikelin: 1.1; } }
@keyframes babba-bugu { 0%, 20%, 100% { sikelin: 1; } 10%, 40% { sikelin: 1.2; } }
Idan wannan yanayin ya zama sananne, ba kai kaɗai ba. A cikin gwaninta na akan ayyuka daban-daban, ɗayan mafi daidaiton nasara cikin sauri da zan iya bayarwa shine haɓakawa da daidaita maɓalli. Ya zama abin dogaro sosai wanda yanzu ina sa ran wannan tsaftacewa a matsayin ɗaya daga cikin ayyukana na farko akan kowane sabon codebase. Hankalin Da Yake Bayan Hargitsi Wannan sakewa yana da cikakkiyar ma'ana lokacin da kuke tunani akai. Dukanmu muna amfani da raye-raye iri ɗaya a cikin ayyukanmu na yau da kullun: fades, nunin faifai, zuƙowa, juyi, da sauran tasirin gama gari. Waɗannan raye-rayen suna da kyau kai tsaye, kuma yana da sauƙi don busa ma'anar @keyframes mai sauri don samun aikin. Ba tare da tsarin raye-raye na tsakiya ba, masu haɓakawa a zahiri suna rubuta waɗannan maɓallan maɓalli daga karce, ba tare da sanin cewa irin wannan raye-rayen sun riga sun wanzu a wani wuri a cikin codebase. Wannan ya zama ruwan dare gama gari lokacin aiki a cikin gine-gine na tushen (wanda yawancin mu ke yin kwanakin nan), kamar yadda ƙungiyoyi sukan yi aiki iri ɗaya a sassa daban-daban na aikace-aikacen. Sakamakon? Hargitsi na raye-raye. Karamar Matsala Abubuwan da suka fi fitowa fili tare da kwafin maɓalli sune ɓata lokacin haɓakawa da kumburin lambar da ba dole ba. Ma'anar firam ɗin maɓalli da yawa suna nufin wurare da yawa don ɗaukakawa lokacin da buƙatu suka canza. Kuna buƙatar daidaita lokacin fade animation ɗinku? Kuna buƙatar farautar kowane misali a kan lambar lambar ku. Kuna son daidaita ayyukan sauƙaƙewa? Sa'a mai kyau gano duk bambancin. Wannan yawaitar wuraren kiyayewa yana sa ko da sauƙin sabunta motsin rai aiki mai cin lokaci. Babbar Matsala Wannan kwafin maɓalli na maɓalli yana haifar da matsala mafi banƙyama da ke ɓoye a ƙasa: tarkon iyakar duniya. Ko da a lokacin aiki tare da tushen gine-gine, CSS maɓallan maɓalli koyaushe ana bayyana su a cikin iyakokin duniya. Wannan yana nufin duk firam ɗin maɓalli sun shafi duk abubuwan haɗin gwiwa. Koyaushe. Ee, raye-rayen ku ba lallai ba ne su yi amfani da maɓallan maɓalli da kuka ayyana a cikin sashin ku. Yana amfani da firam ɗin maɓalli na ƙarshe waɗanda suka yi daidai da ainihin sunan da aka ɗora a cikin iyakokin duniya. Matukar duk firam ɗin ku iri ɗaya ne, wannan na iya zama kamar ƙaramin batu. Amma lokacin da kake son keɓance raye-raye don takamaiman yanayin amfani, kana cikin matsala, ko mafi muni, kai ne ke jawo su. Ko dai motsin motsin ku ba zai yi aiki ba saboda wani ɓangaren da aka ɗora bayan naku, sake rubuta maɓallan makullin ku, ko kuma kayan aikinku ya yi lodin ƙarshe kuma ba da gangan ya canza halayen raye-raye na kowane ɓangaren ta amfani da sunan maɓalli ba, kuma ƙila ba za ku gane ba. Ga misali mai sauƙi wanda ke nuna matsalar: .bangaren-daya { /* Salon sassa */ rayarwa: bugun jini 1s sauƙi-in-fita mara iyaka; }
/* wannan @keyframes ma'anar ba zai yi aiki ba */ @keyframes bugun jini { daga { sikelin: 1; } zuwa { sikelin: 1.1; } }
/* daga baya a cikin code...
.bangare-biyu { /* Salon sassa */ rayarwa: bugun jini 1s sauƙi-in-fita mara iyaka; }
/* wannan maɓalli na maɓalli za su yi amfani da sassan biyu */ @keyframes bugun jini { 0%, 20%, 100% { sikelin: 1; } 10%, 40% { sikelin: 1.2; } }
Dukansu sassan biyu suna amfani da sunan raye-raye iri ɗaya, amma ma'anar @keyframes na biyu ta sake rubuta na farko. Yanzu duka sassa-daya da bangaren-biyu za su yi amfani da firam ɗin maɓalli na biyu, ba tare da la’akari da wane ɓangaren da aka ayyana waɗanne firam ɗin maɓalli ba. Dubi Alamar Maɓalli na Pen - Demo 1 [mai yatsa] ta Amit Sheen. Mafi munin bangare? Wannan sau da yawa yana aiki daidai a cikin ci gaban gida amma yana karya a asirce a samarwa lokacin da tsarin gini ke canza tsarin loda na zanen ku. Kuna ƙarewa da raye-rayen da ke bambanta daban-daban dangane da abubuwan da aka ɗora kuma a cikin wane tsari. Magani: Haɗin Kan Maɓalli Amsar wannan hargitsi abu ne mai ban mamaki mai sauƙi: ƙayyadaddun fitattun maɓalli masu ƙarfi da aka adana a cikin takardar salon da aka raba. Maimakon barin kowane bangare ya ayyana abubuwan raye-rayen sa, muna ƙirƙira manyan maɓallan maɓalli waɗanda ke da rubuce-rubuce da kyau, masu sauƙin sarrafawa.amfani, mai iya kiyayewa, da kuma keɓance takamaiman bukatun aikin ku. Yi la'akari da shi azaman alamun maɓalli. Kamar yadda muke amfani da alamu don launuka da tazara, kuma da yawa daga cikinmu sun riga sun yi amfani da alamu don kaddarorin rayarwa, kamar tsawon lokaci da ayyuka masu sauƙi, me yasa ba za a yi amfani da alamu don maɓalli ba kuma? Wannan tsarin zai iya haɗawa ta dabi'a tare da kowane tsarin aikin alamar ƙira na yanzu da kuke amfani da shi, yayin da kuke warware matsalar ƙaramar (kwafin lambar) da babbar matsala (rikicin duniya) a tafi ɗaya. Manufar ita ce madaidaiciya: ƙirƙirar tushen gaskiya guda ɗaya don duk raye-rayen mu gama gari. Wannan rubutun salon da aka raba ya ƙunshi firam ɗin maɓalli da aka ƙera a hankali waɗanda ke rufe tsarin raye-rayen da aikinmu ke amfani da shi. Babu sauran zato ko fade rayarwa ya wanzu a wani wuri a cikin codebase. Babu sauran sake rubuta raye-raye na bazata daga wasu abubuwan da aka gyara. Amma ga mabuɗin: waɗannan ba raye-rayen kwafin-manna ba ne kawai. An ƙera su don su kasance masu ƙarfi da daidaitawa ta hanyar kaddarorin al'ada na CSS, suna ba mu damar kiyaye daidaito yayin da muke samun sassauci don daidaita abubuwan raye-raye zuwa takamaiman lokuta masu amfani, kamar idan kuna buƙatar ɗan ƙaramin motsi na "bugu" a wuri guda. Gina Alamar Maɓalli na Farko Ɗaya daga cikin ƙananan 'ya'yan itace na farko da ya kamata mu magance shi shine wasan kwaikwayo na "fade-in". A cikin ɗayan ayyukana na kwanan nan, na sami sama da dozin dozin daban-daban fade-in ma'anar, kuma a, duk sun kawai rikitar da rashin fahimta daga 0 zuwa 1. Don haka, bari mu ƙirƙiri sabon salo, kira shi kf-tokens.css, shigo da shi cikin aikinmu, kuma sanya firam ɗin mu tare da maganganun da suka dace a ciki. /* keyframes-tokens.css */
/* * Fade In - Fade ƙofar tashin hankali * Amfani: rayarwa: kf-fade-in 0.3s sauƙi-fita; */ @keyframes kf-fade-in { daga { bawul: 0; } zuwa { bawul: 1; } }
Wannan sanarwar @keyframes guda ɗaya ta maye gurbin duk waɗancan raye-rayen fade-in raye-raye a ko'ina cikin lambar mu. Tsaftace, mai sauƙi, kuma mai amfani a duniya. Kuma yanzu da aka bayyana wannan alamar, za mu iya amfani da shi daga kowane bangare a cikin aikinmu: .modal { rayarwa: kf-fade-in 0.3s sauƙi-fita; }
Tooltip { rayarwa: kf-fade-in 0.2s sauƙi-in-fitarwa; }
.sanarwa { rayarwa: kf-fade-in 0.5s sauƙi-fita; }
Dubi Alamar Maɓalli na Pen - Demo 2 [mai yatsa] ta Amit Sheen. Lura: Muna amfani da kf- prefix a cikin duk sunayen mu @keyframes. Wannan prefix ɗin yana aiki azaman filin suna wanda ke hana rikice-rikicen suna tare da raye-rayen da ke cikin aikin kuma ya bayyana nan da nan cewa waɗannan maɓallan maɓalli sun fito ne daga fayil ɗin alamun firam ɗin mu. Yin Slide Mai Daukaka Kf-fade-in keyframes suna aiki da kyau saboda yana da sauƙi kuma akwai ƙaramin ɗaki don lalata abubuwa. A cikin wasu raye-rayen, duk da haka, muna buƙatar ƙarin ƙarfi sosai, kuma a nan za mu iya yin amfani da babban ƙarfin kaddarorin al'ada na CSS. Wannan shine inda alamun maɓalli ke haskaka gaske idan aka kwatanta da tarwatsewar raye-rayen tsaye. Bari mu ɗauki yanayin gama-gari: raye-rayen “slide-in”. Amma zamewa daga ina? 100px daga dama? 50% daga hagu? Ya kamata ya shiga daga saman allon? Ko wataƙila kuna iyo daga ƙasa? Yiwuwa da yawa, amma maimakon ƙirƙirar keɓan maɓalli daban-daban don kowane shugabanci da kowane bambance-bambance, zamu iya gina alama mai sassauƙa guda ɗaya wanda ya dace da duk yanayin yanayi: /* * Slide In - raye-rayen nunin jagora * Yi amfani da --kf-slide-daga don sarrafa jagora * Default: nunin faifai daga hagu (-100%) * Amfani: * rayarwa: kf-slide-in 0.3s sauƙi-fita; * --kf-slide-daga: -100px 0; // zamewa daga hagu * --kf-slide-daga: 100px 0; // zamewa daga dama * --kf-slide-daga: 0 -50px; // zamewa daga sama */
@keyframes kf-slide-in { daga { fassara: var (--kf-slide-daga, -100% 0); } zuwa { fassara: 0 0; } }
Yanzu za mu iya amfani da wannan alamar @keyframes guda ɗaya don kowane jagorar zamewa ta hanyar canza --kf-slide-daga kayan al'ada: .sidebar { rayarwa: kf-slide-in 0.3s sauƙi-fita; /* Yana amfani da ƙimar tsoho: nunin faifai daga hagu */ }
.sanarwa { rayarwa: kf-slide-in 0.4s sauƙi-fita; --kf-slide-daga: 0 -50px; /* zamewa daga sama */ }
.modal { rayarwa: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-daga: 50px 50px; /* zamewa daga kasa-dama */ }
Wannan tsarin yana ba mu sassauci mai ban mamaki yayin kiyaye daidaito. Sanarwar maɓalli ɗaya, dama mara iyaka. Dubi Alamar Maɓallin Maɓalli na Pen - Demo 3 [mai yatsa] ta Amit Sheen. Kuma idan muna son sanya raye-rayen mu su zama masu sassauƙa, suna ba da damar tasirin “slide-out” suma, za mu iya.kawai ƙara --kf-slide-zuwa dukiya ta al'ada, kama da abin da za mu gani a sashe na gaba. Maɓallan Zuƙowa Bi-directional Wani raye-raye na gama gari wanda ke samun kwafi a cikin ayyukan shine tasirin "zuƙowa". Ko yana da dabarar ma'auni don saƙon toast, zuƙowa mai ban mamaki don ƙirar ƙira, ko tasiri mai sauƙi ga kanun labarai, raye-rayen zuƙowa suna ko'ina. Maimakon ƙirƙirar firam ɗin maɓalli daban don kowane ƙimar sikelin, bari mu gina saiti ɗaya mai sassauƙa na faifan maɓalli na kf-zuƙowa:
/* * Zuƙowa - raye-rayen sikelin * Yi amfani da --kf-zuƙowa-daga da --kf-zuƙowa-don sarrafa ƙimar sikeli * Default: zuƙowa daga 80% zuwa 100% (0.8 zuwa 1) * Amfani: * rayarwa: kf-zuƙowa 0.2s sauƙi-fita; * --kf-zuƙowa-daga: 0.5; --kf-zuwa-zuwa: 1; Zuƙowa daga 50% zuwa 100% * --kf-zuƙowa-daga: 1; --kf-zuwa-zuwa: 0; // zuƙowa daga 100% zuwa 0% * --kf-zuƙowa-daga: 1; --kf-zuƙowa-zuwa: 1.1; Zuƙowa daga 100% zuwa 110% */
@keyframes kf-zoom { daga { sikelin: var (--kf-zuƙowa-daga, 0.8); } zuwa { sikelin: var (--kf-zuƙowa-zuwa, 1); } }
Tare da ma'anar guda ɗaya, za mu iya cimma kowane bambancin zuƙowa da muke buƙata: .toast { rayarwa: kf-slide-in 0.2s, kf-zuƙowa 0.4s sauƙi-fita; --kf-slide-daga: 0 100%; /* zamewa daga sama */ /* Yana amfani da tsoho zuƙowa: ma'auni daga 80% zuwa 100% */ }
.modal { rayarwa: kf-zuƙowa 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zuƙowa-daga: 0; /* zuƙowa mai ban mamaki daga 0% zuwa 100% */ }
.gaba { rayarwa: kf-fade-in 2s, kf-zuƙowa 2s sauƙi-in; --kf-zuƙowa-daga: 1.2; --kf-zuƙowa-zuwa: 0.8; /* Saukar da sikelin mai laushi */ }
Tsohuwar 0.8 (80%) tana aiki daidai don yawancin abubuwan UI, kamar saƙon toast da katunan, yayin da har yanzu suna da sauƙin keɓancewa don lokuta na musamman. Dubi Alamar Maɓalli na Pen - Demo 4 [mai yatsa] ta Amit Sheen. Wataƙila kun lura da wani abu mai ban sha'awa a cikin misalan kwanan nan: mun kasance muna haɗa abubuwan raye-raye. Ɗaya daga cikin mahimman fa'idodin aiki tare da alamun @keyframes shine cewa an tsara su don haɗa kai da juna. Wannan m abun da ke ciki na ganganci ne, ba na ganganci ba. Za mu tattauna abubuwan raye-raye daki-daki daga baya, gami da inda za su iya zama matsala, amma yawancin haɗuwa suna da sauƙi da sauƙin aiwatarwa. Lura: Yayin rubuta wannan labarin, kuma watakila saboda rubuta shi, na sami kaina ina sake tunani game da dukan ra'ayin raye-rayen shiga. Tare da duk ci gaban kwanan nan a cikin CSS, shin muna buƙatar su kwata-kwata? An yi sa'a, Adam Argyle ya bincika tambayoyi iri ɗaya kuma ya bayyana su da kyau a cikin shafinsa. Wannan bai saba wa abin da aka rubuta a nan ba, amma yana gabatar da wata hanya da ta dace a yi la'akari da ita, musamman idan ayyukanku sun dogara da raye-rayen shiga. Ci gaba da rayarwa Yayin da raye-rayen ƙofar shiga, kamar "fade", "slide", da "zuƙowa" suna faruwa sau ɗaya sannan kuma su tsaya, ci gaba da raye-rayen raye-raye suna yin madauki har abada don jawo hankali ko nuna ayyukan da ke gudana. Abubuwan raye-rayen ci gaba guda biyu na yau da kullun da na ci karo da su sune “spin” (don masu nuna alamar lodawa) da “pulse” (don nuna mahimman abubuwa). Waɗannan raye-raye suna ba da ƙalubale na musamman idan ana batun ƙirƙirar alamun maɓalli. Ba kamar raye-rayen ƙofar shiga waɗanda yawanci ke tafiya daga wannan jiha zuwa waccan, ci gaba da raye-rayen yana buƙatar zama mai gyare-gyare sosai a tsarin halayensu. Dokta Spin Kowane aikin yana da alama yana amfani da raye-rayen juyi da yawa. Wasu suna jujjuya agogon agogo baya, wasu kuma a kan agogo. Wasu suna yin juyi guda 360-digiri, wasu suna yin juyi da yawa don sakamako mai sauri. Maimakon ƙirƙirar firam ɗin maɓalli daban don kowane bambance-bambance, bari mu gina juzu'in juzu'i guda ɗaya wanda ke ɗaukar duk yanayin yanayi:
/* * Juya - motsin motsi * Yi amfani da --kf-spin-daga da --kf-spin-don sarrafa kewayon juyawa * Yi amfani da --kf-spin-juyawa don sarrafa adadin juyawa * Default: yana juyawa daga 0deg zuwa 360deg (cikakken juyi 1) * Amfani: * rayarwa: kf-spin 1s madaidaiciya marar iyaka; * --kf-spin-juyawa: 2; // 2 cikakken jujjuyawa * --kf-spin-daga: 0deg; --kf-spin-zuwa: 180deg; // juyawa rabin * --kf-spin-daga: 0deg; --kf-spin-zuwa: -360deg; // counterclockwise */
@keyframes kf-spin { daga { juya: var (--kf-spin-daga, 0deg); } zuwa { juya: calc (var (--kf-spin-daga, 0deg) + var (-kf-spin-zuwa, 360deg) * var (--kf-spin-juyawa, 1)); } }
Yanzu za mu iya ƙirƙirar kowane nau'in juzu'in da muke so:
.loading-spinner { rayarwa: kf-spin 1s madaidaiciya marar iyaka; /* Yana amfani da tsoho: yana juyawa daga 0deg zuwa 360deg */ }
.mai sauri-loader { rayarwa: kf-spin 1.2s sauƙi-in-fita madadin mara iyaka; --kf-spin-juyawa: 3; /* 3 cikakken jujjuyawa ga kowane shugabanci a kowace zagaye*/ }
.taki-reverse { rayarwa: kf-spin 1.5s matakai (8) marar iyaka; --kf-spin-zuwa: -360deg; /* ta gefen agogo }
.da hankali-jugwi { rayarwa: kf-spin 2s sauƙi-in-fita marar iyaka; --kf-spin-daga: -16deg; --kf-spin-zuwa: 32deg; /* girgiza 36 deg: tsakanin -18deg da +18deg */ }
Dubi Alamar Maɓallin Maɓalli na Pen - Demo 5 [mai yatsa] ta Amit Sheen. Kyawun wannan tsarin shine cewa firam ɗin maɓalli iri ɗaya suna aiki don loda maɓallan, gumaka masu jujjuyawa, tasirin juzu'i, har ma da hadaddun raye-rayen juyi da yawa. The Pulse Paradox Hotunan ƙwanƙwasa suna da wayo saboda suna iya "buga" kaddarorin daban-daban. Wasu suna bugun ma'auni, wasu suna bugun ganuwa, wasu kuma kaddarorin launi na bugun jini kamar haske ko jikewa. Maimakon ƙirƙirar firam ɗin maɓalli daban don kowace dukiya, zamu iya ƙirƙirar firam ɗin maɓalli waɗanda ke aiki tare da kowace kadarar CSS. Ga misali na maɓalli na bugun bugun jini tare da ma'auni da zaɓuɓɓukan sarari:
/* * Pulse - motsin rai * Yi amfani da --kf-pulse-ma'auni-daga da --kf-pulse-scale-don sarrafa kewayon sikelin * Yi amfani da --kf-pulse-opacity-daga da --kf-pulse-opacity-don sarrafa kewayon rashin ƙarfi * Default: babu bugun jini (duk dabi'u 1) * Amfani: * rayarwa: kf-pulse 2s sauƙi-in-fita mara iyaka; * --kf-pulse-ma'auni-daga: 0.95; --kf-bugu-ma'auni-zuwa: 1.05; // bugun jini * --kf-buga-buga-daga: 0.7; --kf-bugu-bushe-zuwa: 1; // bugun zuciya */
@keyframes kf-pulse { daga { sikelin: var (--kf-pulse-sikelin-daga, 1); bayyanuwa: var (--kf-pulse-opacity-daga, 1); } zuwa { sikelin: var (--kf-pulse-sikelin-zuwa, 1); bayyanuwa: var (--kf-pulse-opacity-to, 1); } }
Wannan yana haifar da bugun jini mai sassauƙa wanda zai iya raya kaddarori da yawa: .kira-to-aiki { rayarwa: kf-pulse 0.6s madadin mara iyaka; --kf-bugu-bugu-buga-daga: 0.5; /* bugun zuciya */ }
. sanarwar-digo { rayarwa: kf-pulse 0.6s sauƙi-in-fita madadin mara iyaka; --kf-pulse-sikelin-daga: 0.9; --kf-bugu-ma'auni-zuwa: 1.1; /* bugun zuciya */ }
.rubutu- haskakawa { rayarwa: kf-pulse 1.5s sauƙi-fita marar iyaka; --kf-pulse-sikelin-daga: 0.8; --kf-bugu-bugu-daga-daga: 0.2; /* Sikeli da bugun zuciya */ }
Dubi Alamar Maɓallin Maɓalli na Pen - Demo 6 [mai yatsa] ta Amit Sheen. Wannan maɓalli na kf-pulse guda ɗaya na iya ɗaukar komai daga ɗaukar hankali da hankali zuwa abubuwan ban mamaki, duk yayin da yake da sauƙin keɓancewa. Advanced Easing Ɗaya daga cikin manyan abubuwa game da amfani da alamun maɓalli shine yadda sauƙi yake don faɗaɗa ɗakin karatu na motsin rai da samar da tasirin da yawancin masu haɓakawa ba za su damu da rubutawa daga karce ba, kamar na roba ko billa. Anan akwai misalin alamar maɓalli mai sauƙi "billa" wanda ke amfani da --kf-bounce-daga kayan al'ada don sarrafa tsayin tsalle. /* * Bounce - bouncing ƙofar tashin hankali * Yi amfani da --kf-bounce-daga don sarrafa tsayin tsalle * Default: tsalle daga 100vh (kashe allo) * Amfani: * rayarwa: kf-billa 3s sauƙi-in; * --kf-billa-daga: 200px; // tsalle daga tsayin 200px */
@keyframes kf-bounce { 0% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -1); }
34% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -0.4); }
55% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -0.2); }
72% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -0.1); }
85% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -0.05); }
94% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -0.025); }
99% { Fassara: 0 calc (var (-kf-bounce-daga, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { fassara: 0 0; Ayyukan raye-raye-lokaci-aiki: sauƙi-fita; } }
raye-raye kamar “lastick” sun ɗan fi wayo saboda lissafin da ke cikin maɓalli. Muna buƙatar ma'anar --kf-elastic-daga-X da --kf-elastic-daga-Y dabam (dukansu na zaɓi ne), kuma tare sun bar mu mu ƙirƙiri ƙofar roba daga kowane batu akan allon.
/* * Elastic In - motsin shigowar roba na roba * Yi amfani da --kf-elastic-daga-X da --kf-elastic-daga-Y don sarrafa matsayin farawa * Default: yana shiga daga babban cibiyar (0, -100vh) * Amfani: * rayarwa: kf-lastic-in 2s sauƙi-in-fitar duka; * --kf-lastic-daga-X: -50px; * --kf-lastic-daga-Y: -200px; // shigar daga (-50px, -200px) */
@keyframes kf-elastic-in { 0% { fassara: calc (var (--kf-lastic-daga-X, -50vw) * 1) calc (var (-kf-elastic-daga-Y, 0px) * 1); }
16% { fassara: calc (var (--kf-lastic-daga-X, -50vw) * -0.3227) calc (var (-kf-elastic-daga-Y, 0px) * -0.3227); }
28% { fassara: calc (var (-kf-lastic-daga-X, -50vw) * 0.1312)calc (var (-kf-lastic-daga-Y, 0px) * 0.1312); }
44% { fassara: calc (var (--kf-lastic-daga-X, -50vw) * -0.0463) calc (var (-kf-elastic-daga-Y, 0px) * -0.0463); }
59% { fassara: calc (var (--kf-lastic-daga-X, -50vw) * 0.0164) calc (var (-kf-elastic-daga-Y, 0px) * 0.0164); }
73% { fassara: calc (var (--kf-lastic-daga-X, -50vw) * -0.0058) calc (var (-kf-elastic-daga-Y, 0px) * -0.0058); }
88% { fassara: calc (var (-kf-lastic-daga-X, -50vw) * 0.0020) calc (var (-kf-elastic-daga-Y, 0px) * 0.0020); }
100% { fassara: 0 0; } }
Wannan hanyar tana ba da sauƙin sake amfani da keɓance manyan maɓallan maɓalli a cikin aikinmu, kawai ta hanyar canza kayan al'ada guda ɗaya.
.billa-da zuƙowa { rayarwa: kf-bounce 3s sauƙi-in, kf-zuƙowa 3s madaidaiciya; --kf-zuƙowa-daga: 0; }
.billa-da- zamewa { rayarwa-haɗin: ƙara; /* Dukansu rayarwa suna amfani da fassara */ rayarwa: kf-bounce 3s sauƙi-in, kf-slide-in 3s sauƙi-fita; --kf-slide-daga: -200px; }
.lastic-in { rayarwa: kf-lastic-in 2s sauƙi-in-fitar duka; }
Dubi Alamar Maɓalli na Pen - Demo 7 [mai yatsa] ta Amit Sheen. Har zuwa wannan lokaci, mun ga yadda za mu iya ƙarfafa maɓalli ta hanya mai wayo da inganci. Tabbas, kuna iya son daidaita abubuwa don dacewa da bukatun aikinku, amma mun rufe misalan raye-raye na yau da kullun da kuma abubuwan amfani na yau da kullun. Kuma tare da waɗannan alamomin maɓalli a wurin, yanzu muna da tubalan gini masu ƙarfi don ƙirƙirar daidaiton, rayarwa mai ɗorewa a duk aikin. Babu sauran firam ɗin maɓalli da aka kwafi, babu sauran rikice-rikice na duniya. Hanya ce mai tsabta, dacewa don ɗaukar duk buƙatun mu na rayarwa. Amma ainihin tambayar ita ce: Ta yaya za mu hada waɗannan tubalan gini tare? Hada Duka Tare Mun ga cewa haɗa ainihin alamun maɓalli na asali abu ne mai sauƙi. Ba mu buƙatar wani abu na musamman sai don ayyana motsin rai na farko, ayyana na biyu, saita masu canji kamar yadda ake buƙata, kuma shi ke nan. /* Fade in + slide a */ .toast { rayarwa: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-daga: 0 40px; }
/* Zuƙowa + Fade a */ .modal { rayarwa: kf-fade-in 0.3s, kf-zuƙowa 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zuƙowa-daga: 0.7; --kf-zuwa-zuwa: 1; }
/* Zazzagewa cikin + bugun jini */ .sanarwa { rayarwa: kf-slide-in 0.5s, kf-pulse 1.2s sauƙi-in-fita mara iyaka; --kf-slide-daga: -100px 0; --kf-pulse-sikelin-daga: 0.95; --kf-bugu-ma'auni-zuwa: 1.05; }
Waɗannan haɗe-haɗe suna aiki da kyau saboda kowane raye-raye yana ƙulla wata dukiya daban-daban: rashin fahimta, canzawa (fassara / sikelin), da sauransu. Amma wani lokacin akwai rikice-rikice, kuma muna buƙatar sanin dalilin da ya sa da yadda za a magance su. Lokacin da raye-raye guda biyu suka yi ƙoƙarin haɓaka dukiya ɗaya - alal misali, duka ma'aunin mai rai ko kuma duka mai raɗaɗi - sakamakon ba zai zama abin da kuke tsammani ba. Ta hanyar tsohuwa, ɗaya daga cikin raye-rayen da ake amfani da su a zahiri akan wannan kadara ce, wacce ita ce ta ƙarshe a cikin jerin raye-raye. Wannan iyakance ne na yadda CSS ke sarrafa raye-raye da yawa akan kadara ɗaya. Misali, wannan ba zai yi aiki kamar yadda aka yi niyya ba saboda kawai motsin kf-pulse zai yi aiki. .bad-combo { rayarwa: kf-zuƙowa 0.5s gaba, kf-pulse 1.2s madadin mara iyaka; --kf-zuƙowa-daga: 0.5; --kf-zuƙowa-zuwa: 1.2; --kf-pulse-sikelin-daga: 0.8; --kf-bugu-ma'auni-zuwa: 1.1; }
Bugun Animation Hanya mafi sauƙi kuma mafi kai tsaye don ɗaukar raye-raye masu yawa waɗanda ke shafar dukiya iri ɗaya ita ce amfani da kayan haɗin gwiwar rayarwa. A cikin misali na ƙarshe da ke sama, kf-pulse animation ya maye gurbin raye-rayen kf-zuƙowa, don haka ba za mu ga zuƙowa ta farko ba kuma ba za mu sami sikelin da ake sa ran zuwa na 1.2 ba. Ta hanyar saita abubuwan raye-raye don ƙarawa, muna gaya wa mai binciken ya haɗa abubuwan rayarwa biyu. Wannan yana ba mu sakamakon da muke so. .bangare-biyu { rayarwa-haɗin: ƙara; }
Dubi Alamar Maɓalli na Pen - Demo 8 [mai yatsa] ta Amit Sheen. Wannan tsarin yana aiki da kyau ga mafi yawan lokuta inda muke son hada tasiri akan dukiya ɗaya. Hakanan yana da amfani lokacin da muke buƙatar haɗa raye-raye tare da ƙimar kadarorin a tsaye. Misali, idan muna da wani kashi wanda ke amfani da kayan fassara don sanya shi daidai inda muke so, sannan kuma muna son raya shi tare da faifan maɓalli na kf-slide-in, za mu sami tsalle-tsalle mara kyau ba tare da haɗin kai ba. Dubi Alamar Maɓallin Maɓalli na Pen - Demo 9 [mai yatsa] ta Amit Sheen. Tare da saitin abun raye-raye don ƙarawa, an haɗa raye-rayen a hankali tare da wanda ke akwaicanza, don haka kashi ya tsaya a wurin kuma yana raye kamar yadda aka zata. Animation Stagger Wata hanyar sarrafa raye-raye da yawa ita ce ta “harba” su - wato, fara wasan kwaikwayo na biyu kaɗan bayan na farko ya ƙare. Ba mafita ba ce da ke aiki ga kowane harka, amma yana da amfani idan muna da motsin motsi wanda ke biye da motsi mai ci gaba. /* Fade in + opacity bugun jini */ .sanarwa { rayarwa: kf-fade-in 2s sauƙi-fitarwa, kf-pulse 0.5s 2s sauƙi-in-fita madadin mara iyaka; --kf-bugu-bugu-zuwa: 0.5; }
Dubi Alamar Maɓallin Maɓalli na Pen - Demo 10 [mai yatsa] ta Amit Sheen. Batun oda Babban ɓangaren abubuwan raye-rayen da muke aiki da su suna amfani da kayan canji. A mafi yawan lokuta, wannan ya fi dacewa. Hakanan yana da fa'idar aiki kamar yadda raye-rayen canji na iya haɓaka-GPU. Amma idan muka yi amfani da canje-canje, muna bukatar mu yarda cewa tsarin da muke yin gyare-gyarenmu yana da mahimmanci. Da yawa. A cikin maɓallan mu ya zuwa yanzu, mun yi amfani da sauyi ɗaya. Dangane da ƙayyadaddun ƙayyadaddun bayanai, ana amfani da waɗannan koyaushe cikin ƙayyadaddun tsari: na farko, kashi yana samun fassara, sannan juyawa, sannan sikeli. Wannan yana da ma'ana kuma shine abin da yawancin mu ke tsammani. Duk da haka, idan muka yi amfani da kayan canzawa, tsarin da aka rubuta ayyukan shine tsarin da aka yi amfani da su. A wannan yanayin, idan muka motsa wani abu 100 pixels a kan X-axis sa'an nan kuma juya shi da digiri 45, ba daidai ba ne da fara juya shi da digiri 45 sannan mu motsa shi 100 pixels. /* Ruwan hoda: Fassara da farko, sannan juya */ .misali-daya { canzawa: fassaraX (100px) juya (45deg); }
/* Green square: Farko juya, sannan fassara */ .misali-biyu { canza: juya (45deg) fassaraX (100px); }
Dubi Alamar Maɓalli na Pen - Demo 11 [mai yatsa] ta Amit Sheen. Amma bisa ga tsarin canji, kowane mutum yana canzawa - duk abin da muka yi amfani da shi don alamun maɓalli - yana faruwa kafin ayyukan canji. Wannan yana nufin duk wani abu da kuka saita a cikin kayan canjin zai faru bayan raye-rayen. Amma idan kun saita, alal misali, fassara tare da faifan maɓalli na kf-spin, fassarar zai faru kafin motsin rai. A rude har yanzu?! Wannan yana haifar da yanayi inda madaidaicin ƙima zai iya haifar da sakamako daban-daban don raye-raye iri ɗaya, kamar a yanayin mai zuwa:
/* raye-raye na gama gari don masu juyawa biyu .spiner { rayarwa: kf-spin 1s madaidaiciya marar iyaka; }
/* Pink spinner: fassara kafin juyawa (canji mutum ɗaya) */ .spinner-ruwan hoda { fassara: 100% 50%; }
/* Green spinner: juya sannan fassara (tsarin aiki) */ .spinner-kore { canzawa: fassara (100%, 50%); }
Dubi Alamar Maɓallin Maɓalli na Pen - Demo 12 [mai yatsa] ta Amit Sheen. Kuna iya ganin cewa mai yin shuɗi na farko (ruwan hoda) yana samun fassarar da ke faruwa kafin juyawar kf-spin, don haka ya fara motsawa zuwa wurinsa sannan ya juya. Na biyu spinner (kore) yana samun aikin fassara () wanda ke faruwa bayan mutum ya canza, don haka kashi ya fara juyawa, sannan yana motsawa dangane da kusurwar da yake yanzu, kuma muna samun tasirin kewayawa mai faɗi. A'a, wannan ba kwaro bane. Yana ɗaya daga cikin waɗannan abubuwan da muke buƙatar sani game da CSS kuma mu kiyaye yayin aiki tare da raye-raye da yawa ko sauyi da yawa. Idan ana buƙata, Hakanan zaka iya ƙirƙirar ƙarin saitin maɓalli na kf-spin-alt waɗanda ke juya abubuwa ta amfani da aikin juyawa (). Rage Motsi Kuma yayin da muke magana game da madadin madannin maɓalli, ba za mu iya yin watsi da zaɓin "babu rayarwa". Ɗaya daga cikin manyan fa'idodin amfani da alamun maɓalli shine cewa ana iya gasa damar shiga ciki, kuma yana da sauƙin yi. Ta hanyar zayyana firam ɗin mu tare da samun dama ga tunani, za mu iya tabbatar da cewa masu amfani waɗanda suka fi son rage motsi sun sami sauƙi, ƙarancin gogewa, ba tare da ƙarin aiki ko kwafin lamba ba. Ma'anar "Rage Motsi" na iya canzawa kaɗan daga wannan motsi zuwa wani, kuma daga aiki zuwa aiki, amma ga wasu muhimman abubuwan da ya kamata a tuna: Maɓallin Maɓalli Yayin da wasu raye-raye za a iya tausasa ko rage gudu, akwai wasu da ya kamata su bace gaba ɗaya lokacin da ake buƙatar rage motsi. Buga rayarwa misali ne mai kyau. Don tabbatar da cewa waɗannan raye-rayen ba su gudana cikin yanayin motsi da aka rage, za mu iya kawai kunsa su cikin tambayar da ta dace ta kafofin watsa labarai.
@media (yana son-rage-motsi: babu fifiko) { @keyfrmaes kf-pulse { daga { sikelin: var (--kf-pulse-sikelin-daga, 1); bayyanuwa: var (--kf-pulse-opacity-daga, 1); } zuwa { sikelin: var (--kf-pulse-sikelin-zuwa, 1); rashin fahimta:var (--kf-bugu-bugu-buga-zuwa, 1); } } }
Wannan yana tabbatar da cewa masu amfani waɗanda suka saita zaɓin rage-rage-motsi don ragewa ba za su ga raye-rayen ba kuma za su sami ƙwarewar da ta dace da abin da suke so. Nan take Akwai wasu firam ɗin maɓalli waɗanda ba za mu iya cirewa kawai ba, kamar raye-rayen shiga. Dole ne ƙimar ta canza, dole ne mai rai; in ba haka ba, kashi ba zai sami ingantattun ƙimomi ba. Amma a cikin raguwar motsi, wannan canji daga ƙimar farko ya kamata ya zama nan take. Don cimma wannan, za mu ayyana ƙarin saitin maɓalli inda ƙimar ke tsalle nan da nan zuwa ƙarshen jihar. Waɗannan sun zama tsoffin firam ɗin mu. Bayan haka, za mu ƙara firam ɗin maɓalli na yau da kullun a cikin tambayar kafofin watsa labarai don zaɓin-rage-motsi saita zuwa babu fifiko, kamar a misali na baya. /* tashi nan take don rage motsi */ @keyframes kf-zoom { daga, zuwa { sikelin: var (--kf-zuƙowa-zuwa, 1); } }
@media (yana son-rage-motsi: babu fifiko) { /* Maɓallan zuƙowa na asali */ @keyframes kf-zoom { daga { sikelin: var (--kf-zuƙowa-daga, 0.8); } zuwa { sikelin: var (--kf-zuƙowa-zuwa, 1); } } }
Ta wannan hanyar, masu amfani waɗanda suka fi son rage motsi za su ga kashi ya bayyana nan take a yanayinsa na ƙarshe, yayin da kowa ya sami canjin rayayye. Hanya mai laushi Akwai lokuttan da muke son ci gaba da ɗan motsi, amma sun fi laushi da nutsuwa fiye da raye-raye na asali. Misali, zamu iya maye gurbin ƙofar billa tare da fade-in a hankali.
@keyframes kf-bounce { /* Fade-in mai laushi don rage motsi */ }
@media (yana son-rage-motsi: babu fifiko) { @keyframes kf-bounce { /* Maɓallin maɓallin billa na asali */ } }
Yanzu, masu amfani tare da rage motsin motsi har yanzu suna samun ma'anar bayyanar, amma ba tare da matsanancin motsi na billa ko motsi na roba ba. Tare da tubalan ginin, tambaya ta gaba ita ce yadda za a sanya su cikin ainihin aikin aiki. Rubutun madannin maɓalli masu sassauƙa abu ɗaya ne, amma sanya su abin dogaro a cikin babban aikin yana buƙatar ƴan dabaru waɗanda dole ne in koyi hanya mai wahala. Dabarun Aiwatarwa & Mafi Kyau Da zarar muna da ƙaƙƙarfan ɗakin karatu na alamun maɓalli, ainihin ƙalubalen shine yadda za a kawo su cikin aikin yau da kullun.
Jarabawar ita ce a jefar da duk maɓallan maɓalli a lokaci ɗaya kuma a bayyana matsalar da aka warware, amma a aikace na gano cewa mafi kyawun sakamako ya fito ne daga ɗaukar hankali. Fara da mafi yawan raye-rayen raye-raye, kamar fade ko zamewa. Waɗannan nasara ce mai sauƙi waɗanda ke nuna ƙimar nan da nan ba tare da buƙatar manyan sake rubutawa ba. Yin suna wani batu ne da ya cancanci kulawa. Madaidaicin prefix ko sarari suna yana bayyana waɗanne raye-rayen alamu ne kuma waɗanne ne na gida ɗaya. Hakanan yana hana haɗarin haɗari kuma yana taimakawa sabbin membobin ƙungiyar su gane tsarin da aka raba a kallo. Takaddun bayanai suna da mahimmanci kamar lambar kanta. Ko da ɗan gajeren sharhi a sama da kowane alamar maɓalli na iya ajiye sa'o'i na zato daga baya. Ya kamata masu haɓakawa su iya buɗe fayil ɗin alamun, bincika tasirin da suke buƙata, da kwafi tsarin amfani kai tsaye cikin sashinsu. Sassauci shine abin da ya sa wannan hanya ta cancanci ƙoƙari. Ta hanyar fallasa kaddarorin al'ada masu ma'ana, muna ba ƙungiyoyin ɗaki don daidaita motsin rai ba tare da keta tsarin ba. A lokaci guda kuma, yi ƙoƙari kada ku yi yawa. Samar da kullin da ke da mahimmanci kuma kiyaye sauran ra'ayi. A ƙarshe, tuna da dama. Ba kowane raye-rayen yana buƙatar canjin motsi ba, amma da yawa suna yi. Yin burodi a cikin waɗannan gyare-gyaren da wuri yana nufin ba za mu taɓa sake gyara su daga baya ba, kuma yana nuna matakin kulawa da masu amfani da mu za su lura ko da ba su taɓa ambace shi ba.
A cikin gwaninta na, kula da alamun maɓalli a matsayin wani ɓangare na ƙirar ƙirar aikin mu shine abin da ke sa su manne. Da zarar sun kasance a wurin, sun daina jin kamar tasiri na musamman kuma sun zama wani ɓangare na harshen ƙira, haɓakar yanayi na yadda samfurin ke motsawa da amsawa. Nade Up raye-raye na iya zama ɗaya daga cikin mafi kyawun sassa na haɗin ginin gini, amma ba tare da tsari ba, za su iya zama ɗaya daga cikin manyan abubuwan takaici. Ta hanyar ɗaukar firam ɗin maɓalli azaman alamu, kuna ɗaukar wani abu wanda yawanci ya lalace kuma yana da wahala a sarrafa shi kuma juya shi cikin tsari mai haske, wanda ake iya faɗi. Ƙimar gaske ba kawai a cikin adana ƴan layukan lamba ba ne. Yana cikin amincewa cewa lokacin da kuke amfani da fade, zamewa, zuƙowa, ko juyi, kun san ainihin yadda za ta kasance a cikin aikin. Yana cikin sassaucin da ke fitowa daga kaddarorin al'ada ba tare da hargitsi na bambance-bambancen da ba su da iyaka. Kuma yana cikin damar da aka gina a cikin tushe maimakon ƙarawa kamar yaddawani tunani. Na ga waɗannan ra'ayoyin suna aiki a cikin ƙungiyoyi daban-daban da kuma codebases daban-daban, kuma tsarin koyaushe iri ɗaya ne. Da zarar alamun sun kasance a wurin, maɓallan maɓalli sun daina zama tarin dabaru kuma su zama wani ɓangare na yaren ƙira. Suna sa samfurin ya ji da niyya, mafi daidaito, kuma mafi rai. Idan ka ɗauki abu ɗaya daga wannan labarin, bari ya zama wannan: raye-raye sun cancanci kulawa da tsarin da muka riga muka ba wa launuka, rubutun rubutu, da tazara. Ƙananan saka hannun jari a cikin alamun maɓalli na maɓalli yana biya a duk lokacin da keɓantaccen motsin ku.
