Vê yekê wêne bikin: hûn beşdarî projeyek nû dibin, di binyada kodê de davêjin, û di nav çend demjimêrên pêşîn de, hûn tiştek dilşikestî nas dikin. Li seranserê şêwazê belav bûne, hûn ji bo heman anîmasyonên bingehîn gelek pênaseyên @keyframes dibînin. Sê bandorên cûda yên fade-in, du an sê guhertoyên slide, çend anîmasyonên zoom, û bi kêmî ve du anîmasyonên spin ên cihêreng ji ber ku, baş e, çima na? @keyframes pulse { ji { scale: 1; } to { pîvan: 1.1; } }
@keyframes mezintir-pulse { 0%, 20%, 100% { scale: 1; } 10%, 40% { pîvan: 1.2; } }
Ger ev senaryo nas xuya dike, hûn ne tenê ne. Di ezmûna min de di nav projeyên cihêreng de, yek ji destkeftiyên bilez ên domdar ên ku ez dikarim radest bikim hevgirtin û standardkirina keyframes e. Ew bûye mînakek wusa pêbawer ku ez naha li benda vê paqijkirinê wekî yek ji karên xwe yên yekem li ser bingehek kodek nû me. Mantiqa Li Paş Kaosê Dema ku hûn li ser wê difikirin ev zêdebûn têgihîştinek bêkêmasî dike. Em hemî di xebata xweya rojane de heman anîmasyonên bingehîn bikar tînin: fade, slayd, zoom, spin, û bandorên din ên hevpar. Van anîmasyon pir sade ne, û hêsan e ku meriv pênasek @keyframes-a bilez were hilanîn da ku kar biqede. Bêyî pergalek anîmasyonek navendî, pêşdebiran bi xwezayî van keyframeyan ji sifirê dinivîsin, nizanin ku anîmasyonên mîna berê li cîhek din di bingeha kodê de hene. Ev bi taybetî dema ku di mîmarên-based pêkhatan de dixebitin (ya ku piraniya me van rojan dikin) gelemperî ye, ji ber ku tîm bi gelemperî li deverên cûda yên serîlêdanê paralel dixebitin. Encam? Kaosa anîmasyon. Pirsgirêka Piçûk Pirsgirêkên herî diyar ên bi dubarekirina keyframes de dema pêşkeftinê winda kirin û şilbûna kodê ya nehewce ye. Gelek pênase keyframe tê vê wateyê ku dema ku hewcedarî diguherin gelek cîh têne nûve kirin. Ma hûn hewce ne ku wextê anîmasyona xweya wendakirinê rast bikin? Hûn ê hewce ne ku her mînakek li ser bingeha koda xwe bişopînin. Dixwazin fonksiyonên hêsankirinê standard bikin? Bextê te xweş bî ku hûn hemî guhertoyan bibînin. Ev pirbûna xalên lênêrînê nûvekirinên anîmasyonê yên hêsan jî karekî demdirêj dike. Pirsgirêka Mezin Vê dubarekirina keyframeyan pirsgirêkek pir bikêrhatî ya ku di binê rûxê de ye diafirîne: xefika qada gerdûnî. Tewra dema ku bi mîmarî-bingeha pêkhateyan re dixebitin, keyframên CSS-ê her gav di çarçoveya gerdûnî de têne destnîşan kirin. Ev tê vê wateyê ku hemî keyframes ji hemî pêkhateyan re derbas dibin. Herdem. Erê, anîmasyona we ne hewce ye ku çarçoveyên sereke yên ku we di beşa xwe de destnîşan kirine bikar bîne. Ew klavyeyên paşîn ên ku bi heman navê ku di çarçoweya gerdûnî de hatine barkirin li hev dikin bikar tîne. Heya ku hemî keyframên we yek in, dibe ku ev pirsgirêkek piçûk xuya bike. Lê gava ku hûn dixwazin anîmasyonek ji bo dozek karanîna taybetî xweş bikin, hûn di tengasiyê de ne, an xirabtir, hûn ê bibin sedema wan. An anîmasyona we dê nexebite ji ber ku hêmanek din li dû ya we hatî barkirin, framên weya sereke dinivîse, an jî pêkhateya we dom dike û bi xeletî tevgera anîmasyonê ji bo her pêkhateyek din ku navê wê frameyê bikar tîne diguhezîne, û dibe ku hûn jî pê nehesin. Li vir mînakek hêsan e ku pirsgirêkê destnîşan dike: .component-one { /* şêweyên pêkhateyan */ anîmasyon: pulse 1s ease-in-out infinite alternate; }
/* ev pênase @keyframes dê nexebite */ @keyframes pulse { ji { scale: 1; } to { pîvan: 1.1; } }
/* paşê di kodê de ... */
.component-du { /* şêweyên pêkhateyan */ anîmasyon: pulse 1s ease-in-out infinite; }
/* ev çarçoveyên sereke dê li ser her du beşan bicîh bibin */ @keyframes pulse { 0%, 20%, 100% { scale: 1; } 10%, 40% { pîvan: 1.2; } }
Her du pêkhate heman navê anîmasyonê bikar tînin, lê pênase @keyframes ya duyemîn ya yekem dinivîse. Naha hem pêkhatek-yek û hem jî pêkhateya-du dê çarçoveyên sereke yên duyemîn bikar bînin, bêyî ku kîjan pêkhatî kîjan keyframes diyar kiriye. Binêre Tokens Pen Keyframes - Demo 1 [forked] ji hêla Amit Sheen ve. Beşa herî xirab? Ev pir caran di pêşkeftina herêmî de bêkêmasî dixebite, lê dema ku pêvajoyên çêkirinê rêzika barkirina şêwazên we diguhezîne di hilberînê de bi sirhî têk diçe. Hûn bi anîmasyonên ku cûda tevdigerin li gorî kîjan pêkhateyan û bi kîjan rêzê têne barkirin, diqedin. Çareserî: Keyframên Yekgirtî Bersiva vê kaosê ecêb hêsan e: keyframên dînamîkî yên pêşwextkirî ku di şêwazek hevpar de têne hilanîn. Li şûna ku em bihêlin ku her pêkhateyek anîmasyonên xwe diyar bike, em keyframeyên navendî yên ku baş-belgekirî ne, bi hêsanî têne çêkirin diafirînin.bikar bînin, parastin, û li gorî hewcedariyên taybetî yên projeya we hatine çêkirin. Wê wekî nîşaneyên keyframes bifikirin. Çawa ku em nîşanekan ji bo reng û valahiyê bikar tînin, û gelek ji me berê jî nîşanekan ji bo taybetmendiyên anîmasyonê, mîna fonksiyonên demdirêj û hêsankirinê bikar tînin, çima ji bo keyframeyan jî tokenan bikar neynin? Ev nêzîkatî dikare bi xwezayî bi her karûbarê sêwirana sêwirana heyî ya ku hûn bikar tînin re yek bike, dema ku hem pirsgirêka piçûk (duberhevkirina kodê) hem jî pirsgirêka mezintir (nakokîyên qada gerdûnî) bi yek gavê çareser bike. Fikir rasterast e: ji bo hemî anîmasyonên me yên hevpar çavkaniyek yekane ya rastiyê biafirînin. Vê şêwazê parvekirî çarçoveyên sereke yên bi baldarî hatine çêkirin hene ku qalibên anîmasyonê yên ku projeya me bi rastî bikar tîne vedihewîne. Nabe ku hûn texmîn bikin ka anîmasyonek fade jixwe li cîhek kodê me heye. Êdî bi şaşî anîmasyonên ji pêkhateyên din nayên nivîsandin. Lê li vir girîng e: ev ne tenê anîmasyonên kopî-paste yên statîk in. Ew hatine sêwirandin ku bi navgîniya taybetmendiyên xwerû yên CSS-ê ve dînamîk û xwerû bin, dihêlin ku em domdariya xwe biparêzin di heman demê de ku hîn jî xwedan nermbûnek e ku em anîmasyonan li gorî rewşên karanîna taybetî biguhezînin, mîna ku hûn li yek cîhek anîmasyonek piçûktir "pişk" hewce bike. Avakirina The First Keyframes Token Yek ji yekem fêkiyên kêm-daliqandî yên ku divê em pê mijûl bibin anîmasyona "wezîn-nav" e. Di yek ji projeyên xwe yên vê dawiyê de, min zêdetirî bi dehan pênaseyên fade-in cuda dîtin, û erê, wan hemî bi tenê nezelaliyê ji 0 ber 1 anîm kirin. Ji ber vê yekê, bila em şêwazek nû biafirînin, jê re bibêjin kf-tokens.css, wê têxin nav projeya xwe, û keyframên xwe bi şîroveyên rast di hundurê wê de bi cih bikin. /* keyframes-tokens.css */
/* * Fade In - anîmasyona têketina wenda bike * Bikaranîn: anîmasyon: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { ji { opacity: 0; } to { opacity: 1; } }
Ev yek danezana @keyframes li şûna hemî wan anîmasyonên fade-li belawela li seranserê bingeha koda me digire. Paqij, sade, û gerdûnî tê sepandin. Û naha ku me ev nîşanek diyar kiriye, em dikarin wê ji her pêkhateyê li seranserê projeya xwe bikar bînin: .modal { anîmasyon: kf-fade-in 0.3s ease-out; }
.tooltip { anîmasyon: kf-fade-in 0.2s ease-in-out; }
.notification { anîmasyon: kf-fade-in 0.5s ease-out; }
Binêre Tokens Pen Keyframes - Demo 2 [forked] ji hêla Amit Sheen ve. Nîşe: Em di hemî navên @keyframes de pêşgirek kf- bikar tînin. Ev pêşgir wekî cîhek navan kar dike ku pêşî li nakokiyên navdêran bi anîmasyonên heyî yên di projeyê de digire û tavilê eşkere dike ku ev keyframe ji pelê meya tokenên keyframe têne. Çêkirina Slidek Dînamîk Kf-fade-in keyframes pir baş dixebitin ji ber ku ew hêsan e û cîhek hindik heye ku tiştan tevlihev bikin. Lêbelê, di anîmasyonên din de, pêdivî ye ku em pir dînamîktir bin, û li vir em dikarin hêza mezin a taybetmendiyên xwerû yên CSS-ê bikar bînin. Li vir nîşaneyên keyframes bi rastî li gorî anîmasyonên statîk ên belavbûyî dibiriqin. Ka em senaryoyek hevpar bavêjin: anîmasyonên "slide-in". Lê ji ku derê bikişîne? 100px ji rastê? 50% ji çepê? Ma divê ew ji jor li ser ekranê bikeve? An jî dibe ku ji binî ve biherike? Ji ber vê yekê gelek îmkan, lê li şûna ku em ji bo her rêgez û her cûrbecûr qonaxên sereke yên cihêreng biafirînin, em dikarin yek nîşanek maqûl ava bikin ku bi hemî senaryoyan re têkildar e: /* * Slide In - anîmasyona slaytê ya rênîşander * Ji bo kontrolkirina rêwerzê --kf-slide-from bikar bînin * Pêşniyaz: ji çepê dizîvire (-100%) * Bikaranîn: * anîmasyon: kf-slide-in 0.3s ease-out; * --kf-slide-from: -100px 0; // ji çepê bişkînin * --kf-slide-from: 100px 0; // ji rastê bişkînin * --kf-slide-from: 0 -50px; // ji jor ve diherike */
@keyframes kf-slide-in { ji { werger: var(--kf-slide-ji, -100% 0); } to { werger: 0 0; } }
Naha em dikarin vê nîşana yek @keyframes ji bo her rêgezek slaytê bi tenê bi guheztina --kf-slide-ji taybetiya xwerû bikar bînin: .sidebar { anîmasyon: kf-slide-in 0.3s ease-out; /* Nirxa xwerû bikar tîne: ji çepê dizîvirîne */ }
.notification { anîmasyon: kf-slide-in 0.4s ease-out; --kf-slide-from: 0 -50px; /* ji jor ve bihejîne */ }
.modal { anîmasyon: kf-fade-di 0.5s, kf-slide-in 0.5s kubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* ji jêr-rast bişkînin */ }
Ev nêzîkatî dema ku hevgirtinê diparêze, nermbûnek bêhempa dide me. Daxuyaniya yek keyframe, îmkanên bêdawî. Binêre Tokens Pen Keyframes - Demo 3 [forked] ji hêla Amit Sheen ve. Û heke em dixwazin anîmasyonên xwe hîn maqûltir bikin, ku rê bide bandorên "slide-out" jî, em dikarinbi tenê taybetmendiyek --kf-slide-ji bo xwerû lê zêde bike, mîna ya ku em ê di beşa pêş de bibînin. Keyframes Zoom dualî Anîmasyonek din a hevpar ku di nav projeyan de dubare dibe bandorên "zoom" e. Ku ew ji bo peyamên toast pîvanek nazik be, ji bo modalan zoomek dramatîk be, an ji bo sernivîsan bandorek hûrbekirî ya nerm be, anîmasyonên zoomê li her derê hene. Li şûna ku em ji bo her nirxa pîvanê çarçoveyên sereke yên cihêreng biafirînin, werin em yek komek maqûl a kf-zoom keyframe ava bikin:
/* * Zoom - anîmasyonek pîvan * Ji bo kontrolkirina nirxên pîvanê --kf-zoom-from û --kf-zoom-to bikar bînin * Pêşniyaz: ji 80% heta 100% zoom dike (0,8 ber 1) * Bikaranîn: * anîmasyon: kf-zoom 0.2s ease-out; * --kf-zoom-ji: 0.5; --kf-zoom-to: 1; // ji %50 heta %100 zoom * --kf-zoom-from: 1; --kf-zoom-to: 0; // ji 100% ber 0% zoom * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // ji %100 heta %110 zoom */
@keyframes kf-zoom { ji { pîvan: var(--kf-zoom-ji, 0.8); } to { pîvan: var(--kf-zoom-to, 1); } }
Bi yek pênase, em dikarin her cûrbecûr zoomê ku em hewce ne bi dest bixin: .toast { anîmasyon: kf-slide-li 0.2s, kf-zoom 0.4s hêsan-derketin; --kf-slide-from: 0 100%; /* ji jor ve bihejîne */ /* Mezinahiya xwerû bi kar tîne: ji %80 heta %100 pîvan dike */ }
.modal { anîmasyon: kf-zoom 0.3s kub-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* zoom dramatîk ji 0% heya 100% */ }
.sernav { anîmasyon: kf-fade-di 2s, kf-zoom 2s ease-in; --kf-zoom-ji: 1.2; --kf-zoom-to: 0.8; /* pîvana nerm */ }
Pêşniyara 0.8 (80%) ji bo piraniya hêmanên UI-ê, mîna peyam û kartên toast, bi rengek bêkêmasî dixebite, di heman demê de hîn jî hêsan e ku meriv ji bo dozên taybetî were xweş kirin. Binêre Tokenên Pen Keyframes - Demo 4 [forked] ji hêla Amit Sheen ve. Dibe ku we di mînakên vê dawiyê de tiştek balkêş dîtiye: me anîmasyon li hev kirine. Yek ji avantajên sereke yên xebata bi nîşanekên @keyframes ev e ku ew hatine sêwirandin ku bi rengek bêkêmasî bi hevûdu re bibin yek. Ev pêkhatina xweş bi qestî ye, ne tesaduf e. Em ê paşê bi hûrgulî lihevhatina anîmasyonê bipeyivin, tevî ku ew dikarin bibin pirsgirêk, lê piraniya hevberdan rasterast û hêsan têne bicîh kirin. Nîşe: Dema ku vê gotarê dinivîsim, û dibe ku ji ber nivîsandina wê, min dît ku tevahiya ramana anîmasyonên têketinê ji nû ve difikirîm. Ligel hemî pêşkeftinên vê dawiyê yên di CSS de, ma em hîn jî ji wan re hewce ne? Xwezî, Adam Argyle heman pirsan keşif kir û wan di bloga xwe de bi awakî berbiçav diyar kir. Ev berevajî ya ku li vir hatî nivîsandin nagire, lê ew nêzîkatiyek hêjayî fikirînê pêşkêşî dike, nemaze heke projeyên we bi giranî bi anîmasyonên têketinê ve girêdayî bin. Anîmasyonên Berdewam Dema ku anîmasyonên têketinê, mîna "xemgîn", "slide", û "zoom" yek carî diqewimin û dûv re disekinin, anîmasyonên domdar bêdawî diherikin da ku balê bikişînin an çalakiya domdar destnîşan bikin. Du anîmasyonên domdar ên herî gelemperî ku ez pê re rû bi rû ne "spin" (ji bo barkirina nîşanan) û "puls" (ji bo ronîkirina hêmanên girîng) ne. Van anîmasyon dema ku tê ser çêkirina nîşaneyên keyframe de dijwariyên bêhempa derdixin pêş. Berevajî anîmasyonên têketinê ku bi gelemperî ji dewletek diçin dewletek din, anîmasyonên domdar hewce ne ku di şêwazên tevgerê de pir xwerû bin. The Spin Doctor Her proje xuya dike ku gelek anîmasyonên spin bikar tîne. Hin li gorî saetê dizivirin, yên din jî berevajî wê. Hin yek zivirînek 360-pileyî dikin, yên din jî ji bo bandorek zûtir gelek ziviran dikin. Li şûna ku em ji bo her cûrbecûr qonaxên sereke yên cihêreng biafirînin, werin em yek spinek maqûl ava bikin ku hemî senaryoyan digire dest:
/* * Spin - anîmasyona zivirandinê * --kf-spin-from û --kf-spin-to bikar bînin da ku rêza zivirandinê kontrol bikin * Ji bo kontrolkirina mîqdara zivirandinê --kf-spin-turns bikar bînin * Pêşniyaz: ji 0 deg heya 360 deg dizivire (1 zivirandina tevahî) * Bikaranîn: * anîmasyon: kf-spin 1s linear infinite; * --kf-spin-turns: 2; // 2 zivirandinên tam * --kf-spin-ji: 0deg; --kf-spin-to: 180deg; // nîv zivirî * --kf-spin-ji: 0deg; --kf-spin-to: -360deg; // berevajiyê saetê */
@keyframes kf-spin { ji { zivirandin: var(--kf-spin-from, 0deg); } to { zivirandin: calc(var(--kf-spin-ji, 0deg) + var(--kf-spin-ber, 360deg) * var(--kf-spin-dizivire, 1)); } }
Naha em dikarin her guhertoyek spin ku em jê hez dikin biafirînin:
.loading-spinner { anîmasyon: kf-spin 1s linear infinite; /* Vebijêrk bikar tîne: ji 0 deg berbi 360 deg dizivire */ }
.fast-loader { anîmasyon: kf-spin 1.2s ease-in-out infinite alternate; --kf-spin-turns: 3; /* 3 zivirandinên bêkêmasî ji bo her rêgezê li ser hev*/ }
.steped-reverse { anîmasyon: kf-spin 1.5s gavên (8) bêdawî; --kf-spin-to: -360deg; /* berevajiyê saetê */ }
.subtle-wiggle { anîmasyon: kf-spin 2s ease-in-out infinite alternate; --kf-spin-ji: -16deg; --kf-spin-to: 32deg; /* 36 derece bihejîne: di navbera -18 û +18 derece */ }
Binêre Tokens Pen Keyframes - Demo 5 [forked] ji hêla Amit Sheen ve. Bedewiya vê nêzîkbûnê ev e ku heman keyframe ji bo barkirina spinners, zivirîna îkonan, bandorên guheztinê, û tewra anîmasyonên pirzivir ên tevlihev dixebitin. Paradoksa Pulse Anîmasyonên pulsê bikêrtir in ji ber ku ew dikarin taybetmendiyên cihêreng "pişk" bikin. Hin pîvazê, hinên din nezelaliyê, û hin taybetmendiyên rengîn ên mîna ronahiyê an têrbûnê dihejînin. Li şûna ku ji bo her milkê keyframên cihêreng biafirînin, em dikarin keyframên ku bi her taybetmendiyek CSS re dixebitin biafirînin. Li vir mînakek keyframe pulse bi vebijarkên pîvan û nezelaliyê heye:
/* * Pulse - anîmasyonek pulsing * Ji bo kontrolkirina rêjeya pîvanê --kf-pulse-scale-from û --kf-pulse-scale-to bikar bînin * --kf-pulse-opacity-from û --kf-pulse-opacity-to bikar bînin da ku rêjeya nezelaliyê kontrol bikin * Pêşniyaz: bê pêl (hemû nirx 1) * Bikaranîn: * anîmasyon: kf-pulse 2s ease-in-out alternatîfa bêdawî; * --kf-pulse-scale-ji: 0,95; --kf-pulse-scale-to: 1,05; // nebza pîvanê * --kf-pulse-nerazîbûn-ji: 0.7; --kf-pulse-opacity-to: 1; // nebza nezelaliyê */
@keyframes kf-pulse { ji { pîvan: var(--kf-pulse-scale-ji, 1); nezelalbûn: var(--kf-pulse-nerazîbûn-ji, 1); } to { pîvan: var(--kf-pulse-scale-to, 1); nezelalbûn: var(--kf-pulse-nerazîbûn-to, 1); } }
Ev pêlekek maqûl diafirîne ku dikare gelek taybetmendiyên zindî bike: .call-to-action { anîmasyon: kf-pulse 0.6s infinite alternate; --kf-pulse-nerazîbûn-ji: 0.5; /* nebza nezelaliyê */ }
.notification-dot { anîmasyon: kf-pulse 0.6s ease-in-out infinite alternate; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* pîvana nebza */ }
.text-highlight { anîmasyon: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* Pîvan û nebza nezelaliyê */ }
Binêre Tokens Pen Keyframes - Demo 6 [forked] ji hêla Amit Sheen ve. Vê keyframeya kf-pulse ya yekane dikare her tiştî ji girtina balê ya nazik bigire heya roniyên dramatîk bigire dest, her çendî ku meriv meriv hêsan e. Asankirina pêşkeftî Yek ji wan tiştên girîng ên di derbarê karanîna nîşaneyên keyframes de ev e ku meriv çiqasî hêsan e ku pirtûkxaneya xweya anîmasyonê berfireh bike û bandorên ku pir pêşdebiran ji sifirê binivîsin, mîna elastîk an jî rijandin, peyda nakin. Li vir mînakek nîşanek keyframes a hêsan "bounce" heye ku taybetmendiyek --kf-bounce-ji xwerû bikar tîne da ku bilindahiya bazdanê kontrol bike. /* * Bounce - anîmasyona têketinê ya berbiçûk * Ji bo kontrolkirina bilindahiya bazdanê --kf-bounce-from bikar bînin * Pêşniyaz: ji 100vh (ji ekranê veqetiyaye) * Bikaranîn: * anîmasyon: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // ji bilindahiya 200px bazdan */
@keyframes kf-bounce { 0% { wergerîne: 0 calc(var(--kf-bounce-ji, 100vh) * -1); }
34% { wergerîne: 0 calc(var(--kf-bounce-ji, 100vh) * -0.4); }
55% { werger: 0 calc(var(--kf-bounce-ji, 100vh) * -0.2); }
72% { werger: 0 calc(var(--kf-bounce-ji, 100vh) * -0.1); }
85% { werger: 0 calc(var(--kf-bounce-ji, 100vh) * -0.05); }
94% { wergerîne: 0 calc(var(--kf-bounce-ji, 100vh) * -0.025); }
99% { wergerîne: 0 calc(var(--kf-bounce-ji, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { werger: 0 0; animation-time-function: ease-out; } }
Anîmasyonên mîna "elastîk" ji ber hesabên di hundurê keyframeyan de hinekî dijwartir in. Pêdivî ye ku em --kf-elastic-ji-X û --kf-elastic-ji-Y ji hev veqetînin (her du jî vebijarkî ne), û bi hev re ew bihêlin ku em ji her xalek li ser ekranê deriyek elastîk biafirînin.
/* * Elastic In - anîmasyona têketina elastîk * Ji bo kontrolkirina pozîsyona destpêkê --kf-elastic-from-X û --kf-elastic-from-Y bikar bînin * Pêşniyaz: ji navenda jor ve dikeve (0, -100vh) * Bikaranîn: * anîmasyon: kf-elastic-li 2s her du jî hêsan-di-derketin; * --kf-elastic-ji-X: -50px; * --kf-elastîk-ji-Y: -200px; // bikeve ji (-50px, -200px) */
@keyframes kf-elastic-in { 0% { werger: calc(var(--kf-elastîk-ji-X, -50vw) * 1) calc(var(--kf-elastîk-ji-Y, 0px) * 1); }
16% { wergerîne: calc(var(--kf-elastîk-ji-X, -50vw) * -0.3227) calc(var(--kf-elastîk-ji-Y, 0px) * -0.3227); }
28% { wergerîne: calc(var(--kf-elastîk-ji-X, -50vw) * 0.1312)calc(var(--kf-elastic-ji-Y, 0px) * 0.1312); }
44% { wergerîne: calc(var(--kf-elastîk-ji-X, -50vw) * -0.0463) calc(var(--kf-elastîk-ji-Y, 0px) * -0.0463); }
59% { werger: calc(var(--kf-elastîk-ji-X, -50vw) * 0.0164) calc(var(--kf-elastîk-ji-Y, 0px) * 0.0164); }
73% { wergerîne: calc(var(--kf-elastîk-ji-X, -50vw) * -0.0058) calc(var(--kf-elastîk-ji-Y, 0px) * -0.0058); }
88% { werger: calc(var(--kf-elastîk-ji-X, -50vw) * 0.0020) calc(var(--kf-elastîk-ji-Y, 0px) * 0.0020); }
100% { werger: 0 0; } }
Ev nêzîkatî bi tenê bi guheztina yek taybetmendiyek xwerû, ji nû ve bikar anîn û xweşkirina keyframên pêşkeftî li seranserê projeya me hêsan dike.
.bounce-and-zoom { anîmasyon: kf-bounce 3s asankarî, kf-zoom 3s linear; --kf-zoom-from: 0; }
.bounce-and-slide { animation-composition: add; /* Herdu anîmasyon wergerandinê bikar tînin */ anîmasyon: kf-bounce 3s asankarî, kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
.elastic-in { anîmasyon: kf-elastic-li 2s ease-in-out hem; }
Binêre Tokenên Pen Keyframes - Demo 7 [forked] ji hêla Amit Sheen ve. Heya vê nuqteyê, me dîtiye ka em çawa dikarin keyframeyan bi awayek biaqil û bikêr hev bikin. Bê guman, dibe ku hûn bixwazin tiştan biguhezînin da ku çêtir li gorî hewcedariyên projeya xwe bicîh bibin, lê me mînakên çend anîmasyonên hevpar û dozên karanîna rojane vegirtiye. Û digel van nîşaneyên keyframes li cîh, me naha blokên avakirina hêzdar hene ji bo afirandina anîmasyonên domdar, domdar li seranserê projeyê. Bêhtir çarçoveyên sereke yên dubarekirî, ne nakokiyên qada gerdûnî. Tenê rêyek paqij û hêsan ku meriv hemî hewcedariyên me yên anîmasyonê bicîh bîne. Lê pirsa rast ev e: Em çawa van blokên avahîsaziyê bi hev re berhev dikin? Hemû Bi hev re danîn Me dît ku berhevkirina tokenên keyframeyên bingehîn hêsan e. Ji me re tiştek taybetî ne hewce ye lê em anîmasyona yekem diyar bikin, ya duyemîn diyar bikin, guherbaran li gorî hewcedariyê saz bikin, û ew e. /* Di nav de xira kirin + di nav de bihejînin */ .toast { anîmasyon: kf-fade-di 0.4s, kf-slide-in 0.4s kubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* Zêdekirin + hejandin */ .modal { anîmasyon: kf-fade-di 0.3s, kf-zoom 0.3s kubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-ji: 0.7; --kf-zoom-to: 1; }
/* Slide in + pulse */ .notification { anîmasyon: kf-slide-li 0.5s, kf-pulse 1.2s ease-in-out infinite alternate; --kf-slide-from: -100px 0; --kf-pulse-scale-ji: 0,95; --kf-pulse-scale-to: 1,05; }
Van berhevokan xweş dixebitin ji ber ku her anîmasyon taybetmendiyek cûda dike hedef: nezelalbûn, veguherîn (wergerandin / pîvan) hwd. Lê carinan nakokî hene, û divê em zanibin çima û çawa bi wan re mijûl bibin. Gava ku du anîmasyon hewl didin ku heman taybetmendiyê anîmasyon bikin - mînakî, hem pîvana anîmasyon an hem jî nezelaliya anîmasyonê - encam dê ne ya ku hûn hêvî dikin be. Bi xwerû, tenê yek ji anîmasyon bi rastî li ser wê taybetmendiyê tê sepandin, ku di navnîşa anîmasyonê de ya paşîn e. Ev sînorkirinek e ku meriv çawa CSS-ê li ser heman milkê pir anîmasyonan dike. Mînakî, ev ê wekî ku tê xwestin nexebite ji ber ku tenê anîmasyona kf-pulse dê were sepandin. .bad-combo { anîmasyon: kf-zoom 0.5s ber bi pêş, kf-pulse 1.2s alternatîfek bêdawî; --kf-zoom-ji: 0,5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
Zêdekirina Animation Awayê herî hêsan û rasterast ji bo birêvebirina gelek anîmasyonên ku bandorê li heman taybetmendiyê dikin ev e ku meriv taybetmendiya anîmasyon-pêkhatin bikar bîne. Di mînaka paşîn a li jor de, anîmasyona kf-pulse şûna anîmasyona kf-zoom digire, ji ber vê yekê em ê mezinbûna destpêkê nebînin û em ê pîvana bendewar a 1.2-ê bi dest nexin. Bi danîna anîmasyon-pêkhatina ku lê zêde bike, em ji gerokê re dibêjin ku her du anîmasyonan bi hev re bike. Ev encama ku em dixwazin dide me. .component-du { animation-composition: add; }
Binêre Tokens Pen Keyframes - Demo 8 [forked] ji hêla Amit Sheen ve. Ev nêzîkatî ji bo pir rewşan ku em dixwazin bandorên li ser heman milkê hev bikin baş dixebite. Di heman demê de gava ku em hewce ne ku anîmasyonên bi nirxên milkê statîk re bikin yek jî bikêr e. Mînakî, heke me hêmanek hebe ku taybetmendiya werger bikar tîne da ku wê tam li cîhê ku em dixwazin bi cîh bike, û dûv re em bixwazin wê bi kf-slide-in keyframeyan anîmasyon bikin, em bazdanek xuya ya nebaş bêyî anîmasyon-pêkhatinê distînin. Binêre Tokenên Pen Keyframes - Demo 9 [forked] ji hêla Amit Sheen ve. Digel ku anîmasyon-pêkhatina ku lê zêde bike, anîmasyon bi ya heyî re bi hêsanî tê hev kirinveguherîne, ji ber vê yekê hêman li cîhê xwe dimîne û wekî ku tê hêvî kirin zindî dike. Animation Stagger Rêbazek din a birêvebirina pir anîmasyonan ev e ku wan "teqandî" bikin - ango, piştî ku ya yekem qediya hinekî dest bi anîmasyona duyemîn bikin. Ew ne çareseriyek e ku ji bo her dozê dixebite, lê gava ku me anîmasyonek têketinê heye ku li pey anîmasyonek domdar heye ew bikêr e. /* di nav de winda dibe + nebza nezelaliyê */ .notification { anîmasyon: kf-fade-in 2s hêsan-derketin, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-pulse-nerazîbûn-to: 0.5; }
Binêre Tokenên Pen Keyframes - Demo 10 [forked] ji hêla Amit Sheen ve. Mijarên Order Beşek mezin a anîmasyonên ku em pê re dixebitin taybetmendiya veguherînê bikar tînin. Di pir rewşan de, ev bi hêsanî hêsantir e. Di heman demê de xwedan avantajek performansê ye ji ber ku anîmasyonên veguherînê dikarin GPU-lezdar bibin. Lê heke em veguherînan bikar bînin, divê em qebûl bikin ku rêza ku em veguherînên xwe pêk tînin girîng e. Gelek. Di çarçoveyên xwe yên sereke de heya nuha, me veguherînên kesane bikar anîne. Li gorî taybetmendiyan, ev her gav bi rêzek sabît têne sepandin: yekem, hêman werger dibe, dûv re dizivire, dûv re pîvan dibe. Ev watedar e û ya ku piraniya me hêvî dikin e. Lêbelê, heke em taybetmendiya veguherînê bikar bînin, rêza ku fonksiyonan tê de têne nivîsandin rêza ku ew têne sepandin e. Di vê rewşê de, heke em tiştek 100 pixel li ser X-êk bixin û dûv re 45 dereceyan bizivirînin, ew ne heman e ku pêşî ew 45 dereceyan bizivirînin û dûv re jî 100 pixel bigerînin. /* Çargoşe pembe: Pêşî wergerîne, paşê bizivirîne */ .example-one { veguherîn: translateX(100px) rotate(45deg); }
/* Qada kesk: Pêşî bizivire, paşê wergerîne */ .mînak-du { veguherîn: rotate (45deg) translateX (100px); }
Binêre Tokenên Pen Keyframes - Demo 11 [forked] ji hêla Amit Sheen ve. Lê li gorî rêzika veguherînê, hemî veguherînên kesane - her tiştê ku me ji bo nîşaneyên keyframes bikar aniye - berî fonksiyonên veguherînê diqewime. Ev tê vê wateyê ku her tiştê ku hûn di taybetmendiya veguherînê de destnîşan dikin dê piştî anîmasyonan çêbibe. Lê heke hûn, wek nimûne, bi hev re bi keyframeyên kf-spin wergerînin, werger dê berî anîmasyonê çêbibe. Hîn şaş ma?! Ev dibe sedema rewşên ku nirxên statîk dikarin ji bo heman anîmasyonê encamên cihêreng derxînin, wek mînaka jêrîn:
/* Anîmasyonek hevpar ji bo her du spinner */ .spinner { anîmasyon: kf-spin 1s linear infinite; }
/* Pembe spinner: berî zivirandinê wergerîne (veguherîna ferdî) */ .spinner-pink { werger: 100% 50%; }
/* Spinnera kesk: bizivirîne paşê wergerîne (terza fonksiyonê) */ .spinner-kesk { veguherîn: werger (100%, 50%); }
Binêre Tokenên Pen Keyframes - Demo 12 [forked] ji hêla Amit Sheen ve. Hûn dikarin bibînin ku spinnera yekem (pembe) wergerek werdigire ku berî zivirîna kf-spin diqewime, ji ber vê yekê ew pêşî diçe cihê xwe û dûv re dizivire. Spinnera duyemîn (kesk) fonksiyonek werger () werdigire ku piştî veguheztina kesane diqewime, ji ber vê yekê hêman pêşî dizivire, dûv re li gorî goşeya xweya heyî tevdigere, û em wê bandora orbita berfireh werdigirin. Na, ev ne xeletiyek e. Ew tenê yek ji wan tiştan e ku divê em di derbarê CSS-ê de zanibin û gava ku bi pir anîmasyon an veguheztinên pirjimar re dixebitin ji bîr mekin. Ger hewce be, hûn dikarin komek pêvekên kf-spin-alt jî biafirînin ku bi karanîna fonksiyona rotate() hêmanan dizivirînin. Tevgera Kêmkirî Û dema ku em li ser keyframên alternatîf diaxivin, em nekarin vebijarka "bê anîmasyon" paşguh bikin. Yek ji avantajên herî mezin ên karanîna tokenên keyframes ev e ku gihîştî dikare tê de were şûştin, û bi rastî kirina wê pir hêsan e. Bi sêwirana keyframên xwe yên ku di hişê xwe de gihîştinê, em dikarin pê ewle bin ku bikarhênerên ku tevgera kêm tercîh dikin, bêyî xebatek zêde an dubarekirina kodê, ezmûnek nermtir, kêmtir balkêş bistînin. Wateya rast a "Tevgera Kêmkirî" dikare ji anîmasyonek berbi yekî din, û ji projeyek bo projeyekê hinekî biguhezîne, lê li vir çend xalên girîng hene ku divê li ber çavan bigirin: Bêdengkirina Keyframes Digel ku hin anîmasyon dikarin nerm bibin an hêdî bibin, yên din hene ku dema ku kêm tevger tê xwestin divê bi tevahî winda bibin. Anîmasyonên Pulse mînakek baş in. Ji bo ku em pê ewle bin ku ev anîmasyon di moda tevgerê ya kêmkirî de nameşin, em dikarin wan bi tenê di pirsa medyaya guncan de bipêçin.
@media (tercîh-kêm-tevger: bê tercîh) { @keyfrmaes kf-pulse { ji { pîvan: var(--kf-pulse-scale-ji, 1); nezelalbûn: var(--kf-pulse-nerazîbûn-ji, 1); } to { pîvan: var(--kf-pulse-scale-to, 1); nezelalî:var(--kf-pulse-nezelalî-to, 1); } } }
Ev piştrast dike ku bikarhênerên ku tercîh-kêm-tevger ji bo kêmkirinê danîne, dê anîmasyonê nebînin û dê ezmûnek ku bi tercîha wan re têkildar be bistînin. Instant In Hin çarçeweyên sereke hene ku em nekarin bi hêsanî jêbirin, wek anîmasyonên têketinê. Divê nirx biguhere, divê zindî bike; Wekî din, hêman dê ne xwediyê nirxên rast be. Lê di tevgera kêmkirî de, ev derbasbûna ji nirxa destpêkê divê tavilê be. Ji bo ku em bigihîjin vê yekê, em ê komek pêvek ji keyframeyan diyar bikin ku nirx tavilê berbi rewşa dawî ve diçe. Ev dibin keyframên me yên xwerû. Dûv re, em ê klavyeyên birêkûpêk di hundurê pirsek medyayê de lê zêde bikin ji bo tercîh-kêm-tevgera ku ji bo ne-tercîh hatî danîn, mîna mînaka berê. /* ji bo tevgera kêmkirî tavilê têkevin */ @keyframes kf-zoom { ji, heta { pîvan: var(--kf-zoom-to, 1); } }
@media (tercîh-kêm-tevger: bê tercîh) { /* Keyframên sereke yên zoomê */ @keyframes kf-zoom { ji { pîvan: var(--kf-zoom-ji, 0.8); } to { pîvan: var(--kf-zoom-to, 1); } } }
Bi vî rengî, bikarhênerên ku tevgera kêmkirî tercîh dikin dê bibînin ku element tavilê di rewşa xweya paşîn de xuya bibe, dema ku her kesê din veguherîna anîmasyonî werdigire. Nêzîkatiya Soft Bûyer hene ku em dixwazin hin tevger bihêlin, lê ji anîmasyona orjînal pir nermtir û aramtir. Mînakî, em dikarin têketinek bounce-ê bi fade-inek nerm veguherînin.
@keyframes kf-bounce { /* Ji bo tevgerê kêm tîrêjiya nerm */ }
@media (tercîh-kêm-tevger: bê tercîh) { @keyframes kf-bounce { /* Çemên sereke yên bounce */ } }
Naha, bikarhênerên bi tevgera kêmkirî ya çalak hîn jî hestek xuyangê werdigirin, lê bêyî tevgera zirav an anîmasyonek elastîk. Li gel blokên avahiyê li cîh, pirsa din ev e ku meriv wan çawa bike beşek ji xebata rastîn. Nivîsandina keyframên maqûl yek tişt e, lê pêbawerkirina wan di projeyek mezin de çend stratejiyan hewce dike ku ez neçar bûm ku bi awayê dijwar fêr bibim. Stratejiyên Pêkanînê & Pratîkên çêtirîn Gava ku me pirtûkxaneyek zexm a nîşaneyên keyframes hebe, pirsgirêka rastîn ev e ku meriv wan çawa bixe nav xebata rojane.
Ceribandin ev e ku meriv hemî çarçoveyên sereke bi yekcarî bavêje û pirsgirêk çareserkirî ragihîne, lê di pratîkê de min dît ku encamên çêtirîn ji pejirandina hêdî-hêdî têne. Bi anîmasyonên herî gelemperî, wek fade an slide, dest pê bikin. Vana serketinên hêsan in ku bêyî ku ji nû ve nivîsandinên mezin hewce ne nirxa tavilê nîşan bidin. Binavkirin xaleke din e ku balê dikişîne. Pêşgirek an cîhê navekî domdar eşkere dike ka kîjan anîmasyon nîşanek in û kîjan yek-yek herêmî ne. Ew di heman demê de pêşî li pevçûnên bêserûber digire û ji endamên tîmê nû re dibe alîkar ku pergala hevpar bi nihêrînek nas bikin. Belgekirin bi qasî ku kod bixwe girîng e. Tewra şîroveyek kurt a li jorê her nîşanek keyframes dikare bi saetan texmînkirina paşê xilas bike. Pêşvebirek pêdivî ye ku bikaribe pelê tokenan veke, bandora ku ew hewce dike bigere, û şêwaza karanîna rasterast di beşa xwe de kopî bike. Zelalbûn ew e ku vê nêzîkatiyê hêjayî hewildanê dike. Bi eşkerekirina taybetmendiyên xwerû yên maqûl, em cîhê didin tîmê ku bêyî ku pergalê bişkînin anîmasyonê biguncînin. Di heman demê de, hewl bidin ku zêde tevlihev nekin. Kulîlkên ku girîng in peyda bikin û yên mayî bi ramanê bihêlin. Di dawiyê de, gihîştinê bîr bînin. Ne her anîmasyonek alternatîfek tevgerê ya kêmkirî hewce dike, lê gelek hewce dikin. Pejirandina van verastkirinên zû tê vê wateyê ku em çu carî neçar in ku paşê wan ji nû ve nûve bikin, û ew astek lênihêrînê nîşan dide ku bikarhênerên me dê bala xwe bidin her çend ew qet behsa wê nekin.
Di ezmûna min de, dermankirina tokenên keyframes wekî beşek ji xebata meya tokenên sêwiranê ev e ya ku wan dihêle. Gava ku ew di cîh de ne, ew wekî bandorên taybetî rawestin û bibin beşek ji zimanê sêwiranê, pêvekek xwezayî ya ku hilber çawa tevdigere û bersiv dide. Wrapping Up Anîmasyon dikarin bibin yek ji beşên herî kêfxweş ên navbeynkariya avahiyê, lê bêyî avahî, ew dikarin bibin yek ji mezintirîn çavkaniyên bêhêvîbûnê jî. Bi dermankirina keyframes wekî nîşanekan, hûn tiştek ku bi gelemperî tevlihev û dijwar e ku meriv were rêvebirin digirin û wê vediguhezînin pergalek zelal, pêşbînîkirî. Nirxa rastîn ne tenê di hilanîna çend rêzikên kodê de ye. Ew di wê baweriyê de ye ku gava ku hûn fade, slide, zoom, an spin bikar bînin, hûn bi rastî dizanin ka ew ê çawa li seranserê projeyê tevbigere. Ew di nermbûna ku ji taybetmendiyên xwerû bêyî kaosa guhertoyên bêdawî tê de ye. Û ew di gihîştina ku di bingehê de hatî çêkirin de ji bilî ku wekî zêde hatî çêkirinramanek paşîn. Min dît ku van ramanan di tîmên cûda û bingehên kodên cihêreng de dixebitin, û nimûne her gav yek e. Dema ku token li cîhê xwe bin, keyframes namîne berhevokek belawela ya hîleyan û dibin beşek ji zimanê sêwiranê. Ew hilber bêtir bi mebest, hevgirtî û zindîtir hîs dikin. Ger hûn tiştek ji vê gotarê derxînin, bila ev be: anîmasyon heman lênêrîn û strukturê heq dikin ku em berê didin reng, tîpografî û cihêbûnê. Veberhênanek piçûk di nîşaneyên keyframes de her gava ku navbeynkariya we diherike, dide.
