Fa eyi yɛ w’adwene: wokɔka adwuma foforo bi ho, wode wo ho hyɛ codebase no mu, na wɔ nnɔnhwerew kakraa a edi kan no mu no, wuhu biribi a wunim a ɛyɛ abasamtu. Wɔapete wɔ stylesheets no nyinaa mu, wobɛhunu @keyframes nkyerɛaseɛ pii ama mfitiaseɛ animations korɔ no ara. Fade-in effects ahorow abiɛsa, slide nsakrae abien anaa abiɛsa, zoom animations nsa kakraa bi, ne anyɛ yiye koraa no spin animations ahorow abien efisɛ, yiw, dɛn nti na ɛnte saa? @keyframes pulse { . efi { . nsenia: 1; } . to { . nsenia: 1.1; } . } .
@keyframes kɛse-pulse { . 0%, 20%, 100% { . nsenia: 1; } . 10%, 40% { . nsenia: 1.2; } . } .
Sɛ ɛte sɛ nea tebea yi nim a, ɛnyɛ wo nkutoo na wowɔ. Wɔ me suahunu mu wɔ nnwuma ahodoɔ mu no, nkonimdie a ɛkɔ so ntɛmntɛm a metumi de ama no mu baako ne sɛ mɛhyɛ keyframes den na mayɛ no pɛpɛɛpɛ. Ɛabɛyɛ nhwɛsoɔ a wotumi de ho to so araa ma seesei mehwɛ kwan sɛ saa ahotew yi bɛyɛ m’adwuma a ɛdi kan no mu baako wɔ codebase foforɔ biara so. Ntease a Ɛwɔ Basabasayɛ no Akyi Saa redundancy yi yɛ nea ntease wom koraa bere a wususuw ho no. Yɛn nyinaa de mfonini atitiriw koro no ara di dwuma wɔ yɛn da biara da adwuma mu: fades, slides, zooms, spins, ne nneɛma afoforo a ɛtaa ba. Saa animations yi yɛ fɛ tẽẽ, na ɛnyɛ den sɛ wobɛbɔ @keyframes nkyerɛaseɛ a ɛyɛ ntɛm na ama woatumi ayɛ adwuma no. Sɛ wonni mfoniniyɛ nhyehyɛe a ɛwɔ mfinimfini a, wɔn a wɔyɛ no fi awosu mu kyerɛw saa keyframes yi fi mfiase, a wonnim sɛ mfonini a ɛte saa ara wɔ hɔ dedaw wɔ mmeae afoforo wɔ codebase no mu. Eyi taa ba titiriw bere a yɛreyɛ adwuma wɔ component-based architectures (a yɛn mu dodow no ara yɛ nnansa yi), efisɛ akuw taa yɛ adwuma wɔ nsɛdi mu wɔ application no afã horow. Nea afi mu aba? Animation basabasayɛ. Ɔhaw Ketekete no Nsɛm a ɛda adi kɛse wɔ keyframes duplication ho ne nkɔso bere a wɔsɛe no ne code bloat a ɛho nhia. Keyframe nkyerɛase ahorow pii kyerɛ mmeae pii a ɛsɛ sɛ wɔyɛ foforo bere a ahwehwɛde ahorow sesa no. Ɛsɛ sɛ wosakra bere a wode bɛyɛ wo fade animation no? Ɛho behia sɛ wohwehwɛ instance biara wɔ wo codebase no nyinaa so. Wopɛ sɛ woyɛ easing functions standardize? Good luck sɛ wobɛhunu nsakraeɛ no nyinaa. Saa mmeae a wɔde siesie nneɛma a wɔdɔɔso yi ma animation updates a ɛnyɛ den mpo yɛ adwuma a egye bere pii. Ɔhaw Kɛse no Saa keyframes duplication yi de ɔhaw a ɛyɛ anifere kɛse a ɛhintaw wɔ asase no ase ba: wiase nyinaa scope afiri. Sɛ mpo wo ne component-based architectures reyɛ adwuma a, wɔkyerɛkyerɛ CSS keyframes mu bere nyinaa wɔ wiase nyinaa scope mu. Wei kyerɛ sɛ keyframes nyinaa fa components nyinaa ho. Berɛ biara. Yiw, wo animation no mfa keyframes a woakyerɛkyerɛ mu wɔ wo component no mu no nni dwuma ankasa. Ɛde keyframes a etwa to a ɛne saa din koro no ara pɛpɛɛpɛ a wɔde hyɛɛ wiase nyinaa scope no mu no di dwuma. Bere tenten a wo keyframes nyinaa yɛ pɛ no, ebia eyi bɛyɛ te sɛ asɛm ketewaa bi. Nanso bere a wopɛ sɛ wo customize animation bi ma use case pɔtee bi no, wobɛkɔ ɔhaw mu, anaasɛ nea enye koraa no, wo na wode wɔn bɛba. Wo animation no rennyɛ adwuma efisɛ component foforo a wɔde ahyɛ wo de no akyi, akyerɛw wo keyframes no so, anaasɛ wo component no loads a etwa to na wɔ akwanhyia mu sesa animation suban ma component foforo biara a ɛde saa keyframe no din di dwuma, na ebia worenhu mpo. Nhwɛso tiawa bi a ɛkyerɛ ɔhaw no ni: .afã-baako { . /* component styles */ . animation: pulse 1s mmerɛw-wɔ-fi infinite alternate; } .
/* saa @keyframes nkyerɛaseɛ yi rennyɛ adwuma */ @keyframes pulse { . efi { . nsenia: 1; } . to { . nsenia: 1.1; } . } .
/* akyiri yi wɔ koodu no mu... */
.afã-abien { . /* component styles */ . animation: pulse 1s mmerɛw-wɔ-firi mu a enni ano; } .
/* saa keyframes yi bɛfa afã abien no nyinaa ho */ @keyframes pulse { . 0%, 20%, 100% { . nsenia: 1; } . 10%, 40% { . nsenia: 1.2; } . } .
Nneɛma abien no nyinaa de animation din koro na edi dwuma, nanso @keyframes nkyerɛase a ɛto so abien no kyerɛw nea edi kan no so. Afei component-one ne component-two nyinaa de keyframes a ɛtɔ so mmienu no bedi dwuma, ɛmfa ho sɛ component bɛn na ɛkyerɛkyerɛ keyframes bɛn mu. Hwɛ Pen Keyframes Tokens - Demo 1 [wɔde forked] a Amit Sheen yɛe no. Ɔfã a enye koraa? Eyi taa yɛ adwuma pɛpɛɛpɛ wɔ mpɔtam hɔ nkɔso mu nanso ɛbubu ahintasɛm mu wɔ adwumayɛ mu bere a adansi nhyehyɛe sesa wo stylesheets no loading nhyehyɛe no. Wowie a wonya animations a ɛsono sɛnea wɔyɛ wɔn ade a egyina components a wɔde loaded ne sɛnea wɔde di dwuma nnidiso nnidiso so. Ano aduru: Keyframes a Wɔaka abom Saa basabasayɛ yi ho mmuae yɛ nwonwa sɛ ɛyɛ mmerɛw: dynamic keyframes a wɔadi kan akyerɛkyerɛ mu a wɔde asie wɔ stylesheet a wɔkyɛ mu. Sɛ anka yɛbɛma component biara akyerɛkyerɛ n’ankasa animations mu no, yɛyɛ centralized keyframes a wɔakyerɛw no yiye, ɛnyɛ den sɛ wɔbɛyɛde di dwuma, wobetumi ahwɛ so, na wɔayɛ no sɛnea w’adwuma no ahiade pɔtee te. Fa no sɛ ɛyɛ keyframes tokens. Sɛnea yɛde token di dwuma ma kɔla ne ntam kwan, na yɛn mu pii de token di dwuma dedaw ma animation properties, te sɛ bere tenten ne easing functions no, dɛn nti na yɛmfa token nni dwuma mma keyframes nso? Saa kwan yi betumi ne mprempren design token adwumayɛ kwan biara a wode redi dwuma no ayɛ biako wɔ abɔde mu, bere a wodi ɔhaw ketewa (code duplication) ne ɔhaw kɛse (wiase nyinaa scope conflicts) nyinaa ho dwuma wɔ bere koro mu. Adwene no yɛ tẽẽ: yɛ nokware fibea biako ma yɛn animations a yɛtaa yɛ nyinaa. Saa stylesheet a wɔakyekyɛ yi kura keyframes a wɔayɛ no yie a ɛkata animation patterns a yɛn project no de di dwuma ankasa so. No more guessing sɛ ebia fade animation bi wɔ hɔ dedaw wɔ baabi wɔ yɛn codebase no mu. Animations a efi nneɛma afoforo mu a wɔbɛkyerɛw so wɔ akwanhyia mu bio. Nanso ade titiriw no ni: eyinom nyɛ static copy-paste animations kɛkɛ. Wɔayɛ wɔn sɛ wɔnyɛ nnam na wotumi sesa wɔn denam CSS amanne kwan so agyapade so, na ɛma yetumi kura nea ɛkɔ so pɛpɛɛpɛ bere a yɛda so ara wɔ nsakrae a yɛde bɛdannan mfonini ahorow no akɔ tebea pɔtee bi a wɔde di dwuma mu, te sɛ sɛ wuhia “pulse” animation a ɛsõ kakra wɔ beae biako a. Keyframes Token a Edi Kan no a Wɔbɛkyekye Nnuaba a edi kan a ɛsensɛn fam a ɛsɛ sɛ yedi ho dwuma no mu biako ne “fade-in” animation no. Wɔ me nnansa yi nnwuma biako mu no, mihuu fade-in nkyerɛase ahorow bɛboro dumien a ɛsono emu biara, na yiw, ne nyinaa yɛɛ opacity no anigye ara kwa fi 0 kosi 1. Enti, momma yɛnyɛ stylesheet foforo, mfrɛ no kf-tokens.css, mfa nkɔ yɛn project no mu, na yɛmfa yɛn keyframes a nsɛm a ɛfata wom nhyɛ mu. /* safoa-tokens.css */
/* * Fade In - fade abrannaa so animation * Dwumadi: animation: kf-fade-in 0.3s mmerɛw-fi; */ @keyframes kf-fade-wɔ { . efi { . opacity: 0; } . to { . opacity a ɛnyɛ nea ɛda adi: 1; } . } .
Saa @keyframes mpaemuka baako yi si saa fade-in animations a apete no nyinaa ananmu wɔ yɛn codebase no nyinaa so. Ɛho tew, ɛnyɛ den, na wotumi de di dwuma wɔ wiase nyinaa. Na afei a yɛanya saa token yi a wɔakyerɛkyerɛ mu no, yɛbɛtumi de adi dwuma afiri component biara mu wɔ yɛn project no nyinaa mu: .modal { . animation: kf-fade-in 0.3s mmerɛw-fi; } .
.adwinnade ho nsɛm { . animation: kf-fade-in 0.2s mmerɛw-wɔ-firi; } .
.abɔde a wɔde ma { . animation: kf-fade-in 0.5s mmerɛw-fi; } .
Hwɛ Pen Keyframes Tokens - Demo 2 [wɔde forked] a Amit Sheen yɛe no. Hyɛ no nsow: Yɛde kf- prefix redi dwuma wɔ yɛn @keyframes din nyinaa mu. Saa prefix yi yɛ dinbea a ɛsiw dinbɔ a ɛne animations a ɛwɔ hɔ dada wɔ adwuma no mu ntam ntawntawdi ano na ɛma ɛda adi pefee ntɛm ara sɛ saa keyframes yi firi yɛn keyframes tokens fael no mu. Slide a Ɛyɛ Nnam a Wɔbɛyɛ Kf-fade-in keyframes no yɛ adwuma yie ɛfiri sɛ ɛyɛ mmerɛw na ɛwɔ baabi ketewaa bi a ɛbɛma nneɛma ayɛ basaa. Nanso, wɔ animations afoforo mu no, ɛsɛ sɛ yɛyɛ nnam kɛse, na ɛha na yebetumi de tumi kɛse a ɛwɔ CSS custom properties mu no adi dwuma. Eyi ne baabi a keyframes tokens hyerɛn ankasa sɛ wɔde toto static animations a apete ho a. Momma yɛmfa tebea a ɛtaa ba: “slide-in” animations. Nanso twetwe kɔ mu fi he? 100px fi nifa so? 50% fi benkum so? So ɛsɛ sɛ efi screen no atifi hyɛn mu? Anaasɛ ebia wobɛsensɛn mu afi ase? Enti nneɛma pii a ebetumi aba, nanso sɛ́ anka yɛbɛbɔ keyframes ahorow a ɛsono emu biara ama akwankyerɛ biara ne nsakrae biara no, yebetumi ayɛ token biako a ɛyɛ mmerɛw a ɛyɛ nsakrae ma ɛne tebea horow nyinaa hyia: /* * Slide In - akwankyerɛ slide animation * Fa --kf-slide-from di dwuma de hwɛ akwankyerɛ so * Default: ɛtwetwe fi benkum (-100%) . * Sɛnea wɔde di dwuma: * animation: kf-slide-in 0.3s mmerɛw-fi; * --kf-slide-fi: -100px 0; // slide fi benkum so * --kf-slide-fi: 100px 0; // slide fi nifa so * --kf-slide-fi: 0 -50px; // slide fi soro */
@keyframes kf-slide-wɔ { . efi { . kyerɛ ase: var (--kf-slide-fi, -100% 0); } . to { . kyerɛ ase: 0 0; } . } .
Afei yɛbɛtumi de saa @keyframes token baako yi adi dwuma ama slide akwankyerɛ biara denam --kf-slide-from custom property a yɛbɛsesa no ara kwa so: .afã a wɔde kyerɛw nsɛm { . animation: kf-slide-in 0.3s mmerɛw-fi; /* Ɔde default value di dwuma: slides fi benkum */ } .
.abɔde a wɔde ma { . animation: kf-slide-in 0.4s mmerɛw-fi; --kf-slide-fi: 0 -50px; /* slide fi soro */ . } .
.modal { . animation a wɔde yɛ mfonini: kf-fade-wɔ 0.5s, . kf-slide-wɔ 0.5s kubik-bezier (0.34, 1.56, 0.64, 1); --kf-slide-fi: 50px 50px; /* slide fi ase-nifa */ . } .
Saa kwan yi ma yetumi yɛ nsakrae a ɛyɛ nwonwa bere a yɛkɔ so yɛ nea ɛkɔ so daa no. Keyframe mpaemuka biako, nneɛma a ebetumi aba a enni ano. Hwɛ Pen Keyframes Tokens - Demo 3 [wɔde forked] a Amit Sheen yɛe no. Na sɛ yɛpɛ sɛ yɛma yɛn animations no yɛ nea ɛyɛ mmerɛw mpo, na yɛma kwan ma “slide-out” effects nso yɛ adwuma a, yebetumifa --kf-slide-to custom property ka ho kɛkɛ, a ɛte sɛ deɛ yɛbɛhunu wɔ ɔfa a ɛdi hɔ no. Zoom Keyframes a Ɛwɔ Akwan Abien Animation foforo a wɔtaa yɛ a ɛyɛ duplicated wɔ projects nyinaa mu ne “zoom” effects. Sɛ́ ɛyɛ anifere kwan so scale-up ma toast messages, dramatic zoom-in ma modals, anaasɛ brɛoo scale-down effect ma headings, zoom animations wɔ baabiara. Sɛ anka yɛbɛbɔ keyframes ahorow a ɛsono emu biara ama scale value biara no, momma yɛnkyekye kf-zoom keyframes biako a ɛyɛ mmerɛw:
/* * Zoom - nsenia animation * Fa --kf-zoom-from ne --kf-zoom-to di dwuma de hwɛ nsenia botae ahorow so * Default: ɛyɛ kɛse fi 80% kosi 100% (0.8 kosi 1) * Sɛnea wɔde di dwuma: * animation: kf-zoom 0.2s mmerɛw-fi; * --kf-zoom-fi: 0.5; --kf-zoom-kɔ: 1; // zoom fi 50% kosi 100% . * --kf-zoom-fi: 1; --kf-zoom-kɔ: 0; // zoom fi 100% kosi 0% . * --kf-zoom-fi: 1; --kf-zoom-kɔ: 1.1; // zoom fi 100% kosi 110% . */
@keyframes kf-a ɛyɛ kɛse { efi { . nsenia: var (--kf-zoom-fi, 0.8); } . to { . nsenia: var (--kf-zoom-kɔ, 1); } . } .
Sɛ yɛde nkyerɛase biako ma a, yebetumi anya zoom nsakrae biara a yehia: .toast { . animation a wɔde yɛ mfonini: kf-slide-wɔ 0.2s, . kf-zoom 0.4s mmerɛw-fi; --kf-slide-firi: 0 100%; /* slide fi soro */ . /* Ɔde default zoom di dwuma: nsenia fi 80% kosi 100% */ } .
.modal { . animation: kf-zoom 0.3s kubik-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-fi: 0; /* dramatic zoom fi 0% kosi 100% */ } .
.asɛmti { . animation a wɔde yɛ mfonini: kf-fade-wɔ 2s, . kf-zoom 2s mmerɛw-wɔ; --kf-zoom-firi: 1.2; --kf-zoom-kɔ: 0.8; /* brɛoo scale down */ . } .
Default a ɛyɛ 0.8 (80%) no yɛ adwuma pɛpɛɛpɛ ma UI nneɛma dodow no ara, te sɛ toast nkrasɛm ne kaad, bere a ɛda so ara yɛ mmerɛw sɛ wobɛsesa ama nsɛm titiriw. Hwɛ Pen Keyframes Tokens - Demo 4 [wɔde forked] a Amit Sheen yɛe no. Ebia woahyɛ biribi a ɛyɛ anigye nsow wɔ nnansa yi nhwɛso ahorow no mu: yɛayɛ mfonini ahorow a ɛyɛ anigye abom. Mfasoɔ titire baako a ɛwɔ so sɛ wode @keyframes tokens bɛyɛ adwuma ne sɛ wɔayɛ no sɛdeɛ ɛbɛyɛ a ɛne wɔn ho wɔn ho bɛka abom a ɛnyɛ den. Saa nnwom a wɔahyehyɛ a ɛyɛ mmerɛw yi yɛ nea wɔahyɛ da ayɛ, na ɛnyɛ akwanhyia. Yɛbɛka animation composition ho asɛm kɔ akyiri akyiri yi, a baabi a ebetumi abɛyɛ ɔhaw ka ho, nanso nkabom dodow no ara yɛ tẽẽ na ɛnyɛ den sɛ wɔde bedi dwuma. Hyɛ no nsow: Bere a merekyerɛw saa asɛm yi, ne ebia esiane sɛ merekyerɛw nti, mihui sɛ mesan susuw adwene a ɛne sɛ wɔde mfonini a wɔde hyɛ mu no nyinaa ho. Nkɔso a aba nnansa yi wɔ CSS mu nyinaa akyi no, so yɛda so ara hia koraa? Nea eye ne sɛ, Adam Argyle hwehwɛɛ nsɛmmisa koro no ara mu na ɔdaa no adi yiye wɔ ne blog mu. Eyi ne nea wɔakyerɛw wɔ ha no nhyia, nanso ɛde ɔkwan bi a ɛfata sɛ wususuw ho kyerɛ, titiriw sɛ wo nnwuma no de ne ho to entrance animations so kɛse a. Animations a Ɛkɔ So Bere a anim mfonini ahorow, te sɛ “fade”, “slide”, ne “zoom” si pɛnkoro na afei egyina no, mfonini ahorow a ɛkɔ so no loop daa de twetwe adwene anaasɛ ɛkyerɛ dwumadi a ɛkɔ so. Animation abien a ɛkɔ so daa a ɛtaa ba a mihyia ne “spin” (ma loading indicators) ne “pulse” (ma wosi nneɛma a ɛho hia so dua). Saa animations yi de nsɛnnennen soronko ba bere a ɛfa keyframes tokens a wɔbɛyɛ ho no. Nea ɛnte sɛ entrance animations a ɛtaa fi tebea biako mu kɔ foforo mu no, ɛsɛ sɛ animations a ɛkɔ so no yɛ nea wotumi sesa no kɛse wɔ wɔn suban nhyehyɛe mu. Spin Oduruyɛfo no Ɛte sɛ nea adwuma biara de spin animations pii di dwuma. Ebinom di akɔneaba wɔ dɔn no kwan so, afoforo nso twa wɔn ho hyia wɔ dɔn no kwan so. Ebinom di akɔneaba digrii 360 pɛnkoro, afoforo nso dannan wɔn ho mpɛn pii na ama wɔanya nkɛntɛnso ntɛmntɛm. Sɛ anka yɛbɛbɔ keyframes ahorow a ɛsono emu biara ama nsakrae biara no, momma yɛnkyekye spin biako a ɛyɛ mmerɛw a edi tebea horow nyinaa ho dwuma:
/* * Spin - ɛkyinkyini animation * Fa --kf-spin-from ne --kf-spin-to di dwuma de hwɛ sɛnea ɛkyinkyini no so * Fa --kf-spin-turns di dwuma de hwɛ rotation dodow so * Default: ɛdannan fi 0deg kosi 360deg (1 a ɛkyinkyini nyinaa) * Sɛnea wɔde di dwuma: * animation: kf-spin 1s linear a enni ano; * --kf-twitwa-dan-dan: 2; // 2 a wɔde di akɔneaba a edi mũ * --kf-spin-fi: 0deg; --kf-twitwa-kɔ: 180deg; // fã a wɔkyinkyini * --kf-spin-fi: 0deg; --kf-twitwa-kɔ: -360deg; // nea ɛne dɔn no bɔ abira */
@keyframes kf-twitwagye { . efi { . dannan: var (--kf-spin-fi, 0deg); } . to { . dannan: calc (var (--kf-twitwa-fi, 0deg) + var (--kf-twitwa-kɔ, 360deg) * var (--kf-twitwa-dannan, 1)); } . } .
Afei yebetumi ayɛ spin variation biara a yɛpɛ:
.adesoa-spinner { . animation: kf-spin 1s linear a enni ano; /* Ɔde default di dwuma: ɛdannan fi 0deg kɔ 360deg */ } .
.fast-loader { . animation: kf-spin 1.2s mmerɛw-wɔ-firi a enni ano alternate; --kf-spin-dan-dan: 3; /* 3 full rotations ma akwankyerɛ biara wɔ cycle biara mu*/ } .
.anammɔn-akyi { . animation: kf-spin 1.5s anammɔn(8) a enni ano; --kf-twitwa-kɔ: -360deg; /* a ɛne dɔn no bɔ abira */ . } .
.anifere-wiggle { . animation: kf-spin 2s mmerɛw-wɔ-firi a enni ano alternate; --kf-spin-firi: -16deg; --kf-twitwa-kɔ: 32deg; /* wiggle 36 deg: ntam -18deg ne +18deg */ } .
Hwɛ Pen Keyframes Tokens - Demo 5 [wɔde forked] a Amit Sheen yɛe no. Ɔkwan yi fɛ ne sɛ keyframes koro no ara yɛ adwuma ma loading spinners, rotating icons, wiggle effects, ne mpo multi-turn animations a ɛyɛ den. Pulse Paradox no ho asɛm Pulse animations yɛ anifere efisɛ etumi “pulse” nneɛma ahorow. Ebinom pulse nsenia no, afoforo nso pulse opacity no, na ebinom nso pulse kɔla su te sɛ brightness anaa saturation. Sɛ anka yɛbɛbɔ keyframes ahodoɔ ama agyapadeɛ biara no, yɛbɛtumi ayɛ keyframes a ɛne CSS agyapadeɛ biara yɛ adwuma. Nhwɛsoɔ a ɛfa pulse keyframe a ɛwɔ scale ne opacity options ho nie:
/* * Pulse - pulsing animation a ɛyɛ anigye * Fa --kf-pulse-scale-from ne --kf-pulse-scale-to di dwuma de hwɛ nsenia no kwan so * Fa --kf-pulse-opacity-from ne --kf-pulse-opacity-to di dwuma de hwɛ opacity kwan so * Default: pulse biara nni hɔ (nsusuwii nyinaa yɛ 1) . * Sɛnea wɔde di dwuma: * animation: kf-pulse 2s mmerɛw-wɔ-fi infinite alternate; * --kf-pulse-scale-fi: 0.95; --kf-pulse-scale-kɔ: 1.05; // nsenia a ɛyɛ pulse * --kf-pulse-opacity-fi: 0.7; --kf-pulse-opacity-kɔ: 1; // opacity pulse a ɛyɛ den */
@keyframes kf-nsuo a ɛyɛ den { efi { . nsenia: var (--kf-pulse-nsusuwii-fi, 1); opacity: var (--kf-pulse-opacity-fi, 1); } . to { . nsenia: var (--kf-pulse-nsusuwii-kɔ, 1); opacity: var (--kf-pulse-opacity-kɔ, 1); } . } .
Eyi ma wonya pulse a ɛyɛ mmerɛw a ebetumi ama nneɛma pii ayɛ nkwa: .frɛ-a-wɔde-yɛ ade { . animation: kf-pulse 0.6s a enni ano a ɛsesa; --kf-pulse-opacity-fi: 0.5; /* opacity a ɛyɛ den */ . } .
.mmɔdebɔ-dot { . animation: kf-pulse 0.6s mmerɛw-wɔ-firi a enni ano alternate; --kf-pulse-scale-fi: 0.9; --kf-pulse-scale-kɔ: 1.1; /* nsenia pulse */ . } .
.nsɛm-a-wɔtwe adwene asi so { . animation: kf-pulse 1.5s mmerɛw-fi nea enni ano; --kf-pulse-scale-fi: 0.8; --kf-pulse-opacity-fi: 0.2; /* nsenia ne opacity pulse */ . } .
Hwɛ Pen Keyframes Tokens - Demo 6 [wɔde forked] a Amit Sheen yɛe no. Saa kf-pulse keyframe biako yi tumi di biribiara ho dwuma fi anifere kwan a wɔfa so twetwe adwene so kosi nsɛntitiriw a ɛyɛ nwonwa so, bere a ɛnyɛ den sɛ wobɛsakra no. Ahoɔden a Ɛkɔ Anim Adeɛ kɛseɛ baako a ɛfa keyframes tokens a yɛde bedi dwuma ho ne sɛdeɛ ɛyɛ mmerɛ sɛ yɛbɛtrɛw yɛn animation nwomakorabea no mu na yɛde nsunsuansoɔ a developers dodoɔ no ara renhaw wɔn ho sɛ wɔbɛkyerɛw afiri mfitiaseɛ, te sɛ elastic anaa bounce ama. Nhwɛsoɔ a ɛfa “bounce” keyframes token a ɛnyɛ den a ɛde --kf-bounce-from custom property di dwuma de hwɛ ahurututu no sorokɔ so ni. /* * Bounce - a ɛrehuruhuruw a ɛkɔ mu animation * Fa --kf-bounce-from di dwuma de hwɛ ahuruhuruw sorokɔ so * Default: ahuruw fi 100vh (off screen) . * Sɛnea wɔde di dwuma: * animation: kf-bounce 3s mmerɛw-wɔ; * --kf-bounce-firi: 200px; // huruw fi 200px sorokɔ */
@keyframes kf-a ɛbɔ { 0% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -1); } .
34% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -0.4); } .
55% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -0.2); } .
72% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -0.1); } .
85% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -0.05); } .
94% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -0.025); } .
99% { . kyerɛ ase: 0 calc (var (--kf-bounce-fi, 100vh) * -0.0125); } .
22%, 45%, 64%, 79%, 90%, 97%, 100% { kyerɛ ase: 0 0; animation-timing-function: ɛyɛ mmerɛw sɛ wobefi mu; } . } .
Animations te sɛ “elastic” yɛ trickier kakra esiane akontaabu a ɛwɔ keyframes no mu nti. Ɛsɛ sɛ yɛkyerɛkyerɛ --kf-elastic-from-X ne --kf-elastic-from-Y mu wɔ ɔkwan soronko so (abien no nyinaa yɛ nea wobetumi apaw), na wɔbom ma yɛyɛ elastic entrance fi beae biara wɔ screen no so.
/* * Elastic In - elastic abrannaa so animdefo * Fa --kf-elastic-from-X ne --kf-elastic-from-Y di dwuma de hwɛ mfiase gyinabea * Default: hyɛn mu fi soro mfinimfini (0, -100vh) . * Sɛnea wɔde di dwuma: * animation: kf-elastic-in 2s mmerɛw-wɔ-fi abien no nyinaa; * --kf-elastic-fi-X: -50px; * --kf-elastic-fi-Y: -200px; // hyɛn mu fi (-50px, -200px) */
@keyframes kf-ɛlastic-wɔ { . 0% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * 1) calc (var (--kf-elastic-fi-Y, 0px) * 1); } .
16% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * -0.3227) calc (var (--kf-elastic-fi-Y, 0px) * -0.3227); } .
28% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * 0.1312)calc (var (--kf-elastic-fi-Y, 0px) * 0.1312); } .
44% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * -0.0463) calc (var (--kf-elastic-fi-Y, 0px) * -0.0463); } .
59% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * 0.0164) calc (var (--kf-elastic-fi-Y, 0px) * 0.0164); } .
73% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * -0.0058) calc (var (--kf-elastic-fi-Y, 0px) * -0.0058); } .
88% { . kyerɛ ase: calc (var (--kf-elastic-fi-X, -50vw) * 0.0020) calc (var (--kf-elastic-fi-Y, 0px) * 0.0020); } .
100% na ɛyɛ { kyerɛ ase: 0 0; } . } .
Saa kwan yi ma ɛyɛ mmerɛw sɛ yɛbɛsan de keyframes a ɛkɔ anim adi dwuma na yɛayɛ no sɛnea wopɛ wɔ yɛn adwuma no nyinaa mu, denam amanne kwan so agyapade biako a yɛbɛsesa ara kwa so.
.bounce-ne-zoom { . animation a wɔde yɛ mfonini: kf-bounce 3s mmerɛw-wɔ, . kf-zoom 3s a ɛyɛ nsensanee; --kf-zoom-fi: 0; } .
.bounce-na-slide { . animation-nhyehyɛe: fa ka ho; /* Animation abien no nyinaa de translate di dwuma */ . animation a wɔde yɛ mfonini: kf-bounce 3s mmerɛw-wɔ, . kf-slide-in 3s mmerɛw-firi; --kf-slide-fi: -200px; } .
.elastic-wɔ { . animation: kf-elastic-in 2s mmerɛw-wɔ-fi abien no nyinaa; } .
Hwɛ Pen Keyframes Tokens - Demo 7 [wɔde forked] a Amit Sheen yɛe no. Ɛde besi ha no, yɛahu sɛnea yebetumi ahyɛ keyframes den wɔ ɔkwan a nyansa wom na ɛyɛ adwuma yiye so. Nokwarem no, ebia wobɛpɛ sɛ wo tweak nneɛma ma ɛne wo project’s ahiade hyia yiye, nanso yɛaka nhwɛso ahorow a ɛfa animations pii a wɔtaa de di dwuma ne da biara da dwumadie ho asɛm. Na ɛnam sɛ saa keyframes tokens yi wɔ hɔ nti, seesei yɛwɔ adansiɛ a ɛwɔ tumi a yɛde bɛbɔ animations a ɛkɔ so daa, a wɔtumi hwɛ so wɔ adwuma no nyinaa mu. Keyframes a wɔayɛ no abien biara nni hɔ bio, wiase nyinaa scope ntawntawdi biara nni hɔ bio. Ɔkwan a ɛho tew na ɛyɛ mmerɛw a yɛbɛfa so adi yɛn animation ahiade nyinaa ho dwuma ara kwa. Nanso asɛmmisa ankasa ne sɛ: Yɛbɛyɛ dɛn abom hyehyɛ adansi nneɛma yi? Ne Nyinaa a Wɔde Bom Yɛahu sɛ mfitiase keyframes tokens a yɛbɛka abom no yɛ mmerɛw. Yɛnhia biribi titiriw biara gye sɛ yɛbɛkyerɛkyerɛ animation a edi kan no mu, akyerɛkyerɛ nea ɛto so abien no mu, asiesie variables no sɛnea ɛho hia, na ɛno ara ne no. /* Fade wɔ + slide wɔ */ . .toast { . animation a wɔde yɛ mfonini: kf-fade-wɔ 0.4s, . kf-slide-wɔ 0.4s kubik-bezier (0.34, 1.56, 0.64, 1); --kf-slide-fi: 0 40px; } .
/* Zoom in + fade wɔ */ . .modal { . animation a wɔde yɛ mfonini: kf-fade-wɔ 0.3s, . kf-zoom 0.3s kubik-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-firi: 0.7; --kf-zoom-kɔ: 1; } .
/* Slide kɔ + pulse */ . .abɔde a wɔde ma { . animation a wɔde yɛ mfonini: kf-slide-wɔ 0.5s, . kf-pulse 1.2s mmerɛw-wɔ-fi infinite alternate; --kf-slide-fi: -100px 0; --kf-pulse-scale-fi: 0.95; --kf-pulse-scale-kɔ: 1.05; } .
Saa nkabom yi yɛ adwuma fɛfɛɛfɛ efisɛ animation biara de n’ani si agyapade soronko bi so: opacity, transform (translate/scale), ne nea ɛkeka ho Nanso ɛtɔ mmere bi a ntawntawdi wɔ hɔ, na ɛsɛ sɛ yehu nea enti ne sɛnea yebedi ho dwuma. Sɛ animations abien bɔ mmɔden sɛ wɔbɛma agyapade koro no ara ayɛ nkwa — sɛ nhwɛso no, abien no nyinaa yɛ animating scale anaasɛ abien no nyinaa animating opacity — nea ebefi mu aba no renyɛ nea wohwɛ kwan. Sɛnea wɔahyɛ no, animation no mu biako pɛ na wɔde di dwuma ankasa wɔ saa agyapade no so, a ɛyɛ nea etwa to wɔ animation list no mu. Eyi yɛ anohyeto a ɛwɔ sɛnea CSS di animations pii ho dwuma wɔ agyapade koro no ara so. Sɛ nhwɛso no, eyi rennyɛ adwuma sɛnea wɔahyɛ da ayɛ efisɛ kf-pulse animation nkutoo na ɛbɛyɛ adwuma. .bɔne-kombo { . animation a wɔde yɛ mfonini: kf-zoom 0.5s kɔ anim, . kf-pulse 1.2s a enni ano a ɛsesa; --kf-zoom-firi: 0.5; --kf-zoom-kɔ: 1.2; --kf-pulse-scale-fi: 0.8; --kf-pulse-scale-kɔ: 1.1; } .
Animation a Wɔde Ka Ho Ɔkwan a ɛyɛ mmerɛw na ɛyɛ tẽẽ a wobɛfa so adi animations pii a ɛka agyapade koro no ara ho dwuma ne sɛ wode animation-composition property bedi dwuma. Wɔ nhwɛsoɔ a ɛtwa toɔ a ɛwɔ atifi hɔ no mu no, kf-pulse animation no besi kf-zoom animation no ananmu, enti yɛrenhunu zoom a ɛdi kan no na yɛrennya scale a wɔhwɛ kwan sɛ ɛbɛyɛ 1.2. Sɛ yɛhyehyɛ animation-composition no sɛ yɛde bɛka ho a, yɛka kyerɛ browser no sɛ ɔmfa animations abien no nyinaa nka ho. Eyi ma yenya nea yɛpɛ. .afã-abien { . animation-nhyehyɛe: fa ka ho; } .
Hwɛ Pen Keyframes Tokens - Demo 8 [wɔde forked] a Amit Sheen yɛe no. Saa kwan yi yɛ adwuma yie wɔ nsɛm dodoɔ no ara a yɛpɛ sɛ yɛka nsunsuansoɔ bom wɔ agyapadeɛ korɔ no ara so. Ɛho wɔ mfasoɔ nso berɛ a ɛhia sɛ yɛde animations ne static property values bom. Sɛ nhwɛsoɔ no, sɛ yɛwɔ element bi a ɛde translate property no di dwuma de si baabi a yɛpɛ pɛpɛɛpɛ, na afei yɛpɛ sɛ yɛde kf-slide-in keyframes no yɛ animate no mu a, yɛnya nasty visible jump a animation-composition nni mu. Hwɛ Pen Keyframes Tokens - Demo 9 [wɔde forked] a Amit Sheen yɛe no. Bere a wɔahyɛ sɛ wɔde animation-composition bɛka ho no, wɔde animation no ne nea ɛwɔ hɔ dedaw no bom yiyedannan, enti element no tra hɔ na ɛma nkwa sɛnea wɔhwɛ kwan no. Animation Stagger a Wɔde Yɛ Nneɛma Ɔkwan foforo a wɔfa so di animations pii ho dwuma ne sɛ “wobɛwosow” wɔn — kyerɛ sɛ, wobɛhyɛ animation a ɛto so abien no ase kakra bere a nea edi kan no awie no. Ɛnyɛ ano aduru a ɛyɛ adwuma ma asɛm biara, nanso mfaso wɔ so bere a yɛwɔ entrance animation a animation a ɛkɔ so di akyi no. /* fade wɔ + opacity pulse mu */ . .abɔde a wɔde ma { . animation a wɔde yɛ mfonini: kf-fade-in 2s mmerɛw-firi, . kf-pulse 0.5s 2s mmerɛw-wɔ-firi a enni ano sesa; --kf-pulse-opacity-kɔ: 0.5; } .
Hwɛ Pen Keyframes Tokens - Demo 10 [wɔde forked] a Amit Sheen yɛe no. Nsɛm a Ɛfa Nhyehyɛe Ho Animations a yɛde yɛ adwuma no fã kɛse no ara de transform property no di dwuma. Mpɛn pii no, eyi yɛ nea ɛfata kɛse ara kwa. Ɛsan nso wɔ adwumayɛ mu mfasoɔ sɛdeɛ transform animations betumi ayɛ GPU-accelerated. Nanso sɛ yɛde nsakrae di dwuma a, ɛsɛ sɛ yegye tom sɛ nhyehyɛe a yɛde yɛ yɛn nsakrae no ho hia. Pii. Wɔ yɛn keyframes mu de besi nnɛ no, yɛde ankorankoro nsakrae adi dwuma. Sɛnea specs no kyerɛ no, wɔde eyinom di dwuma bere nyinaa wɔ nhyehyɛe a wɔahyɛ da ayɛ mu: nea edi kan no, element no nya translate, afei rotate, afei scale. Ntease wɔ eyi mu na ɛno ne nea yɛn mu dodow no ara hwɛ kwan. Nanso, sɛ yɛde transform property no di dwuma a, nhyehyɛe a wɔde kyerɛw functions no ne nhyehyɛe a wɔde di dwuma. Wɔ saa tebea yi mu no, sɛ yɛde biribi tu piksel 100 wɔ X-axis no so na afei yɛdannan no digrii 45 a, ɛnyɛ ade koro ne sɛ yedi kan dannan no digrii 45 na afei yɛdannan no piksel 100. /* Pink square: Di kan kyerɛ ase, afei dannan */ .nhwɛso-baako { . nsakrae: nkyerɛaseX (100px) dannan (45deg); } .
/* Green square: Di kan dannan, afei kyerɛ ase */ .nhwɛso-abien { . nsakrae: dannan (45deg) kyerɛ aseX (100px); } .
Hwɛ Pen Keyframes Tokens - Demo 11 [forked] a Amit Sheen yɛe no. Nanso sɛnea nsakrae nhyehyɛe no kyerɛ no, ankorankoro nsakrae nyinaa — biribiara a yɛde adi dwuma ama keyframes tokens no — si ansa na nsakrae no reyɛ adwuma. Ɛno kyerɛ sɛ biribiara a wode besi transform property no mu no bɛba wɔ animations no akyi. Nanso sɛ wo hyehyɛ, sɛ nhwɛso no, nkyerɛase bom ne kf-spin keyframes no a, nkyerɛase no bɛba ansa na animation no aba. Confused yet?! Eyi de tebea horow a static values betumi de aba ahorow aba ama animation koro no ara, te sɛ nea edidi so yi mu no:
/* Animation a wɔtaa de di dwuma ma spinners abien no nyinaa */ .spinner { . animation: kf-spin 1s linear a enni ano; } .
/* Pink spinner: kyerɛ ase ansa na woadannan (ankorankoro nsakrae) */ .spinner-pink { . nkyerɛaseɛ: 100% 50%; } .
/* Green spinner: dannan afei kyerɛ ase (dwumadi nhyehyɛe) */ .spinner-a ɛyɛ ahabammono { . nsakrae: kyerɛ ase(100%, 50%); } .
Hwɛ Pen Keyframes Tokens - Demo 12 [wɔde forked] a Amit Sheen yɛe no. Wubetumi ahu sɛ spinner a odi kan (pink) no nya nkyerɛase a ɛkɔ so ansa na kf-spin no akɔ so, enti edi kan tu kɔ ne beae na afei ɛkyinkyini. Spinner a ɛtɔ so mmienu (green) nya translate() function a ɛba wɔ ankorankoro nsakraeɛ no akyi, enti element no di kan twitwa, afei ɛkɔ relative to ne current angle, na yɛnya saa wide orbit effect no. Dabi, eyi nyɛ bɔne. Ɛyɛ saa nneɛma a ɛsɛ sɛ yehu fa CSS ho na yɛma ɛtra yɛn adwenem bere a yɛreyɛ adwuma wɔ animations pii anaa nsakrae pii ho no mu biako pɛ. Sɛ ɛho hia a, wobɛtumi nso ayɛ kf-spin-alt keyframes foforɔ a ɛdannan elements denam rotate() dwumadie no so. Kankyee a wɔatew so Na berɛ a yɛreka keyframes foforɔ ho asɛm no, yɛrentumi mmu yɛn ani ngu “no animation” option no so. Mfaso kɛse biako a ɛwɔ keyframes tokens a wɔde di dwuma so ne sɛ wobetumi atow accessibility wɔ mu, na nokwarem no ɛyɛ mmerɛw koraa sɛ wɔbɛyɛ. Ɛdenam yɛn keyframes a yɛbɛyɛ a yɛde akwanside a ɛwɔ yɛn adwenem so no, yebetumi ahwɛ ahu sɛ wɔn a wɔde di dwuma a wɔpɛ sɛ wɔtew kankyee so no benya osuahu a ɛyɛ mmerɛw, a ɛnyɛ nea ɛtwetwe adwene pii, a adwuma foforo biara nni mu anaasɛ mmara a wɔyɛ no abien. Nkyerɛase pɔtee a ɛwɔ “Reduced Motion” mu no betumi asesa kakra afi animation biako so akɔ foforo so, ne afi adwuma bi so akɔ foforo so, nanso nsɛm kakraa bi a ɛho hia a ɛsɛ sɛ wode sie w’adwenem ni: Keyframes a Wɔreyɛ no Muting Bere a wobetumi ama mfonini ahorow bi ayɛ mmerɛw anaasɛ wɔama ayɛ brɛoo no, afoforo wɔ hɔ a ɛsɛ sɛ ɛyera koraa bere a wɔsrɛ sɛ wɔtew kankyee so no. Pulse animations yɛ nhwɛso pa. Sɛ yɛbɛhwɛ sɛ saa animations yi renkɔ so wɔ reduced motion mode mu a, yebetumi abɔ mu kɛkɛ wɔ media query a ɛfata mu.
@media (ɔpɛ-wɔatew-kankyee: ɔmpɛ biara) { @keyfrmaes kf-nsuo a ɛyɛ den { efi { . nsenia: var (--kf-pulse-nsusuwii-fi, 1); opacity: var (--kf-pulse-opacity-fi, 1); } . to { . nsenia: var (--kf-pulse-nsusuwii-kɔ, 1); opacity a ɛnyɛ nea ɛda adi:var (--kf-pulse-opacity-kɔ, 1); } . } . } .
Wei hwɛ hu sɛ wɔn a wɔde di dwuma a wɔde prefers-reduced-motion ahyɛ hɔ sɛ wɔbɛtew so no renhu animation no na wobenya osuahu a ɛne wɔn pɛ hyia. Ntɛm ara na In Keyframes bi wɔ hɔ a yɛrentumi nyi mfi hɔ kɛkɛ, te sɛ entrance animations. Ɛsɛ sɛ bo a ɛsom no sesa, ɛsɛ sɛ ɛma nkwa; anyɛ saa a, element no rennya gyinapɛn ahorow a ɛfata. Nanso wɔ kankyee a wɔatew so mu no, ɛsɛ sɛ nsakrae yi fi bo a edi kan no so yɛ ntɛm ara. Sɛ yɛbɛtumi ayɛ yei a, yɛbɛkyerɛkyerɛ keyframes foforɔ bi a ɛsom boɔ no huruwa ntɛm ara kɔ awieeɛ tebea no mu. Eyinom bɛyɛ yɛn default keyframes. Afei, yɛde keyframes a wɔtaa de di dwuma no bɛka media query for prefers-reduced-motion set to no-preference mu, te sɛ nhwɛsoɔ a atwam no. /* pop in ntɛm ara ma wɔatew kankyee */ @keyframes kf-a ɛyɛ kɛse { efi, kɔ { . nsenia: var (--kf-zoom-kɔ, 1); } . } .
@media (ɔpɛ-wɔatew-kankyee: ɔmpɛ biara) { /* Mfitiaseɛ zoom keyframes */ @keyframes kf-a ɛyɛ kɛse { efi { . nsenia: var (--kf-zoom-fi, 0.8); } . to { . nsenia: var (--kf-zoom-kɔ, 1); } . } . } .
Saa kwan yi so no, wɔn a wɔde di dwuma a wɔpɛ sɛ wɔtew kankyee so no behu sɛ element no pue ntɛm ara wɔ ne tebea a etwa to mu, bere a obiara nya nsakrae a ɛyɛ anigye no. Ɔkwan a Wɔfa so Yɛ Dwo Nsɛm bi wɔ hɔ a yɛpɛ sɛ yɛkɔ so yɛ kankyee bi, nanso ɛyɛ mmerɛw na ɛyɛ komm sen mfitiase animation no. Sɛ nhwɛso no, yebetumi de fade-in a ɛyɛ brɛoo asi bounce entrance ananmu.
@keyframes kf-a ɛbɔ { /* Fade-in a ɛyɛ mmerɛw ma kankyee a wɔatew so */ } .
@media (ɔpɛ-wɔatew-kankyee: ɔmpɛ biara) { @keyframes kf-a ɛbɔ { /* Mfitiaseɛ bounce keyframes */ } . } .
Seesei, wɔn a wɔde di dwuma a wɔama wɔn kankyee a wɔatew so no da so ara nya sɛnea wɔte nka, nanso wonni kankyee a emu yɛ den a ɛyɛ bounce anaa elastic animation. Bere a wɔde adansi nneɛma no asi hɔ no, asɛmmisa a edi hɔ ne sɛnea wɔbɛma ayɛ adwuma ankasa no fã. Keyframes a ɛyɛ mmerɛw a wɔbɛkyerɛw no yɛ ade biako, nanso sɛ mɛma wɔatumi de ho ato so wɔ adwuma kɛse bi mu a, ɛhwehwɛ akwan kakraa bi a na ɛsɛ sɛ misua wɔ ɔkwan a ɛyɛ den so. Akwan a Wɔde Di Dwuma & Nneyɛe Pa Sɛ yɛnya nwomakorabea a ɛyɛ den a ɛwɔ keyframes tokens wie a, asɛnnennen ankasa ne sɛdeɛ yɛde bɛba da biara da adwuma mu.
Sɔhwɛ no ne sɛ wobɛtow keyframes nyinaa agu prɛko pɛ na wɔapae mu aka sɛ wɔadi ɔhaw no ho dwuma, nanso wɔ nneyɛe mu no mahu sɛ nea eye sen biara no fi nkakrankakra a wogye tom no mu. Fi ase de mfonini ahorow a wɔtaa de di dwuma te sɛ fade anaa slide. Eyinom yɛ nkonimdi a ɛnyɛ den a ɛkyerɛ mfaso a ɛwɔ so ntɛm ara a enhia sɛ wɔsan kyerɛw nneɛma akɛse. Edin a wɔbɔ yɛ asɛm foforo a ɛsɛ sɛ wɔde adwene si so. Prefix anaa dinbea a ɛkɔ so daa ma ɛda adi pefee sɛ animations bɛn na ɛyɛ token ne nea ɛyɛ local one-offs. Ɛsan nso siw nhyiam a ɛba wɔ akwanhyia mu ano na ɛboa kuw no mufo foforo ma wohu nhyehyɛe a wɔkyɛ no prɛko pɛ. Nwoma ho hia te sɛ mmara no ankasa. Nsɛm tiawa a wobɛka wɔ keyframes token biara atifi mpo betumi agye nnɔnhwerew pii a wode bɛsusuw nneɛma ho akyiri yi. Ɛsɛ sɛ developer bi tumi bue tokens fael no, scan hwehwɛ effect a wohia, na ɔde di dwuma nhyehyɛe no kɔpi tẽẽ kɔ wɔn component no mu. Nsakrae a wɔyɛ no ne nea ɛma ɔkwan yi fata mmɔdenbɔ. Ɛdenam amanne ahorow a ntease wom a yɛda no adi so no, yɛma akuw ahorow no kwan ma wɔyɛ nsakrae wɔ animation no mu a wɔrensɛe nhyehyɛe no. Bere koro no ara mu no, bɔ mmɔden sɛ worenyɛ nea ɛyɛ den dodo. Fa nhama a ɛho hia no ma na ma wɔn a wɔaka no nnya adwene. Awiei koraa no, kae sɛnea wobetumi anya bi. Ɛnyɛ animation biara na ehia sɛ wɔde kankyee foforo a wɔatew so, nanso pii hia. Baking wɔ saa nsakraeɛ yi mu ntɛm kyerɛ sɛ ɛnsɛ sɛ yɛsan siesie akyiri yi da, na ɛkyerɛ ahwɛyie bi a yɛn a yɛde di dwuma no bɛhyɛ no nsow sɛ wɔanka ho asɛm da mpo a.
Wɔ me suahu mu no, keyframes tokens a yɛbɛfa no sɛ yɛn design tokens adwumayɛ fã no ne nea ɛma ɛbata ho. Sɛ wɔde si hɔ pɛ a, wogyae te nka sɛ wɔyɛ nneɛma titiriw na wɔbɛyɛ kasa a wɔde yɛ nneɛma no fã, sɛnea ade no tu na ɛyɛ n’ade no ho ntrɛwmu a efi awosu mu. Nsɛm a Wɔde Bɛkyekyere Animations betumi ayɛ nneɛma a ɛyɛ anigye sen biara wɔ adansi interfaces mu biako, nanso sɛ nhyehyɛe nni hɔ a, ebetumi nso abɛyɛ abasamtu fibea akɛse no mu biako. Ɛdenam keyframes a wobɛfa no sɛ token so no, wofa biribi a ɛtaa yɛ basabasa na ɛyɛ den sɛ wobɛhwɛ so na woadan no nhyehyɛe a emu da hɔ na wotumi hyɛ ho nkɔm. Ɛnyɛ sɛ wode mmara nkyerɛwde kakraa bi sie kɛkɛ na mfaso ankasa wɔ so. Ɛyɛ ahotoso mu sɛ sɛ wode fade, slide, zoom, anaa spin di dwuma a, wunim sɛnea ɛbɛyɛ n’ade wɔ adwuma no nyinaa mu yiye. Ɛwɔ nsakrae a efi amanne agyapade mu ba a nsakrae a enni awiei basabasayɛ nni mu no mu. Na ɛwɔ akwan a wɔfa so kɔ fapem no mu sen sɛ wɔde bɛka ho sɛadwene a wɔde susuw nneɛma ho wɔ akyi. Mahunu sɛ saa adwene yi yɛ adwuma wɔ akuo ahodoɔ ne codebases ahodoɔ mu, na nhwɛsoɔ no yɛ pɛ bere nyinaa. Sɛ token ahorow no si hɔ wie a, keyframes gyae sɛ ɛyɛ anifere a wɔaboaboa ano a apete na ɛbɛyɛ design kasa no fã. Wɔma ɛte sɛ nea wɔahyɛ da ayɛ ade no, ɛyɛ nea ɛkɔ so daa, na ɛte ase. Sɛ wofa ade biako fi asɛm yi mu a, ma ɛnyɛ eyi: animations fata ahwɛyiye ne nhyehyɛe koro no ara a yɛde ma kɔla, nkyerɛwee, ne ntam kwan dedaw no. Sika ketewaa bi a wode bɛto keyframes tokens mu no tua ka bere biara a wo interface no bɛkɔ.
