Iladawanmo daytoy: makikaduaka iti baro a proyekto, agdive-ka iti codebase, ket iti las-ud ti umuna a sumagmamano nga oras, matakuatam ti maysa a banag a makapaupay a pamiliar. Naiwaras iti intero nga stylesheet, makasarakka kadagiti adu a depinasion ti @keyframes para kadagiti isu met laeng a batayan nga animasion. Tallo a nagduduma a fade-in effect, dua wenno tallo a panagduduma ti slide, sumagmamano a zoom animation, ken di kumurang a dua a nagduduma nga spin animation ta, bueno, apay a saan? @keyframes pulso { . manipud iti { . timbangan: 1; } . nga { . sukog: 1.1; } . } .
@keyframes dakdakkel-pulso { 0%, 20%, 100% nga { timbangan: 1; } . 10%, 40% nga { sukog: 1.2; } . } .
No kasla pamiliar daytoy nga eksena, saankan nga agmaymaysa. Iti kapadasak iti ballasiw dagiti nadumaduma a proyekto, maysa kadagiti kaaduan a kanayon a napardas a panagballigi a maitedko ket ti panagtitipon ken panangistandard kadagiti keyframe. Nagbalinen a mapagtalkan a padron isu a segseggaak itan daytoy a panagdalus kas maysa kadagiti umuna nga aramidko iti aniaman a baro a codebase. Ti Lohika iti Likud Ti Gulo Naan-anay ti kaipapanan daytoy a redundancy no panunotem dayta. Agus-usartayo amin kadagiti agpapada a kangrunaan nga animasion iti inaldaw a trabahotayo: dagiti panagkupas, panag-slide, panag-zoom, panag-spin, ken dadduma pay a gagangay nga epekto. Dagitoy nga animasion ket medyo diretso, ken nalaka a mangsapsaplit ti napardas a depinasion ti @keyframes tapno maaramid ti trabaho. No awan ti sentral a sistema ti animasion, dagiti agparparang-ay ket natural nga isuratda dagitoy a keyframe manipud iti rugi, a dida ammo a dagiti kapada nga animasion ket addan iti sabali a lugar iti codebase. Daytoy ket nangruna a gagangay no agtartrabaho kadagiti arkitektura a naibatay iti paset (a kaaduan kadatayo ket ar-aramiden kadagitoy nga aldaw), a kas dagiti grupo ket masansan nga agtrabaho a paralelo iti ballasiw dagiti nadumaduma a paset ti aplikasion. Ti resultana? Animation ti riribuk. Ti Bassit a Problema Dagiti nalawag unay nga isyu iti panagduplikar dagiti keyframe ket ti nasayang nga oras ti panagrang-ay ken ti saan a kasapulan a panagbulos ti kodigo. Dagiti adu a depinasion ti keyframe ket kayatna a sawen ti adu a lugar a mapabaro no agbaliw dagiti kasapulan. Masapul kadi nga i-adjust ti timing ti fade animation-mo? Masapul nga aganupmo iti tunggal instance iti ballasiw ti codebase-mo. Kayatmo kadi nga i-standardize dagiti easing functions? Naimbag a gasat a makasarak iti amin a panagduduma. Daytoy a panangpaadu kadagiti punto ti pannakamantener pagbalinenna uray dagiti simple nga update ti animation a makabusbos iti panawen. Ti Dakdakkel a Problema Daytoy a panagduplikar ti keyframes ket mangpataud ti ad-adu nga amang a nasikap a parikut nga aglemlemmeng iti baba ti rabaw: ti sangalubongan a silo ti sakup. Uray no agtartrabaho kadagiti arkitektura a naibatay iti paset, dagiti keyframe ti CSS ket kanayon a naikeddeng iti sangalubongan a sakop. Kayatna a sawen nga amin a keyframe ket agaplikar kadagiti amin a paset. Kanayon. Wen, ti animasionmo ket saan a nasken nga agus-usar kadagiti keyframe nga inkeddengmo iti pasetmo. Daytoy ket agus-usar kadagiti maudi a keyframe a maipada iti dayta nga eksakto a kapada a nagan a naikarga iti sangalubongan a sakop. No la ketdi agpapada amin a keyframe-mo, mabalin a kasla bassit nga isyu daytoy. Ngem iti kanito a kayatmo nga i-customize ti animation para iti espesipiko a kaso ti panagusar, marigatanka, wenno nakarkaro pay, sika ti makagapu kadagita. Basta saan nga agtrabaho ti animation-mo gapu ta ti sabali a paset a naikarga kalpasan ti kukuam, a mang-overwrite kadagiti keyframe-mo, wenno ti pasetmo ket maudi a makarga ken aksidente a mangbalbaliw iti kababalin ti animation para iti tunggal sabali a paset babaen ti panangusar iti nagan dayta a keyframe, ket mabalin a dimo pay ketdi mapupuotan dayta. Adtoy ti simple a pagarigan a mangipakita iti parikut: .paset-maysa { . /* dagiti estilo ti paset */ . animation: pulso 1s nalaka-in-out awan patinggana a kasukat; } .
/* daytoy a depinasion ti @keyframes ket saan nga agtrabaho */ @keyframes pulso { . manipud iti { . timbangan: 1; } . nga { . sukog: 1.1; } . } .
/* naud-udi iti kodigo... */
.paset-dua { . /* dagiti estilo ti paset */ . animation: pulso 1s nalaka-iti-ruar nga awan patinggana; } .
/* daytoy a keyframes ket agaplikar kadagiti agpada a paset */ @keyframes pulso { . 0%, 20%, 100% nga { timbangan: 1; } . 10%, 40% nga { sukog: 1.2; } . } .
Agpada a dagiti paset ket agus-usar ti agpada a nagan ti animasion, ngem ti maikadua a depinasion ti @keyframes ket mangisurat ti umuna. Ita agpada a ti paset-maysa ken paset-dua ket agusardanto kadagiti maikadua a keyframe, urayno ania a paset ti nangikeddeng no ania dagiti keyframe. Kitaen ti Pen Keyframes Tokens - Demo 1 [natinidor] babaen ni Amit Sheen. Ti kadaksan a paset? Daytoy ket masansan nga agtrabaho a naan-anay iti lokal a panagrang-ay ngem misterioso a maburak iti produksion no dagiti proseso ti panagbangon ket mangbalbaliw ti urnos ti panagkarga dagiti estilo a panidmo. Agpatinggaka kadagiti animasion a naiduma ti kababalinda depende no ania dagiti paset a maikarga ken no ania a panagsasaruno. Ti Solusion: Nagkaykaysa a Keyframes Ti sungbat iti daytoy a riribuk ket nakaskasdaaw a simple: dagiti nasakbay a naikeddeng a dinamiko a keyframe a naidulin iti naibingbingay nga stylesheet. Imbes a bay-an ti tunggal maysa a paset a mangikeddeng kadagiti bukodna nga animasion, mangpartuatkami kadagiti sentral a keyframe a nasayaat ti pannakadokumento, nalakausaren, mataginayon, ken maibagay kadagiti espesipiko a kasapulan ti proyektom. Panunotem dayta kas keyframes token. No kasano nga agus-usartayo kadagiti token para kadagiti kolor ken panagsisina, ken adu kadatayo ti dati nga agus-usar kadagiti token para kadagiti tagikua ti animasion, kas ti kapaut ken panangpalaka kadagiti panagandar, apay a ditay agusar kadagiti token para kadagiti keyframe pay? Daytoy nga asitgan ket mabalin a makitipon a natural iti ania man nga agdama a panagayus ti trabaho ti token ti disenio nga us-usarenmo, bayat a solbaren agpadpada ti bassit a parikut (panagduplikar ti kodigo) ken ti dakdakkel a parikut (dagiti panagsusuppiat ti sangalubongan a sakup) iti maysa a panagdaliasat. Prangka ti ideya: mangparnuay iti maymaysa a gubuayan ti kinapudno para iti amin a gagangay nga animasiontayo. Daytoy a naibingbingay nga stylesheet ket naglaon kadagiti naannad a naaramid a keyframe a mangsaklaw kadagiti padron ti animasion nga aktual nga us-usaren ti proyektomi. Awanen ti panangpugto no addan ti fade animation iti sadinoman iti codebase-tayo. Awanen ti aksidente a panangisurat kadagiti animasion manipud kadagiti dadduma a paset. Ngem adtoy ti tulbek: dagitoy ket saan laeng nga static copy-paste animations. Nadisenio dagitoy nga agbalin a dinamiko ken maibagay babaen kadagiti kostumbre a tagikua ti CSS, a mangipalubos kadakami a mangtaginayon iti kinaurnos bayat nga adda pay laeng ti kinalukneng a mangbalbaliw kadagiti animasion kadagiti espesipiko a kaso ti panagusar, kas no kasapulam ti dakdakkel bassit a “pulso” nga animasion iti maysa a lugar. Panagbangon Ti Umuna a Keyframes Token Maysa kadagiti umuna a nababa ti panagbitinna a prutas a rumbeng a tamingentayo ket ti “fade-in” nga animation. Iti maysa kadagiti nabiit pay a proyektok, nasarakak ti nasurok a sangadosena a nagsisina a depinasion ti fade-in, ken wen, amin dagitoy ket basta nang-animate ti opacity manipud iti 0 aginggana iti 1. Isu nga, mangaramidtayo iti baro nga stylesheet, awagantayo iti kf-tokens.css, i-importtayo iti proyektotayo, ken ikabiltayo dagiti keyframetayo nga addaan kadagiti umno a komento iti uneg daytoy. /* dagiti keyframes-tokens.css */ .
/* * Fade In - agkupas nga animasion ti iseserrek * Panagusar: animasion: kf-fade-in 0.3s nalaka-a-ruar; */ @keyframes kf-agkupas-iti { . manipud iti { . opacity: 0; } . nga { . opacity: 1; } . } .
Daytoy a maymaysa a deklarasion ti @keyframes ket mangsukat amin dagidiay a naiwaras a fade-in nga animasion iti ballasiw ti codebasetayo. Nadalus, simple, ken agaplikar iti sangalubongan. Ket ita ta addaantayon iti daytoy a token a naikeddeng, mabalintayo nga usaren daytoy manipud iti ania man a paset iti intero a proyektotayo: .modal nga { . animasion: kf-fade-in 0.3s nalaka-a-ruar; } .
.tip ti ramit { . animasion: kf-fade-in 0.2s nalaka-iti-ruar; } .
.pakaammo { . animasion: kf-fade-in 0.5s nalaka-a-ruar; } .
Kitaen ti Pen Keyframes Tokens - Demo 2 [natinidor] ni Amit Sheen. Note: Us-usarenmi ti kf- prefix kadagiti amin a naganmi a @keyframes. Daytoy a pangrugian ket agserbi a kas maysa nga espasio ti nagan a manglapped kadagiti panagsusuppiat ti panagnagan kadagiti addan nga animasion iti proyekto ken mangaramid a dagus a nalawag a dagitoy a keyframe ket naggapu manipud iti filetayo kadagiti token ti keyframes. Panagaramid iti Dinamiko a Slide Nasayaat ti panagtrabaho dagiti kf-fade-in keyframes gapu ta simple ken bassit ti lugar a mangriribuk kadagiti bambanag. Iti dadduma nga animasion, nupay kasta, kasapulan nga ad-adda a dinamikotayo, ken ditoy ket mabalintayo nga aramaten ti dakkel a bileg dagiti kostumbre a tagikua ti CSS. Ditoy a talaga nga agsilnag dagiti keyframe token no idilig kadagiti naiwaras nga estatiko nga animasion. Alaentayo ti gagangay nga eksena: dagiti “slide-in” nga animasion. Ngem ag-slide in manipud sadino? 100px manipud iti kannawan? 50% manipud iti kannigid? Rumbeng kadi a sumrek dayta manipud iti ngato ti iskrin? Wenno mabalin nga ag-float in manipud iti baba? Adu unay dagiti posibilidad, ngem imbes a mangpartuat kadagiti agsina a keyframe para iti tunggal maysa a direksion ken tunggal maysa a panagduduma, mabalintayo ti mangbangon ti maysa a nalaka a maibagay a token a makibagay kadagiti amin nga eksena: /* * Slide In - direksional nga animasion ti slide * Usaren ti --kf-slide-from tapno makontrol ti direksion * Default: ag-slide manipud iti kannigid (-100%) . * Panagusar: * animasion: kf-slide-in 0.3s nalaka-a-ruar; * --kf-slide-manipud: -100px 0; // slide manipud kannigid * --kf-slide-manipud: 100px 0; // slide manipud kannawan * --kf-slide-manipud: 0 -50px; // slide manipud ngato */
@keyframes kf-ag-slide-in { . manipud iti { . ipatarus: var (--kf-slide-manipud, -100% 0); } . nga { . ipatarus: 0 0; } . } .
Ita mabalintayo nga usaren daytoy maymaysa a @keyframes a token para iti ania man a direksion ti slide babaen laeng ti panangbalbaliw ti --kf-slide-from a kostumbre a tagikua: .sidebar { . animasion: kf-slide-in 0.3s nalaka-a-ruar; /* Agus-usar ti default a pateg: dagiti slide manipud iti kannigid */ } .
.pakaammo { . animasion: kf-slide-in 0.4s nalaka-a-ruar; --kf-slide-manipud: 0 -50px; /* slide manipud ngato */ } .
.modal nga { . animasion: . kf-agkupas-iti 0.5s, . kf-slide-in 0.5s kubiko-bezier (0.34, 1.56, 0.64, 1); --kf-slide-manipud: 50px 50px; /* slide manipud iti baba-kannawan */ } .
Daytoy a pamay-an ket mangted kadatayo iti di kapapati a kinalukneng bayat a mataginayon ti kinaurnos. Maysa a deklarasion ti keyframe, awan patinggana a posibilidad. Kitaen ti Pen Keyframes Tokens - Demo 3 [natinidor] ni Amit Sheen. Ket no kayattayo nga ad-adda a nalaka a maibagay dagiti animasiontayo, a mangipalubos met kadagiti “slide-out” nga epekto, mabalintayobasta manginayon ti --kf-slide-to a kostumbre a sanikua, a kapada ti makitatayo iti sumaganad a benneg. Dagiti Keyframe ti Bidireksional a Zoom Ti sabali pay a gagangay nga animasion a madoble iti ballasiw dagiti proyekto ket dagiti epekto ti “zoom”. Basta ti di madmadlaw a scale-up para kadagiti mensahe ti toast, dramatiko a zoom-in para kadagiti modals, wenno naalumamay nga scale-down effect para kadagiti heading, adda iti sadinoman dagiti zoom animation. Imbes a mangpartuat kadagiti agsina a keyframe para iti tunggal maysa a pateg ti sukog, mangbangontayo iti maysa a nalaka a maibagay a grupo dagiti kf-zoom keyframe:
/* * Zoom - animasion ti sukog * Usaren ti --kf-zoom-from ken --kf-zoom-to tapno makontrol dagiti pateg ti sukog * Default: ag-zoom manipud 80% agingga iti 100% (0.8 agingga iti 1) . * Panagusar: * animasion: kf-zoom 0.2s nalaka-a-ruar; * --kf-panag-zoom-manipud: 0.5; --kf-ag-zoom-iti: 1; // zoom manipud 50% agingga iti 100% . * --kf-panag-zoom-manipud: 1; --kf-ag-zoom-iti: 0; // zoom manipud 100% agingga iti 0% . * --kf-panag-zoom-manipud: 1; --kf-ag-zoom-iti: 1.1; // zoom manipud 100% agingga iti 110% . */
@dagiti keyframes kf-panag-zoom { . manipud iti { . sukog: var (--kf-zoom-manipud, 0.8); } . nga { . sukog: var (--kf-ag-zoom-iti, 1); } . } .
Babaen ti maysa a depinasion, maragpattayo ti ania man a panagduduma ti zoom a kasapulantayo: .toast { . animasion: . kf-slide-in 0.2s, . kf-zoom 0.4s nalaka nga agruar; --kf-slide-manipud: 0 100%; /* slide manipud ngato */ /* Agus-usar ti default a panag-zoom: dagiti timbangan manipud iti 80% aginggana iti 100% */ } .
.modal nga { . animasion: kf-zoom 0.3s kubiko-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-manipud: 0; /* dramatiko a panag-zoom manipud 0% agingga iti 100% */ } .
.paulo { . animasion: . kf-agkupas-iti 2s, . kf-zoom 2s nalaka nga ag-in; --kf-panag-zoom-manipud: 1.2; --kf-ag-zoom-iti: 0.8; /* naalumamay nga scale down */ . } .
Ti default a 0.8 (80%) ket naan-anay nga agtrabaho para kadagiti kaaduan nga elemento ti UI, a kas dagiti mensahe ti toast ken dagiti kard, bayat a nalaka pay laeng a maibagay para kadagiti naisangayan a kaso. Kitaen dagiti Token ti Pen Keyframes - Demo 4 [natinidor] ni Amit Sheen. Mabalin a nadlawmo ti maysa a makapainteres kadagiti nabiit pay a pagarigan: pinagtiponmi dagiti animasion. Maysa kadagiti kangrunaan a pagimbagan ti panagtrabaho kadagiti @keyframes token ket nadisenio dagitoy tapno agtipon a nasayaat iti tunggal maysa. Daytoy a naannayas a komposision ket nairanta, saan nga aksidente. Pagsasaritaantayo ti komposision ti animasion iti ad-adu a detalye inton agangay, agraman no sadino a mabalin nga agbalinda a problemado, ngem kaaduan a kombinasion ket diretso ken nalaka nga ipatungpal. Pakaammo: Bayat ti panangisuratko iti daytoy nga artikulo, ken mabalin a gapu iti panangisuratko iti dayta, nasarakak ti bagik a mangpanunot manen iti intero nga ideya dagiti animasion ti iseserrek. Iti amin a nabiit pay a panagrang-ay iti CSS, kasapulantayo pay laeng kadi dagitoy a pulos? Naimbag laengen ta sinukimat ni Adam Argyle dagiti isu met laeng a saludsod ket naraniag nga inyebkasna dagitoy iti blog-na. Saan a maikontra daytoy iti naisurat ditoy, ngem mangiparang iti pamay-an a maikari nga ikonsiderar, nangruna no agpannuray unay dagiti proyektom kadagiti animasion ti iseserrek. Agtultuloy nga Animasion Bayat a dagiti animasion ti iseserrek, kas iti “fade”, “slide”, ken “zoom” ket maminsan a mapasamak ken kalpasanna agsardeng, dagiti agtultuloy nga animasion ket ag-loop iti di nakedngan tapno maallukoy ti atension wenno mangipakita iti agtultuloy nga aktibidad. Ti dua a gagangay nga agtultuloy nga animasion a masabetko ket ti “spin” (para kadagiti loading indicators) ken “pulse” (para iti panangitampok kadagiti napateg nga elemento). Dagitoy nga animasion ket mangiparang kadagiti naisangsangayan a karit no maipapan iti panagpartuat kadagiti keyframe token. Saan a kas dagiti animasion ti iseserrek a kadawyan a mapan manipud iti maysa nga estado aginggana iti sabali, dagiti agtultuloy nga animasion ket kasapulan a nangato a maibagay kadagiti padron ti kababalinda. Ti Doktor ti Spin Kasla agus-usar ti tunggal proyekto iti adu nga spin animations. Dadduma ti agturong iti agpakannawan ti relo, dadduma ti agpakannawan ti relo. Dadduma ti agaramid iti maymaysa a 360-degree a panagrikus, dadduma ti mangaramid iti adu a panaglikos para iti naparpartak nga epekto. Imbes a mangpartuat kadagiti agsina a keyframe para iti tunggal panagduduma, mangbangontayo iti maysa a nalaka a maibagay a panagiturong a mangasikaso kadagiti amin nga eksena:
/* * Spin - animasion ti panagrikus * Usaren ti --kf-spin-from ken --kf-spin-to tapno makontrol ti sakop ti panagrikus * Usaren ti --kf-spin-turns tapno makontrol ti kaadu ti panagrikus * Default: agturong manipud iti 0deg agingga iti 360deg (1 a naan-anay a panagrikus) . * Panagusar: * animasion: kf-spin 1s linear nga awan patinggana; * --kf-ag-spin-agturong: 2; // 2 a naan-anay a panagrikus * --kf-spin-manipud: 0deg; --kf-agtuyok-iti: 180deg; // kagudua ti panagrikus * --kf-spin-manipud: 0deg; --kf-agtuyok-iti: -360deg; // kontra-relo nga agpakannawan */
@dagiti tulbek a kuadro kf-spin { . manipud iti { . agturong: var (--kf-spin-manipud, 0deg); } . nga { . agturong: calc (var (--kf-spin-manipud, 0deg) + var (--kf-spin-iti, 360deg) * var (--kf-spin-turns, 1)); } . } .
Ita mabalintayo ti mangpartuat iti aniaman a spin variation a kayattayo:
.panagkarga-spinner { . animasion: kf-spin 1s linear nga awan patinggana; /* Usaren ti default: agturong manipud iti 0deg aginggana iti 360deg */ } .
.napartak nga agkarga { . animation: kf-spin 1.2s nalaka-iti-ruar nga awan patinggana a kasukat; --kf-ag-spin-agturong: 3; /* 3 a naan-anay a panagrikus para iti tunggal direksion iti tunggal siklo*/ } .
.addang-addang-baliktad { . animation: kf-spin 1.5s nga addang(8) awan patinggana; --kf-agtuyok-iti: -360deg; /* kontra-relo */ . } .
.nasipnget-panag-wiggle { . animation: kf-spin 2s nalaka-iti-ruar nga awan patinggana a kasukat; --kf-spin-manipud: -16deg; --kf-agtuyok-iti: 32deg; /* wiggle 36 deg: iti nagbaetan ti -18deg ken +18deg */ } .
Kitaen ti Pen Keyframes Tokens - Demo 5 [natinidor] ni Amit Sheen. Ti kinapintas daytoy a pamay-an ket dagiti isu met laeng a keyframe ket agtrabaho para iti panagkarga kadagiti spinner, dagiti agturong nga ikono, dagiti epekto ti wiggle, ken uray pay dagiti komplikado a multi-turn nga animasion. Ti Paradox ti Pulso Narikrikut dagiti pulse animation gapu ta mabalinda a “pulse” ti nadumaduma a properties. Dadduma ti mangpulso iti timbangan, dadduma ti mangpulso iti opacity, ken dadduma ti pulso a tagikua ti kolor a kas iti kinaraniag wenno saturation. Imbes a mangpartuat kadagiti agsina a keyframe para iti tunggal maysa a sanikua, mabalintayo ti mangpartuat kadagiti keyframe nga agtrabaho iti ania man a tagikua ti CSS. Adda ditoy ti pagarigan ti pulse keyframe nga addaan kadagiti pagpilian ti scale ken opacity:
/* * Pulso - pulso nga animasion * Usaren ti --kf-pulse-scale-from ken --kf-pulse-scale-to tapno makontrol ti sakop ti sukog * Usaren ti --kf-pulse-opacity-from ken --kf-pulse-opacity-to tapno makontrol ti sakop ti opacity * Default: awan ti pulso (amin a pateg 1) . * Panagusar: * animation: kf-pulse 2s nalaka-iti-ruar nga awan patinggana a kasukat; * --kf-pulso-ti-rukod-manipud: 0.95; --kf-pulso-ti-rukod-agingga: 1.05; // pulso ti timbangan * --kf-pulso-opacity-manipud: 0.7; --kf-pulso-opacity-iti: 1; // pulso ti opacity */
@dagiti keyframes kf-pulso { . manipud iti { . sukog: var (--kf-pulso-ti-rukod-manipud, 1); opacity: var (--kf-pulso-opacity-manipud, 1); } . nga { . sukog: var (--kf-pulso-ti sukog-iti, 1); opacity: var (--kf-pulso-opacity-iti, 1); } . } .
Daytoy ket mangpartuat ti nalaka a maibagay a pulso a mabalin a mangpabiag kadagiti adu a tagikua: .awag-iti-tignay { . animasion: kf-pulso 0.6s awan patinggana a kasukat; --kf-pulso-opacity-manipud: 0.5; /* pulso ti opacity */ . } .
.pakaammo-tuldok { . animation: kf-pulse 0.6s nalaka-iti-ruar nga awan patinggana a kasukat; --kf-pulso-ti-rukod-manipud: 0.9; --kf-pulso-ti-rukod-iti: 1.1; /* pulso ti timbangan */ . } .
.teksto-i-highlight { . animation: kf-pulse 1.5s nalaka-a-ruar nga awan patinggana; --kf-pulso-ti-rukod-manipud: 0.8; --kf-pulso-opacity-manipud: 0.2; /* sukog ken pulso ti opacity */ . } .
Kitaen ti Pen Keyframes Tokens - Demo 6 [natinidor] ni Amit Sheen. Daytoy a maymaysa a kf-pulse keyframe ket makabael a mangasikaso iti amin manipud kadagiti di madmadlaw a panangawis iti atension agingga kadagiti dramatiko a tampok, amin bayat a nalaka a maibagay. Narang-ay a Panagpalag-an Maysa kadagiti naindaklan a banag maipapan iti panagusar kadagiti keyframes token ket no kasano kalalaka a palawaen ti animation library-tayo ken mangipaay kadagiti epekto a saan a marigatan ti kaaduan a developer nga agsurat manipud iti rugi, kas iti elastic wenno bounce. Adda ditoy ti pagarigan ti simple a “bounce” keyframes token nga agus-usar ti --kf-bounce-from a kostumbre a sanikua tapno makontrol ti kangato ti panagluksaw. /* * Bounce - agsalsaltek nga animasion ti iseserrek * Usaren ti --kf-bounce-from tapno makontrol ti kangato ti panagluksaw * Default: agluksaw manipud iti 100vh (off screen) . * Panagusar: * animasion: kf-bounce 3s nalaka-iti; * --kf-ag-bounce-manipud: 200px; // agluksaw manipud iti 200px a kangato */
@keyframes kf-ag-bounce { . 0% nga { . ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -1); } .
34% nga { ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -0.4); } .
55% nga { ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -0.2); } .
72% nga { ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -0.1); } .
85% nga { ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -0.05); } .
94% nga { ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -0.025); } .
99% nga { ipatarus: 0 calc (var (--kf-bounce-manipud, 100vh) * -0.0125); } .
22%, 45%, 64%, 79%, 90%, 97%, 100% { ipatarus: 0 0; animation-timing-function: nalaka a rummuar; } . } .
Narikut bassit dagiti animation a kas iti “elastic” gapu kadagiti kalkulasion iti uneg dagiti keyframe. Masapul a depinarentayo ti --kf-elastic-from-X ken --kf-elastic-from-Y a nagsisina (agpada nga opsional), ken aggigiddan a palubosandatayo a mangpartuat ti elastiko a pagserkan manipud iti ania man a puntos iti iskrin.
/* * Elastic In - elastiko nga animasion ti pagserkan * Usaren ti --kf-elastic-from-X ken --kf-elastic-from-Y tapno makontrol ti posision ti pangrugian * Default: sumrek manipud iti ngato a tengnga (0, -100vh) . * Panagusar: * animation: kf-elastiko-iti 2s nalaka-in-out agpada; * --kf-elastiko-manipud-X: -50px; * --kf-elastiko-manipud-Y: -200px; // sumrek manipud iti (-50px, -200px) */
@keyframes kf-estiko-iti { . 0% nga { . ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * 1) calc (var (--kf-elastiko-manipud-Y, 0px) * 1); } .
16% nga { ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * -0.3227) calc (var (--kf-elastiko-manipud-Y, 0px) * -0.3227); } .
28% nga { ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * 0.1312)calc (var (--kf-elastiko-manipud-Y, 0px) * 0.1312); } .
44% nga { ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * -0.0463) calc (var (--kf-elastiko-manipud-Y, 0px) * -0.0463); } .
59% nga { ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * 0.0164) calc (var (--kf-elastiko-manipud-Y, 0px) * 0.0164); } .
73% nga { ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * -0.0058) calc (var (--kf-elastiko-manipud-Y, 0px) * -0.0058); } .
88% nga { ipatarus: calc (var (--kf-elastiko-manipud-X, -50vw) * 0.0020) calc (var (--kf-elastiko-manipud-Y, 0px) * 0.0020); } .
100% nga { ipatarus: 0 0; } . } .
Daytoy nga asitgan ket mangpalaka ti panagusar manen ken panagpasayaat kadagiti narang-ay a keyframe iti ballasiw ti proyektomi, babaen laeng ti panangbalbaliw ti maymaysa a kostumbre a sanikua.
.ag-bounce-ken-panag-zoom { . animasion: . kf-bounce 3s nalaka nga, . kf-zoom 3s linear nga; --kf-zoom-manipud: 0; } .
.ag-bounce-ken-ag-slide { . animation-komposision: inayon; /* Agpada nga agus-usar kadagiti animasion ti panagipatarus */ . animasion: . kf-bounce 3s nalaka nga, . kf-slide-in 3s nalaka-a-ruar; --kf-slide-manipud: -200px; } .
.elastiko-iti { . animation: kf-elastic-in 2s nalaka-in-out agpada; } .
Kitaen ti Pen Keyframes Tokens - Demo 7 [natinidor] ni Amit Sheen. Agingga iti daytoy a punto, nakitatayon no kasano a mapagtitipontayo dagiti keyframe iti nasirib ken episiente a wagas. Siempre, mabalin a kayatmo nga i-tweak dagiti bambanag tapno nasaysayaat a maibagay kadagiti kasapulan ti proyektom, ngem sinakupmi dagiti pagarigan ti sumagmamano a gagangay nga animasion ken inaldaw a kaso ti panagusar. Ket gapu kadagitoy a keyframes tokens a naikabil, addaantayo itan kadagiti nabileg a building blocks para iti panagpartuat kadagiti agtultuloy, mataginayon nga animasion iti intero a proyekto. Awanen dagiti naduplikado a keyframe, awanen dagiti sangalubongan a panagsusupiat ti sakup. Nadalus, kombeniente laeng a pamay-an a mangtaming iti amin a kasapulantayo iti animation. Ngem ti pudno a saludsod ket: Kasanotayo a sangsangkamaysa a buklen dagitoy a building blocks? Panagtitipon Amin Dayta Nakitami a simple laeng ti panagtipon kadagiti kangrunaan a keyframes token. Saantayo a kasapulan ti aniaman nga espesial no di ti panangdepinar iti umuna nga animation, panangdepinar iti maikadua, panangikeddeng kadagiti variable kas kasapulan, ket dayta’n. /* Agkupas iti + slide iti */ . .toast { . animasion: . kf-panagkupas-iti 0.4s, . kf-slide-in 0.4s kubiko-bezier (0.34, 1.56, 0.64, 1); --kf-slide-manipud: 0 40px; } .
/* I-zoom in + agkupas */ . .modal nga { . animasion: . kf-agkupas-iti 0.3s, . kf-panag-zoom 0.3s kubiko-bezier (0.34, 1.56, 0.64, 1); --kf-panag-zoom-manipud: 0.7; --kf-ag-zoom-iti: 1; } .
/* I-slide iti + pulso */ . .pakaammo { . animasion: . kf-slide-iti 0.5s, . kf-pulse 1.2s nalaka-iti-ruar nga awan patinggana nga agsinnublat; --kf-slide-manipud: -100px 0; --kf-pulso-ti-rukod-manipud: 0.95; --kf-pulso-ti-rukod-agingga: 1.05; } .
Dagitoy a kombinasion ket napintas ti panagtrabahoda gapu ta tunggal animasion ket puntiriana ti sabali a sanikua: opacity, transform (translate/scale), kdpy.. Ngem no dadduma adda dagiti panagsusuppiat, ken kasapulan nga ammotayo no apay ken kasano a tamingen dagitoy. No ti dua nga animasion ket padasenna nga animate ti isu met laeng a tagikua — kas pagarigan, agpada nga animating scale wenno agpada nga animating opacity — ti resulta ket saan a kas ti namnamaem. Babaen ti default, maysa laeng kadagiti animasion ti aktual a maipakat iti dayta a tagikua, nga isu ti maudi iti listaan ti animasion. Daytoy ket limitasion no kasano a ti CSS ket mangasikaso kadagiti adu nga animasion iti isu met laeng a tagikua. Kas pagarigan, daytoy ket saan nga agtrabaho a kas nairanta gapu ta ti laeng kf-pulse nga animasion ti agaplikar. .dakes-kombo { . animasion: . kf-zoom 0.5s nga agpasango, . kf-pulso 1.2s awan patinggana nga agsinnublat; --kf-panag-zoom-manipud: 0.5; --kf-ag-zoom-iti: 1.2; --kf-pulso-ti-rukod-manipud: 0.8; --kf-pulso-ti-rukod-iti: 1.1; } .
Panagnayon ti Animasion Ti kasimplean ken kaaduan a direkta a wagas a mangasikaso kadagiti adu nga animasion a mangapektar ti isu met laeng a tagikua ket ti panagusar ti tagikua ti animasion-komposision. Iti maudi a pagarigan iti ngato, ti kf-pulse nga animasion ket mangsukat ti kf-zoom nga animasion, isu a saantayo a makita ti umuna a panag-zoom ken saantayo a makagun-od ti manamnama a sukog iti ti 1.2. Babaen ti panangisaad ti animation-composition a mainayon, ibagatayo iti browser a pagtitiponenna ti agpada nga animasion. Daytoy ti mangted kadatayo iti resulta a kayattayo. .paset-dua { . animation-komposision: inayon; } .
Kitaen dagiti Token ti Pen Keyframes - Demo 8 [natinidor] ni Amit Sheen. Daytoy nga asitgan ket agtrabaho a nasayaat para kadagiti kaaduan a kaso a sadiay ket kayattayo a pagtitiponen dagiti epekto iti isu met laeng a sanikua. Daytoy ket makatulong pay no kasapulantayo a pagtiponen dagiti animasion kadagiti pateg ti estatiko a sanikua. Kas pagarigan, no addaantayo iti elemento nga agus-usar ti tagikua ti panagipatarus tapno mangiposision iti eksakto iti kayattayo, ken kalpasanna kayattayo nga animate daytoy babaen dagiti kf-slide-in a keyframes, makagun-odtayo iti naalas a makita a panagluksaw nga awan ti animation-composition. Kitaen ti Pen Keyframes Tokens - Demo 9 [natinidor] ni Amit Sheen. Iti animation-composition a naikeddeng a mainayon, ti animation ket naannayas a maitipon iti addanagbaliw, isu nga agtalinaed ti elemento iti lugarna ken agbiag kas ninamnama. Animasion nga Stagger Ti sabali pay a wagas ti panangtaming kadagiti adu nga animasion ket ti “stagger” kadagitoy — kayatna a sawen, rugian ti maikadua nga animasion kalpasan bassit a malpas ti umuna. Saan a solusion nga agtrabaho para iti tunggal kaso, ngem makatulong no addaantayo iti entrance animation a sarunuen ti agtultuloy nga animation. /* agkupas iti + pulso ti opacity */ . .pakaammo { . animasion: . kf-fade-in 2s nalaka nga rummuar, . kf-pulso 0.5s 2s nalaka-in-out awan patinggana nga agsinnublat; --kf-pulso-opasidad-iti: 0.5; } .
Kitaen dagiti Token ti Pen Keyframes - Demo 10 [natinidor] babaen ni Amit Sheen. Dagiti Bambanag ti Order Ti dakkel a paset dagiti animasion a pagtrabahuantayo ket agus-usar ti transform property. Iti kaaduan a kaso, ad-adda laeng a kombeniente daytoy. Daytoy ket addaan pay ti bentaha ti panagaramid a kas dagiti animasion ti panagbalbaliw ket mabalin a GPU-a napardas. Ngem no agusartayo kadagiti panagbalbaliw, kasapulan nga awatentayo a napateg ti panagsasaruno ti panangaramidtayo kadagiti panagbalbaliwtayo. Adu. Kadagiti keyframe-mi agingga ita, nagusarkami’n kadagiti indibidual a panagbalbaliw. Segun kadagiti espesipikasion, dagitoy ket kanayon a maipakat iti naikeddeng nga urnos: umuna, ti elemento ket makagun-od ti panagipatarus, kalpasanna ti panagiturong, kalpasanna ti sukog. Makaanay daytoy ken isu ti namnamaen ti kaaduan kadatayo. Nupay kasta, no usarentayo ti transform property, ti urnos a pannakaisurat dagiti function ket isu ti urnos a pannakaipakat dagitoy. Iti daytoy a kaso, no iyakartayo ti maysa a banag iti 100 a pixel iti X-axis ket kalpasanna i-rotatetayo iti 45 degrees, saan a kapada dayta ti umuna a panangiturong iti 45 degrees ket kalpasanna iyakartayo iti 100 a pixel. /* Pink square: Umuna nga ipatarus, kalpasanna i-rotate */ .pagarigan-maysa { . agbaliw: ipatarusX (100px) agturong (45deg); } .
/* Berde a kuadrado: Umuna nga agturong, kalpasanna ipatarus */ .pagarigan-dua { . agbaliw: agturong (45deg) ipatarusX (100px); } .
Kitaen dagiti Token ti Pen Keyframes - Demo 11 [natinidor] babaen ni Amit Sheen. Ngem segun iti urnos ti panagbalbaliw, amin nga indibidual a panagbalbaliw — amin nga inusartayo para kadagiti keyframes tokens — ket mapasamak sakbay nga agtignay ti panagbalbaliw. Kayatna a sawen nga aniaman nga insetmo iti transform property ket mapasamak kalpasan dagiti animasion. Ngem no mangikeddengka, kas pagarigan, ti panagipatarus a kadua dagiti kf-spin a keyframe, ti panagipatarus ket mapasamak sakbay ti animasion. Mariro pay laeng?! Daytoy ket mangiturong kadagiti kasasaad a dagiti estatiko a pateg ket mabalin a mangpataud kadagiti nadumaduma a resulta para iti isu met laeng nga animasion, a kas ti sumaganad a kaso:
/* Gagangay nga animasion para iti agpada nga spinner */ .spinner { . animasion: kf-spin 1s linear nga awan patinggana; } .
/* Pink spinner: ipatarus sakbay nga agturong (indibidual a panagbalbaliw) */ .spinner-rosas { . ipatarus: 100% 50%; } .
/* Berde nga spinner: agturong kalpasanna ipatarus (urnos ti panagandar) */ .spinner-berde nga { . agbaliw: ipatarus(100%, 50%); } .
Kitaen dagiti Token ti Pen Keyframes - Demo 12 [natinidor] babaen ni Amit Sheen. Makitam a ti umuna nga spinner (pink) ket makagun-od ti translate a mapasamak sakbay ti panagrikus ti kf-spin, isu nga umuna nga umakar iti lugarna ken kalpasanna ag-spin. Ti maikadua nga spinner (berde) ket makagun-od ti translate() a panagandar a mapasamak kalpasan ti indibidual a panagbalbaliw, isu nga umuna nga ag-spin ti elemento, kalpasanna aggaraw a relatibo iti agdama nga anggulona, ken magun-odtayo dayta a nalawa nga epekto ti orbit. Saan, saan a bug daytoy. Maysa laeng daytoy kadagidiay a banag a masapul nga ammuentayo maipapan iti CSS ken laglagipen no agtrabaho kadagiti adu nga animasion wenno adu a panagbalbaliw. No kasapulan, mabalinmo pay ti mangpartuat ti kanayonan a grupo dagiti kf-spin-alt a keyframe a mangiturong kadagiti elemento babaen ti panagusar ti rotate() a panagandar. Nakissay ti Panaggaraw Ket bayat nga pagsasaritaantayo ti maipapan kadagiti alternatibo a keyframe, ditay’ mabalin a di ikankano ti “no animation” a pagpilian. Maysa kadagiti kadakkelan a pagimbagan ti panagusar kadagiti keyframes token ket ti accessibility ket mabalin a maluto iti, ken aktual a medyo nalaka nga aramiden. Babaen ti panangdisenio kadagiti keyframe-tayo a sipapanunot iti pannakagun-od, masiguradotayo a dagiti agar-aramat a kaykayatda ti naikkat a panaggaraw ket makagun-od iti naannayas, saan unay a makasinga a padas, nga awan ti ekstra a trabaho wenno panagduplikar ti kodigo. Ti eksakto a kaipapanan ti “Reduced Motion” ket mabalin nga agbaliw bassit manipud iti maysa nga animation agingga iti sabali, ken manipud iti proyekto agingga iti sabali, ngem adda sumagmamano a napateg a punto a laglagipen: Panang-muting kadagiti Keyframe Bayat a ti dadduma nga animasion ket mabalin a mapalukneng wenno mapabannayat, adda dagiti dadduma a rumbeng a naan-anay a mapukaw no makiddaw ti nababa a panaggaraw. Nasayaat a pagarigan dagiti animasion ti pulso. Tapno masigurado a dagitoy nga animasion ket saan nga agtaray iti naikkat a panaggunay a kasasaad, mabalintayo laeng a baluten dagitoy iti maitutop a panagsaludsod ti media.
@media (kaykayat-nakissay-a-panaggunay: awan-kayat) { @keyfrmaes kf-pulso { . manipud iti { . sukog: var (--kf-pulso-ti-rukod-manipud, 1); opacity: var (--kf-pulso-opacity-manipud, 1); } . nga { . sukog: var (--kf-pulso-ti sukog-iti, 1); opacity: .var (--kf-pulso-opasidad-iti, 1); } . } . } .
Daytoy ket mangsigurado a dagiti agar-aramat a nangikeddeng kadagiti prefers-reduced-motion to reduce ket dida makita ti animation ken makagun-odda ti padas a maitunos iti kaykayatda. Instant In Adda sumagmamano a keyframe a ditay basta ikkaten, kas kadagiti entrance animations. Masapul nga agbaliw ti pateg, masapul nga agbiag; no saan, ti elemento ket saan nga addaan kadagiti umno a pateg. Ngem iti naikkat a panaggaraw, daytoy a panagbalbaliw manipud iti damo a pateg ket rumbeng a dagus. Tapno maragpat daytoy, mangikeddengtayo iti ekstra a grupo dagiti keyframe a sadiay ti pateg ket agluksaw a dagus iti estado ti panagpatingga. Dagitoy ti agbalin a default keyframe-tayo. Kalpasanna, inayontayo dagiti regular a keyframe iti uneg ti media query para iti prefers-reduced-motion a naikabil iti no-preference, kas met laeng iti napalabas a pagarigan. /* pop in a dagus para iti nababa a panaggaraw */ @dagiti keyframes kf-panag-zoom { . manipud, agingga iti { . sukog: var (--kf-ag-zoom-iti, 1); } . } .
@media (kaykayat-nakissay-a-panaggunay: awan-kayat) { /* Dagiti orihinal a keyframes ti zoom */ @dagiti keyframes kf-panag-zoom { . manipud iti { . sukog: var (--kf-zoom-manipud, 0.8); } . nga { . sukog: var (--kf-ag-zoom-iti, 1); } . } . } .
Iti daytoy a wagas, dagiti agar-aramat a kaykayatda ti naikkat a panaggunay ket makitada ti elemento a dagus nga agparang iti maudi a kasasaadna, bayat a ti amin a dadduma ket makagun-od ti animado a panagbalbaliw. Ti Nalukneng a Panag-asidegan Adda dagiti kaso a kayattayo a pagtalinaeden ti sumagmamano a panaggaraw, ngem naluklukneng ken nataltalna nga amang ngem ti orihinal nga animation. Kas pagarigan, mabalintayo a sukatan ti bounce entrance iti naalumamay a fade-in.
@keyframes kf-ag-bounce { . /* Nalukneng a fade-in para iti naikkat a panaggaraw */ } .
@media (kaykayat-nakissay-a-panaggunay: awan-kayat) { @keyframes kf-ag-bounce { . /* Orihinal nga bounce keyframes */ . } . } .
Ita, dagiti agar-aramat nga addaan iti naikkat a panaggaraw a napalubosan ket makagun-od pay laeng iti rikna ti langa, ngem awan ti nakaro a panaggaraw ti maysa a bounce wenno elastic animation. Gapu ta addan dagiti building blocks, ti sumaganad a saludsod ket no kasano a pagbalinen dagitoy a paset ti aktual a panagayus ti trabaho. Ti panagsurat kadagiti nalaka a maibagay a keyframe ket maysa a banag, ngem ti panangaramid kadagitoy a mapagtalkan iti ballasiw ti dakkel a proyekto ket kasapulan ti sumagmamano nga estratehia a masapul a sursuruek iti narigat a wagas. Dagiti Estratehia ti Implementasion & Kasayaatan nga Ar-aramid Apaman nga addaantayo iti solido a libraria dagiti keyframes token, ti pudno a karit ket no kasano nga iyeg dagitoy iti inaldaw a trabaho.
Ti sulisog ket ti panangibaba amin a keyframe iti maminsan ken ideklara a narisut ti parikut, ngem iti praktis nasarakak a dagiti kasayaatan a resulta ket aggapu iti in-inut a panangampon. Mangrugi kadagiti kadawyan nga animasion, kas iti fade wenno slide. Dagitoy ket nalaka a panagballigi a mangipakita iti dagus a pateg a di kasapulan dagiti dadakkel a panagsurat manen. Ti panagnagan ti sabali pay a punto a maikari iti atension. Ti agtultuloy a pangrugian wenno espasio ti nagan ket mangaramid a nalawag no ania dagiti animasion ket token ken no ania dagiti lokal a maminsan. Lapdanna met dagiti aksidente a panagdinnungpar ken tulonganna dagiti baro a kameng ti team a mangbigbig iti nabingbingay a sistema iti maysa a panangkita. Napateg ti dokumentasion a kas iti kodigo a mismo. Uray ti ababa a komento iti ngato ti tunggal keyframes token ket makasalbar iti adu nga oras a panagpugto kalpasanna. Ti maysa a developer ket rumbeng a makalukat ti tokens file, i-scan para iti epekto a kasapulanda, ken kopiaen ti padron ti panagusar a diretso iti pasetda. Ti kinamanagpanunot ti mamagbalin iti daytoy a pamay-an a maikari iti panagregget. Babaen ti panangibutaktak kadagiti nainsiriban a kostumbre a tagikua, ikkanmi dagiti grupo iti lugar a mangbalbaliw iti animasion a di mangburak iti sistema. Maigiddato iti dayta, ikagumaam ti saan unay a komplikado. Itedmo dagiti knob a napateg ken pagtalinaedem nga opinion ti dadduma. Kamaudiananna, laglagipem ti pannakagun-od. Saan a kasapulan ti tunggal animation ti alternatibo a naikkat ti panaggaraw, ngem adu ti agkasapulan. Ti nasapa a panagluto kadagitoy a panagbalbaliw kaipapananna a ditay pulos kasapulan nga i-retrofit dagitoy inton agangay, ken ipakitana ti maysa a tukad ti panangaywan a madlaw dagiti agus-usar kadatayo uray no pulos a dida dakamaten dayta.
Iti kapadasak, ti panangtrato kadagiti keyframes tokens kas paset ti design tokens workflow-tayo ti mamagbalin kadakuada a agtalinaed. Apaman a naikabilda, agsardengdan a marikna a kasla espesial nga epekto ket agbalinda a paset ti pagsasao ti disenio, a natural a panangpalawa no kasano ti panaggaraw ken panagsungbat ti produkto. Panagbalkot Dagiti animasion ket mabalin a maysa kadagiti makaparagsak unay a paset ti panagbangon kadagiti interface, ngem no awan ti estruktura, mabalin met nga agbalin dagitoy a maysa kadagiti kadakkelan a gubuayan ti pannakaupay. Babaen ti panangtrato kadagiti keyframe kas token, alaem ti banag a gagangay a nariribuk ken narigat nga imanehar ket pagbalinem dayta a nalawag, maipadto a sistema. Ti pudno a pateg ket saan laeng nga iti panangidulin iti sumagmamano a linia ti kodigo. Daytoy ket iti panagtalek a no agusarka iti fade, slide, zoom, wenno spin, ammom nga eksakto no kasano ti panagtignayna iti intero a proyekto. Daytat’ adda iti kinalukneng nga aggapu kadagiti kostumbre a sanikua nga awan ti riribuk dagiti awan patinggana a panagduduma. Ket adda dayta iti accessibility a naibangon iti pundasion imbes a nainayon kasmaysa a afterthought. Nakitak dagitoy nga ideya nga agtrabaho kadagiti nadumaduma a grupo ken nadumaduma a codebase, ken ti padron ket kanayon nga agpapada. Apaman a naikabil dagiti token, agsardeng dagiti keyframe nga agbalin a naiwaras a koleksion dagiti trick ken agbalinda a paset ti pagsasao ti disenio. Mariknada nga ad-adda a nairanta, ad-adda a naurnos, ken ad-adda a sibibiag ti produkto. No alaem ti maysa a banag manipud iti daytoy nga artikulo, bay-am a kastoy: maikari dagiti animasion iti isu met laeng a panangaywan ken estruktura nga itedtayon kadagiti kolor, tipograpia, ken panagsisina. Ti bassit a panagpuonan kadagiti keyframes token ket agbayad tunggal aggaraw ti interface-mo.
