Hunahunaa kini: moapil ka sa usa ka bag-ong proyekto, mo-dive sa codebase, ug sulod sa unang pipila ka oras, makadiskubre ka og butang nga pamilyar kaayo. Nagkatag sa tibuok stylesheet, makit-an nimo ang daghang @keyframes nga mga kahulugan para sa parehas nga batakang mga animation. Tulo ka lain-laing mga fade-in effect, duha o tulo ka slide variation, pipila ka mga zoom animation, ug labing menos duha ka lain-laing mga spin animation tungod kay, aw, nganong dili? @keyframes pulso { gikan sa { sukdanan: 1; } sa { timbangan: 1.1; } }
@keyframes mas dako nga pulso { 0%, 20%, 100% { sukdanan: 1; } 10%, 40% { timbangan: 1.2; } }
Kung pamilyar kini nga senaryo, wala ka nag-inusara. Sa akong kasinatian sa lainlaing mga proyekto, usa sa labing makanunayon nga dali nga kadaugan nga akong mahatag mao ang pagkonsolida ug pag-standardize sa mga keyframe. Kini nahimo nga usa ka kasaligan nga sumbanan nga ako karon nagpaabut sa kini nga paglimpyo ingon usa sa akong una nga mga buluhaton sa bisan unsang bag-ong codebase. Ang Logic Luyo sa Kagubot Kini nga redundancy adunay hingpit nga kahulugan kung imong hunahunaon kini. Kitang tanan naggamit sa parehas nga sukaranan nga mga animation sa atong adlaw-adlaw nga trabaho: fade, slide, zoom, spins, ug uban pang mga kasagarang epekto. Kini nga mga animation prangka kaayo, ug dali ra ang paghimo sa usa ka dali nga kahulugan sa @keyframes aron mahuman ang trabaho. Kung wala’y sentralisadong sistema sa animation, natural nga gisulat sa mga developer kini nga mga keyframe gikan sa wala, wala nahibal-an nga adunay parehas nga mga animation sa bisan diin sa codebase. Kini labi ka kasagaran kung nagtrabaho sa mga arkitektura nga nakabase sa sangkap (nga gibuhat sa kadaghanan kanato karong mga panahona), tungod kay ang mga koponan kanunay nga nagtrabaho nga managsama sa lainlaing mga bahin sa aplikasyon. Ang resulta? Kagubot sa animation. Ang Gamay nga Problema Ang labing klaro nga mga isyu sa pagdoble sa keyframes mao ang nausik nga oras sa pag-uswag ug wala kinahanglana nga code bloat. Daghang mga kahulugan sa keyframe nagpasabut nga daghang mga lugar nga i-update kung magbag-o ang mga kinahanglanon. Kinahanglan bang i-adjust ang timing sa imong fade animation? Kinahanglan nimo nga pangitaon ang matag higayon sa imong codebase. Gusto nga i-standardize ang mga function sa pagpagaan? Good luck sa pagpangita sa tanan nga mga kalainan. Kini nga pagpadaghan sa mga punto sa pagmentinar naghimo bisan sa yano nga pag-update sa animation nga usa ka makahurot nga buluhaton. Ang Dakong Problema Kini nga pagdoble sa keyframes nagmugna ug usa ka labi ka malimbungon nga problema nga nagtago sa ilawom sa nawong: ang lit-ag nga sakup sa tibuuk kalibutan. Bisan kung nagtrabaho kauban ang mga arkitektura nga nakabase sa sangkap, ang mga keyframe sa CSS kanunay nga gihubit sa tibuuk kalibutan. Kini nagpasabut nga ang tanan nga mga keyframe magamit sa tanan nga mga sangkap. Kanunay. Oo, ang imong animation dili kinahanglan nga mogamit sa mga keyframe nga imong gipasabut sa imong sangkap. Gigamit niini ang kataposang mga keyframes nga mohaom sa eksaktong samang ngalan nga gikarga sa tibuok kalibotan. Basta pareha ra ang tanan nimong keyframes, murag gamay ra ni nga isyu. Apan sa higayon nga gusto nimo nga ipasibo ang usa ka animation alang sa usa ka piho nga kaso sa paggamit, naa ka sa kasamok, o mas grabe pa, ikaw ang hinungdan niini. Mahimong ang imong animation dili molihok tungod kay ang lain nga sangkap gikarga pagkahuman sa imo, gi-overwrit ang imong mga keyframe, o ang imong mga sangkap nga nag-load sa katapusan ug aksidente nga nagbag-o sa pamatasan sa animation alang sa matag uban nga sangkap nga naggamit sa ngalan sa keyframe, ug mahimo nga wala ka makaamgo niini. Ania ang usa ka yano nga pananglitan nga nagpakita sa problema: .component-one { /* mga estilo sa sangkap */ animation: pulso 1s kasayon-in-out walay kinutuban nga alternatibo; }
/* kini nga kahulugan sa @keyframes dili molihok */ @keyframes pulso { gikan sa { sukdanan: 1; } sa { timbangan: 1.1; } }
/* sa ulahi sa code... */
.komponent-duha { /* mga estilo sa sangkap */ animation: pulse 1s kasayon-in-out walay kinutuban; }
/* kini nga keyframes magamit sa duha ka component */ @keyframes pulso { 0%, 20%, 100% { sukdanan: 1; } 10%, 40% { timbangan: 1.2; } }
Ang duha ka sangkap naggamit sa parehas nga ngalan sa animation, apan ang ikaduha nga kahulugan sa @keyframes nag-overwrite sa una. Karon ang component-one ug component-two mogamit sa ikaduhang keyframes, bisan unsa nga component ang nagdefine kung unsang keyframes. Tan-awa ang Pen Keyframes Token - Demo 1 [gisawang] ni Amit Sheen. Ang pinakagrabe nga bahin? Kanunay kini nga hingpit nga molihok sa lokal nga pag-uswag apan misteryoso nga naguba sa produksiyon kung ang mga proseso sa pagtukod nagbag-o sa han-ay sa pagkarga sa imong mga stylesheet. Natapos nimo ang mga animation nga lahi ang pamatasan depende kung unsang mga sangkap ang gikarga ug kung unsang pagkasunod-sunod. Ang Solusyon: Unified Keyframes Ang tubag niini nga kagubot kay simple ra: gi-predefined dynamic keyframes nga gitipigan sa usa ka shared stylesheet. Imbis nga tugotan ang matag component nga maghubit sa kaugalingon nga mga animation, naghimo kami og mga sentralisadong keyframe nga maayo nga dokumentado, sayongamiton, mamentinar, ug gipahaom sa piho nga mga panginahanglan sa imong proyekto. Hunahunaa kini isip keyframes tokens. Sama nga kita naggamit ug mga token para sa mga kolor ug gilay-on, ug daghan na kanato ang naggamit ug mga token para sa animation nga mga kabtangan, sama sa gidugayon ug pagpagaan sa mga gimbuhaton, nganong dili man mogamit ug mga token para sa mga keyframes usab? Kini nga pamaagi mahimong natural nga mag-integrate sa bisan unsang kasamtangan nga design token workflow nga imong gigamit, samtang gisulbad ang gamay nga problema (pagdoble sa code) ug ang mas dako nga problema (global scope conflicts) sa usa ka go. Ang ideya prangka: paghimo og usa ka tinubdan sa kamatuoran alang sa tanan namong komon nga mga animation. Kining gipaambit nga stylesheet adunay maampingong gihimo nga mga keyframe nga nagtabon sa mga pattern sa animation nga aktuwal nga gigamit sa among proyekto. Dili na makatag-an kung ang usa ka fade animation naa na sa usa ka lugar sa among codebase. Wala nay aksidenteng pag-overwrite sa mga animation gikan sa ubang mga component. Apan ania ang yawe: kini dili lamang mga static nga copy-paste nga mga animation. Gidisenyo sila nga mahimong dinamiko ug mapasibo pinaagi sa custom nga mga kabtangan sa CSS, nga nagtugot kanamo sa pagpadayon sa pagkamakanunayon samtang naa pa ang pagka-flexible sa pagpahiangay sa mga animation sa piho nga mga kaso sa paggamit, sama sa kung kinahanglan nimo ang usa ka gamay nga mas dako nga "pulso" nga animation sa usa ka lugar. Pagtukod sa Unang Keyframes Token Usa sa una nga ubos nga nagbitay nga mga prutas nga kinahanglan natong sagubangon mao ang "fade-in" nga animation. Sa usa sa akong bag-o nga mga proyekto, nakit-an nako ang kapin sa usa ka dosena nga separado nga mga kahulugan sa fade-in, ug oo, silang tanan yano nga nagpalihok sa opacity gikan sa 0 hangtod 1. Busa, maghimo ta ug bag-ong stylesheet, tawgon kini nga kf-tokens.css, i-import kini sa among proyekto, ug ibutang ang among mga keyframe nga adunay tukma nga mga komento sa sulod niini. /* keyframes-tokens.css */
/* * Fade In - fade entrance animation * Paggamit: animation: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { gikan sa { opacity: 0; } sa { opacity: 1; } }
Kining usa ka @keyframes nga deklarasyon mipuli sa tanang nagkatag nga fade-in nga mga animation sa among codebase. Limpyo, yano, ug magamit sa tibuok kalibutan. Ug karon nga kami adunay kini nga timaan nga gipasabut, mahimo namon kini gamiton gikan sa bisan unsang bahin sa among proyekto: .modal { animation: kf-fade-in 0.3s ease-out; }
.tooltip { animation: kf-fade-in 0.2s kasayon-in-out; }
.pahibalo { animation: kf-fade-in 0.5s ease-out; }
Tan-awa ang Pen Keyframes Token - Demo 2 [gisawang] ni Amit Sheen. Nota: Gigamit namo ang kf- prefix sa tanan namong @keyframes nga mga ngalan. Kini nga prefix nagsilbi nga namespace nga nagpugong sa pagngalan sa mga panagsumpaki sa kasamtangan nga mga animation sa proyekto ug nagpatin-aw dayon nga kini nga mga keyframe gikan sa among keyframes tokens file. Paghimo Usa ka Dinamikong Slide Nindot kaayo ang kf-fade-in keyframes tungod kay kini yano ug gamay ra ang lugar aron magubot ang mga butang. Sa uban nga mga animation, bisan pa, kinahanglan naton nga labi ka dinamiko, ug dinhi mahimo naton magamit ang dako nga gahum sa mga kostumbre sa CSS. Dinhi diin ang keyframes tokens nagdan-ag gayud kon itandi sa nagkatag nga static nga mga animation. Atong kuhaon ang usa ka komon nga senaryo: "slide-in" nga mga animation. Apan gikan sa diin? 100px gikan sa tuo? 50% gikan sa wala? Kinahanglan ba kini nga mosulod gikan sa ibabaw sa screen? O tingali naglutaw gikan sa ilawom? Daghan kaayo nga mga posibilidad, apan imbes nga maghimo ug bulag nga mga keyframe para sa matag direksyon ug matag kalainan, makahimo kita og usa ka flexible token nga mohaum sa tanang senaryo: /* * Slide In - direksyon nga slide animation * Paggamit --kf-slide-from aron makontrol ang direksyon * Default: slide gikan sa wala (-100%) * Paggamit: * animation: kf-slide-in 0.3s kasayon-gawas; * --kf-slide-gikan sa: -100px 0; // slide gikan sa wala * --kf-slide-gikan sa: 100px 0; // slide gikan sa tuo * --kf-slide-gikan sa: 0 -50px; // slide gikan sa ibabaw */
@keyframes kf-slide-in { gikan sa { hubaron: var(--kf-slide-from, -100% 0); } sa { paghubad: 0 0; } }
Karon magamit na nato kining single @keyframes token para sa bisan unsang direksyon sa slide pinaagi lang sa pag-ilis sa --kf-slide-from custom property: .sidebar { animation: kf-slide-in 0.3s ease-out; /* Gigamit ang default nga kantidad: mga slide gikan sa wala */ }
.pahibalo { animation: kf-slide-in 0.4s ease-out; --kf-slide-gikan sa: 0 -50px; /* slide gikan sa ibabaw */ }
.modal { animation: kf-fade-sa 0.5s, kf-slide-sa 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-gikan sa: 50px 50px; /* slide gikan sa ubos-tuo */ }
Kini nga pamaagi naghatag kanato og talagsaon nga pagka-flexible samtang nagmintinar sa pagkamakanunayon. Usa ka deklarasyon sa keyframe, walay kinutuban nga mga posibilidad. Tan-awa ang Pen Keyframes Token - Demo 3 [gisawang] ni Amit Sheen. Ug kung gusto namon nga himuon nga labi ka dali ang among mga animation, nga gitugotan ang mga epekto nga "slide-out" usab, mahimo namon.idugang lang ang --kf-slide-to custom property, susama sa atong makita sa sunod nga seksyon. Bidirectional Zoom Keyframes Ang laing komon nga animation nga madoble sa mga proyekto mao ang "zoom" nga mga epekto. Bisan kung kini usa ka maliputon nga pag-scale-up alang sa mga mensahe sa toast, usa ka dramatikong pag-zoom-in alang sa mga modal, o usa ka malumo nga epekto sa pag-scale alang sa mga ulohan, ang mga animation sa pag-zoom bisan diin. Imbis nga maghimo ug bulag nga mga keyframe para sa matag sukdanan nga kantidad, maghimo kita usa ka flexible set sa kf-zoom keyframes:
/* * Zoom - scale nga animation * Gamita ang --kf-zoom-from ug --kf-zoom-to aron makontrol ang mga kantidad sa sukdanan * Default: nag-zoom gikan sa 80% hangtod 100% (0.8 hangtod 1) * Paggamit: * animation: kf-zoom 0.2s kasayon-gawas; * --kf-zoom-gikan sa: 0.5; --kf-zoom-sa: 1; // zoom gikan sa 50% hangtod 100% * --kf-zoom-gikan sa: 1; --kf-zoom-sa: 0; // zoom gikan sa 100% hangtod sa 0% * --kf-zoom-gikan sa: 1; --kf-zoom-sa: 1.1; // zoom gikan sa 100% hangtod sa 110% */
@keyframes kf-zoom { gikan sa { scale: var(--kf-zoom-gikan sa, 0.8); } sa { sukdanan: var(--kf-zoom-to, 1); } }
Sa usa ka kahulugan, makab-ot nato ang bisan unsang kausaban sa zoom nga atong gikinahanglan: .toast { animation: kf-slide-sa 0.2s, kf-zoom 0.4s ease-out; --kf-slide-gikan sa: 0 100%; /* slide gikan sa ibabaw */ /* Gigamit ang default zoom: mga timbangan gikan sa 80% hangtod 100% */ }
.modal { animation: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-gikan sa: 0; /* dramatic zoom gikan sa 0% ngadto sa 100% */ }
.ulo { animation: kf-fade-in 2s, kf-zoom 2s kasayon-in; --kf-zoom-gikan sa: 1.2; --kf-zoom-sa: 0.8; /* hinayhinay nga pagpaubos */ }
Ang default nga 0.8 (80%) hingpit nga naglihok alang sa kadaghanan sa mga elemento sa UI, sama sa toast nga mga mensahe ug mga kard, samtang dali ra i-customize para sa mga espesyal nga kaso. Tan-awa ang Pen Keyframes Token - Demo 4 [gisawang] ni Amit Sheen. Tingali nakamatikod ka nga usa ka butang nga makapaikag sa bag-o nga mga pananglitan: naghiusa kami sa mga animation. Usa sa hinungdanon nga mga bentaha sa pagtrabaho kauban ang mga token sa @keyframes mao nga kini gidisenyo aron mahiusa nga hapsay sa usag usa. Kining hapsay nga komposisyon gituyo, dili aksidente. Atong hisgotan ang komposisyon sa animation sa mas detalyado sa ulahi, lakip na kung asa sila mahimong problema, apan kadaghanan sa mga kombinasyon prangka ug sayon nga ipatuman. Mubo nga sulat: Samtang nagsulat niini nga artikulo, ug tingali tungod sa pagsulat niini, nakita nako ang akong kaugalingon nga naghunahuna pag-usab sa tibuok ideya sa mga animation sa pagsulod. Sa tanan nga bag-o nga mga pag-uswag sa CSS, kinahanglan pa ba naton kini? Suwerte, gisuhid ni Adam Argyle ang parehas nga mga pangutana ug gipahayag kini nga maayo sa iyang blog. Wala kini sukwahi sa nahisulat dinhi, apan nagpresentar kini og pamaagi nga angay tagdon, ilabi na kung ang imong mga proyekto nagsalig pag-ayo sa mga animation sa pagsulod. Padayon nga mga Animasyon Samtang ang mga animation sa pagsulod, sama sa "fade", "slide", ug "zoom" mahitabo sa makausa ug unya mohunong, ang padayon nga mga animation mag-loop sa walay katapusan aron madani ang atensyon o magpakita sa nagpadayon nga kalihokan. Ang duha ka labing komon nga padayon nga mga animation nga akong nasugatan mao ang "spin" (alang sa loading indicators) ug "pulse" (alang sa pag-highlight sa importante nga mga elemento). Kini nga mga animation nagpresentar ug talagsaon nga mga hagit kung bahin sa paghimo sa mga keyframe nga mga token. Dili sama sa mga animation sa pagsulod nga kasagaran moadto gikan sa usa ka estado ngadto sa lain, ang padayon nga mga animation kinahanglan nga mapasibo kaayo sa ilang mga sumbanan sa pamatasan. Ang Spin Doctor Ang matag proyekto daw naggamit ug daghang mga spin animation. Ang uban nagtuyok sa sunud-sunod nga orasan, ang uban pa-counterclockwise. Ang uban naghimo og usa ka 360-degree nga rotation, ang uban naghimo og daghang pagliko para sa mas paspas nga epekto. Imbis nga maghimo ug bulag nga mga keyframe para sa matag kalainan, maghimo kita usa ka flexible spin nga magdumala sa tanan nga mga senaryo:
/* * Spin - rotation animation * Paggamit --kf-spin-from ug --kf-spin-to aron makontrol ang rotation range * Paggamit --kf-spin-turns aron makontrol ang gidaghanon sa rotation * Default: nagtuyok gikan sa 0deg hangtod 360deg (1 bug-os nga pagtuyok) * Paggamit: * animation: kf-spin 1s linear nga walay katapusan; * --kf-spin-turns: 2; // 2 ka bug-os nga pagtuyok * --kf-spin-gikan sa: 0deg; --kf-spin-sa: 180deg; // katunga nga pagtuyok * --kf-spin-gikan sa: 0deg; --kf-spin-sa: -360deg; // counterclockwise */
@keyframes kf-spin { gikan sa { rotate: var(--kf-spin-gikan sa, 0deg); } sa { rotate: calc(var(--kf-spin-gikan sa, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Karon makahimo na kami og bisan unsang spin variation nga gusto namo:
.loading-spinner { animation: kf-spin 1s linear nga walay katapusan; /* Gigamit ang default: nagtuyok gikan sa 0deg hangtod 360deg */ }
.paspas nga loader { animation: kf-spin 1.2s kasayon-in-out walay katapusan nga alternatibo; --kf-spin-turns: 3; /* 3 ka bug-os nga pagtuyok para sa kada direksyon kada siklo*/ }
.steped-reverse { animation: kf-spin 1.5s nga mga lakang(8) walay kinutuban; --kf-spin-sa: -360deg; /* counterclockwise */ }
.mahilum-wiggle { animation: kf-spin 2s ease-in-out walay kinutuban nga alternatibo; --kf-spin-gikan sa: -16deg; --kf-spin-sa: 32deg; /* pag-wiggle 36 deg: tali sa -18deg ug +18deg */ }
Tan-awa ang Pen Keyframes Token - Demo 5 [gisawang] ni Amit Sheen. Ang katahum sa kini nga pamaagi mao nga ang parehas nga mga keyframe nagtrabaho alang sa pagkarga sa mga spinner, rotating icon, wiggle effects, ug bisan ang komplikado nga multi-turn animation. Ang Pulse Paradox Ang mga animation sa pulso labi ka malimbungon tungod kay mahimo nilang "pulse" ang lainlaing mga kabtangan. Ang uban nag-pulso sa timbangan, ang uban nag-pulso sa opacity, ug ang uban nga mga kabtangan sa kolor sa pulso sama sa kahayag o saturation. Imbes nga maghimo ug bulag nga keyframes para sa matag property, makahimo mi ug keyframes nga mutrabaho sa bisan unsang CSS property. Ania ang usa ka pananglitan sa usa ka pulse keyframe nga adunay mga kapilian sa sukod ug opacity:
/* * Pulse - pulsing animation * Paggamit --kf-pulse-scale-from ug --kf-pulse-scale-to aron makontrol ang gidak-on sa gidak-on * Paggamit --kf-pulse-opacity-from ug --kf-pulse-opacity-to aron makontrol ang opacity range * Default: walay pulso (tanan nga kantidad 1) * Paggamit: * animation: kf-pulse 2s kasayon-in-out walay katapusan nga alternatibo; * --kf-pulse-scale-gikan sa: 0.95; --kf-pulse-scale-sa: 1.05; // timbangan nga pulso * --kf-pulse-opacity-gikan sa: 0.7; --kf-pulse-opacity-sa: 1; // opacity nga pulso */
@keyframes kf-pulso { gikan sa { sukdanan: var(--kf-pulse-scale-gikan sa, 1); opacity: var(--kf-pulse-opacity-gikan sa, 1); } sa { sukdanan: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Naghimo kini og usa ka flexible nga pulso nga makapa-animate sa daghang mga kabtangan: .call-to-action { animation: kf-pulse 0.6s walay kinutuban nga alternatibo; --kf-pulse-opacity-gikan sa: 0.5; /* opacity pulse */ }
.notification-dot { animation: kf-pulse 0.6s kasayon-in-out walay katapusan nga alternatibo; --kf-pulse-scale-gikan sa: 0.9; --kf-pulse-scale-sa: 1.1; /* pulso sa timbangan */ }
.text-highlight { animation: kf-pulse 1.5s ease-out walay kinutuban; --kf-pulse-scale-gikan sa: 0.8; --kf-pulse-opacity-gikan sa: 0.2; /* scale ug opacity pulse */ }
Tan-awa ang Pen Keyframes Token - Demo 6 [gisawang] ni Amit Sheen. Kining usa ka kf-pulse keyframe makadumala sa tanan gikan sa maliputon nga pagdani sa atensyon ngadto sa mga dramatikong highlight, tanan samtang sayon i-customize. Advanced Easing Usa sa mga nindot nga butang bahin sa paggamit sa mga keyframe token mao ang kadali sa pagpalapad sa among librarya sa animation ug paghatag og mga epekto nga kadaghanan sa mga developers dili maghasol sa pagsulat gikan sa wala, sama sa elastic o bounce. Ania ang usa ka pananglitan sa usa ka yano nga "bounce" keyframes token nga naggamit sa usa ka --kf-bounce-from custom property aron makontrol ang gitas-on sa paglukso. /* * Bounce - bounce nga entrance animation * Paggamit --kf-bounce-from aron makontrol ang taas sa paglukso * Default: paglukso gikan sa 100vh (off screen) * Paggamit: * animation: kf-bounce 3s kasayon-sa; * --kf-bounce-gikan sa: 200px; // ambak gikan sa 200px nga gitas-on */
@keyframes kf-bounce { 0% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -1); }
34% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -0.4); }
55% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -0.2); }
72% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -0.1); }
85% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -0.05); }
94% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -0.025); }
99% { paghubad: 0 calc(var(--kf-bounce-gikan sa, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { paghubad: 0 0; animation-timing-function: ease-out; } }
Ang mga animation sama sa "elastic" medyo trickier tungod sa mga kalkulasyon sa sulod sa keyframes. Kinahanglan namon nga ipasabut ang --kf-elastic-from-X ug --kf-elastic-from-Y nga gilain (ang duha opsyonal), ug dungan nga gitugotan nila kami nga maghimo usa ka pagkamaunat nga agianan gikan sa bisan unsang punto sa screen.
/* * Elastic In - elastic nga entrance animation * Paggamit --kf-elastic-from-X ug --kf-elastic-from-Y aron makontrol ang posisyon sa pagsugod * Default: mosulod gikan sa taas nga sentro (0, -100vh) * Paggamit: * animation: kf-elastic-in 2s kasayon-in-out pareho; * --kf-elastic-from-X: -50px; * --kf-elastic-gikan sa-Y: -200px; // pagsulod gikan sa (-50px, -200px) */
@keyframes kf-elastic-in { 0% { paghubad: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { hubaron: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { paghubad: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { hubaron: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { hubaron: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { hubaron: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { paghubad: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { paghubad: 0 0; } }
Kini nga pamaagi makapasayon sa paggamit pag-usab ug pag-customize sa mga advanced keyframes sa among proyekto, pinaagi lang sa pag-ilis sa usa ka custom property.
.bounce-and-zoom { animation: kf-bounce 3s nga kadali, kf-zoom 3s linear; --kf-zoom-gikan sa: 0; }
.bounce-and-slide { animation-komposisyon: idugang; /* Ang duha ka animation naggamit ug hubad */ animation: kf-bounce 3s nga kadali, kf-slide-in 3s ease-out; --kf-slide-gikan sa: -200px; }
.elastic-in { animation: kf-elastic-in 2s ease-in-out pareho; }
Tan-awa ang Pen Keyframes Token - Demo 7 [gisawang] ni Amit Sheen. Hangtud niini nga punto, among nakita kung giunsa namo pagkonsolida ang mga keyframe sa maalamon ug episyente nga paagi. Siyempre, mahimo nimong i-tweak ang mga butang aron mas mohaum sa mga panginahanglan sa imong proyekto, apan gisakup namon ang mga pananglitan sa daghang kasagarang mga animation ug mga kaso sa adlaw-adlaw nga paggamit. Ug uban niining mga keyframe nga mga token sa lugar, aduna na kitay gamhanang mga bloke sa pagtukod alang sa pagmugna og makanunayon, mamentinar nga mga animation sa tibuok proyekto. Wala nay nadoble nga keyframes, wala nay global scope conflicts. Usa lang ka limpyo, kombenyente nga paagi sa pagdumala sa tanan namong mga panginahanglanon sa animation. Apan ang tinuod nga pangutana mao: Giunsa nato paghimo kini nga mga bloke sa pagtukod? Gihiusa Kini Tanan Nakita namon nga ang paghiusa sa mga batakang keyframe nga mga token yano ra. Wala kami magkinahanglan og bisan unsa nga espesyal apan sa paghubit sa una nga animation, paghubit sa ikaduha, itakda ang mga variable kung gikinahanglan, ug mao kana. /* Fade in + slide in */ .toast { animation: kf-fade-sa 0.4s, kf-slide-sa 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-gikan sa: 0 40px; }
/* Zoom in + fade in */ .modal { animation: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-gikan sa: 0.7; --kf-zoom-sa: 1; }
/* Pag-slide sa + pulso */ .pahibalo { animation: kf-slide-sa 0.5s, kf-pulse 1.2s kasayon-in-out walay kinutuban nga alternatibo; --kf-slide-gikan sa: -100px 0; --kf-pulse-scale-gikan sa: 0.95; --kf-pulse-scale-sa: 1.05; }
Nindot ning mga kombinasyon kay ang matag animation nagtarget ug lahi nga propyedad: opacity, transform (translate/scale), ug uban pa. Apan usahay adunay mga panagbangi, ug kinahanglan natong masayran kung ngano ug unsaon pag-atubang niini. Kung ang duha ka mga animation mosulay sa pag-animate sa parehas nga kabtangan - pananglitan, pareho nga animating scale o pareho nga nag-animate nga opacity - ang sangputanan dili sama sa imong gipaabut. Sa kasagaran, usa ra sa mga animation ang aktuwal nga magamit sa kana nga kabtangan, nga mao ang katapusan sa lista sa animation. Kini usa ka limitasyon kung giunsa pagdumala sa CSS ang daghang mga animation sa parehas nga kabtangan. Pananglitan, dili kini molihok sama sa gituyo tungod kay ang kf-pulse animation ra ang magamit. .bad-combo { animation: kf-zoom 0.5s sa unahan, kf-pulse 1.2s walay kinutuban nga alternatibo; --kf-zoom-gikan sa: 0.5; --kf-zoom-sa: 1.2; --kf-pulse-scale-gikan sa: 0.8; --kf-pulse-scale-sa: 1.1; }
Pagdugang sa Animasyon Ang pinakasimple ug labing direkta nga paagi sa pagdumala sa daghang mga animation nga makaapekto sa parehas nga kabtangan mao ang paggamit sa kabtangan nga komposisyon sa animation. Sa kataposang pananglitan sa ibabaw, ang kf-pulse animation nagpuli sa kf-zoom animation, mao nga dili nato makita ang inisyal nga pag-zoom ug dili makuha ang gipaabot nga sukod sa 1.2. Pinaagi sa pagbutang sa animation-komposisyon aron idugang, among gisultihan ang browser nga ikombinar ang duha ka animation. Kini naghatag kanato sa resulta nga atong gusto. .komponent-duha { animation-komposisyon: idugang; }
Tan-awa ang Pen Keyframes Token - Demo 8 [gisawang] ni Amit Sheen. Kini nga pamaagi maayo alang sa kadaghanan sa mga kaso diin gusto namon nga maghiusa sa mga epekto sa parehas nga kabtangan. Mapuslanon usab kini kung kinahanglan naton nga isagol ang mga animation nga adunay mga static nga kantidad sa kabtangan. Pananglitan, kung aduna kitay elemento nga naggamit sa propyedad sa paghubad aron ipahiluna kini sa eksakto kung asa nato gusto, ug dayon gusto namong i-animate kini gamit ang kf-slide-in keyframes, makakuha kita og dili maayo nga makita nga paglukso nga walay animation-composition. Tan-awa ang Pen Keyframes Token - Demo 9 [gisawang] ni Amit Sheen. Uban sa animation-komposisyon nga gitakda nga idugang, ang animation hapsay nga gihiusa sa anaa napagbag-o, aron ang elemento magpabilin sa lugar ug mo-animate sama sa gipaabut. Animation Stagger Ang laing paagi sa pagdumala sa daghang mga animation mao ang "pag-uyog" kanila - nga mao, pagsugod sa ikaduha nga animation gamay pagkahuman sa una. Dili kini usa ka solusyon nga magamit alang sa matag kaso, apan kini mapuslanon kung kami adunay usa ka entrance animation nga gisundan sa usa ka padayon nga animation. /* fade in + opacity pulse */ .pahibalo { animation: kf-fade-in 2s ease-out, kf-pulso 0.5s 2s kasayon-in-out walay kinutuban nga alternatibo; --kf-pulse-opacity-ngadto sa: 0.5; }
Tan-awa ang Pen Keyframes Token - Demo 10 [gisawang] ni Amit Sheen. Importante ang Order Usa ka dako nga bahin sa mga animation nga among gitrabahoan naggamit sa pagbag-o nga kabtangan. Sa kadaghanan nga mga kaso, kini mas sayon. Adunay usab kini bentaha sa pasundayag tungod kay ang pagbag-o sa mga animation mahimo nga gipadali sa GPU. Apan kung mogamit kita og mga pagbag-o, kinahanglan natong dawaton nga ang han-ay sa atong paghimo sa atong mga pagbag-o importante. Daghan. Sa among mga keyframe hangtod karon, gigamit namon ang mga indibidwal nga pagbag-o. Sumala sa mga espekulasyon, kini kanunay nga gigamit sa usa ka piho nga han-ay: una, ang elemento mahubad, dayon i-rotate, dayon sukdanan. Kini makatarunganon ug mao ang gipaabut sa kadaghanan kanato. Bisan pa, kung gamiton naton ang pagbag-o nga kabtangan, ang pagkasunud kung diin gisulat ang mga gimbuhaton mao ang pagkasunud kung diin kini gipadapat. Sa kini nga kaso, kung atong ibalhin ang usa ka butang nga 100 ka pixel sa X-axis ug dayon i-rotate kini sa 45 degrees, dili kini parehas sa una nga pag-rotate niini sa 45 degrees ug dayon ibalhin kini sa 100 ka pixel. /* Pink square: Paghubad una, dayon i-rotate */ .pananglitan-usa { pagbag-o: translateX(100px) rotate(45deg); }
/* Green square: I-rotate una, dayon i-translate */ .pananglitan-duha { pagbag-o: rotate(45deg) translateX(100px); }
Tan-awa ang Pen Keyframes Token - Demo 11 [gisawang] ni Amit Sheen. Apan sumala sa han-ay sa pagbag-o, ang tanan nga indibidwal nga pagbag-o - tanan nga among gigamit alang sa keyframes nga mga token - mahitabo sa wala pa ang pagbag-o nga mga gimbuhaton. Kana nagpasabut nga bisan unsa nga imong gibutang sa pagbag-o nga kabtangan mahitabo pagkahuman sa mga animation. Apan kung imong gibutang, pananglitan, paghubad kauban ang kf-spin keyframes, ang paghubad mahitabo sa wala pa ang animation. Naglibog pa?! Kini modala ngadto sa mga sitwasyon diin ang static nga mga bili mahimong hinungdan sa lain-laing mga resulta alang sa sama nga animation, sama sa mosunod nga kaso:
/* Komon nga animation para sa duha ka spinner */ .spinner { animation: kf-spin 1s linear nga walay katapusan; }
/* Pink spinner: hubaron una pa tuyok (indibidwal nga pagbag-o) */ .spinner-pink { paghubad: 100% 50%; }
/* Green spinner: tuyok dayon hubaron (function order) */ .spinner-green { pagbag-o: paghubad(100%, 50%); }
Tan-awa ang Pen Keyframes Token - Demo 12 [gisawang] ni Amit Sheen. Imong makita nga ang unang spinner (pink) makakuha og hubad nga mahitabo sa dili pa ang pagtuyok sa kf-spin, mao nga mobalhin una kini sa iyang dapit ug dayon motuyok. Ang ikaduha nga spinner (berde) makakuha og translate() function nga mahitabo human sa indibidwal nga pagbag-o, mao nga ang elemento una nga magtuyok, dayon mobalhin sa kasamtangan nga anggulo niini, ug makuha nato ang lapad nga orbit nga epekto. Dili, dili kini bug. Usa ra kini sa mga butang nga kinahanglan naton mahibal-an bahin sa CSS ug ibutang sa hunahuna kung nagtrabaho uban ang daghang mga animation o daghang pagbag-o. Kung gikinahanglan, mahimo ka usab maghimo ug dugang nga set sa kf-spin-alt keyframes nga nagtuyok sa mga elemento gamit ang rotate() function. Gipamub-an ang Paglihok Ug samtang naghisgot kami bahin sa alternatibong mga keyframe, dili namo mabalewala ang kapilian nga "walay animation". Usa sa pinakadako nga bentaha sa paggamit sa keyframes token mao nga ang accessibility mahimong lutoon sa, ug kini mao ang tinuod nga sayon buhaton. Pinaagi sa pagdesinyo sa among mga keyframes nga naa sa hunahuna ang accessibility, among masiguro nga ang mga tiggamit nga gusto sa pagkunhod sa paglihok makakuha og usa ka hapsay, dili kaayo makabalda nga kasinatian, nga wala’y dugang nga trabaho o pagdoble sa code. Ang eksaktong kahulogan sa "Reduced Motion" mahimong mausab gamay gikan sa usa ka animation ngadto sa lain, ug gikan sa proyekto ngadto sa proyekto, apan aniay pipila ka importante nga mga punto nga hinumduman: Gipahilom ang mga Keyframe Samtang ang pipila ka mga animation mahimong mahumok o mapahinay, adunay uban nga kinahanglan nga mawala sa hingpit kung gihangyo ang pagkunhod sa paglihok. Ang mga animation sa pulso usa ka maayong pananglitan. Aron masiguro nga kini nga mga animation dili modagan sa pagkunhod sa motion mode, mahimo ra namon nga iputos kini sa angay nga pangutana sa media.
@media (gusto-giminusan-lihok: walay gusto) { @keyfrmaes kf-pulso { gikan sa { sukdanan: var(--kf-pulse-scale-gikan sa, 1); opacity: var(--kf-pulse-opacity-gikan sa, 1); } sa { sukdanan: var(--kf-pulse-scale-to, 1); opacity:var(--kf-pulse-opacity-to, 1); } } }
Gipaneguro niini nga ang mga tiggamit nga nagtakda sa mga gusto-giminusan nga paglihok aron makunhuran dili makakita sa animation ug makakuha usa ka kasinatian nga mohaum sa ilang gusto. Diha-diha dayon Adunay pipila ka mga keyframe nga dili nato basta-basta matangtang, sama sa entrance animations. Ang bili kinahanglang mausab, kinahanglang buhion; kung dili, ang elemento wala’y husto nga kantidad. Apan sa pagkunhod sa paglihok, kini nga pagbalhin gikan sa inisyal nga kantidad kinahanglan nga dayon. Aron makab-ot kini, atong ipasabut ang usa ka dugang nga set sa keyframes diin ang bili molukso dayon ngadto sa katapusan nga estado. Kini nahimong among default keyframes. Dayon, atong idugang ang regular nga keyframes sulod sa media query para sa prefers-reduced-motion set to no-preference, sama sa miaging pananglitan. /* pop in diha-diha alang sa pagkunhod sa paglihok */ @keyframes kf-zoom { gikan sa, ngadto sa { sukdanan: var(--kf-zoom-to, 1); } }
@media (gusto-giminusan-lihok: walay gusto) { /* Orihinal nga zoom keyframes */ @keyframes kf-zoom { gikan sa { scale: var(--kf-zoom-gikan sa, 0.8); } sa { sukdanan: var(--kf-zoom-to, 1); } } }
Niining paagiha, ang mga tiggamit nga gusto sa pagkunhod sa paglihok makakita sa elemento nga makita dayon sa katapusan nga kahimtang niini, samtang ang tanan makadawat sa animated nga transisyon. Ang Mahumok nga Pamaagi Adunay mga kaso diin gusto namon nga magpadayon ang pipila nga paglihok, apan labi ka humok ug kalmado kaysa sa orihinal nga animation. Pananglitan, mahimo natong ilisan ang usa ka bounce entrance nga adunay malumo nga fade-in.
@keyframes kf-bounce { /* Soft fade-in para sa pagkunhod sa paglihok */ }
@media (gusto-giminusan-lihok: walay gusto) { @keyframes kf-bounce { /* Orihinal nga bounce keyframes */ } }
Karon, ang mga tiggamit nga adunay gipagaan nga pagkunhod sa paglihok nakakuha gihapon usa ka pagbati sa hitsura, apan kung wala ang grabe nga paglihok sa usa ka bounce o pagkamaunat nga animation. Uban sa mga bloke sa pagtukod sa lugar, ang sunod nga pangutana mao kung giunsa kini paghimo nga bahin sa aktwal nga dagan sa trabaho. Ang pagsulat sa flexible keyframes usa ka butang, apan ang paghimo niini nga kasaligan sa usa ka dako nga proyekto nanginahanglan pipila ka mga estratehiya nga kinahanglan nakong makat-on sa lisud nga paagi. Mga Istratehiya sa Pag-implementar ug Pinakamaayo nga Praktis Sa higayon nga kita adunay usa ka lig-on nga librarya sa keyframes tokens, ang tinuod nga hagit mao ang paagi sa pagdala kanila ngadto sa adlaw-adlaw nga buhat.
Ang tintasyon mao ang paghulog sa tanan nga keyframes sa usa ka higayon ug ipahayag ang problema nga nasulbad, apan sa praktis akong nakaplagan nga ang labing maayo nga mga resulta gikan sa anam-anam nga pagsagop. Pagsugod sa labing kasagaran nga mga animation, sama sa fade o slide. Kini dali nga mga kadaugan nga nagpakita dayon nga kantidad nga wala magkinahanglan daghang mga pagsulat pag-usab. Ang pagngalan maoy laing punto nga angayng hatagan ug pagtagad. Ang usa ka makanunayon nga prefix o namespace nagpaklaro kung unsang mga animation ang mga token ug kung diin ang mga lokal nga one-off. Gipugngan usab niini ang mga aksidente nga pagbangga ug gitabangan ang mga bag-ong miyembro sa team nga mailhan ang gipaambit nga sistema sa usa ka pagtan-aw. Ang dokumentasyon sama ka importante sa code mismo. Bisan ang usa ka mubo nga komento sa ibabaw sa matag keyframes token makatipig oras sa pagtag-an sa ulahi. Ang usa ka developer kinahanglan nga makahimo sa pag-abli sa mga token file, pag-scan sa epekto nga ilang gikinahanglan, ug pagkopya sa pattern sa paggamit diretso sa ilang component. Ang pagka-flexible mao ang naghimo niini nga pamaagi nga takus sa paningkamot. Pinaagi sa pagbutyag sa makatarunganong custom nga mga kabtangan, naghatag kamig lawak sa mga team aron ipahiangay ang animation nga dili makaguba sa sistema. Sa samang higayon, sulayi nga dili sobra ka komplikado. Ihatag ang mga knobs nga hinungdanon ug ipadayon ang uban nga opinyon. Sa katapusan, hinumdumi ang accessibility. Dili tanan nga animation nanginahanglan usa ka pagkunhod nga alternatibo sa paglihok, apan daghan ang kinahanglan. Ang pag-bake niini nga mga pag-adjust sa sayo nagpasabut nga dili na namo kinahanglan nga i-retrofit kini sa ulahi, ug kini nagpakita sa usa ka lebel sa pag-atiman nga mamatikdan sa among mga tiggamit bisan kung wala nila kini gihisgutan.
Sa akong kasinatian, ang pagtratar sa mga keyframe token isip kabahin sa among design tokens workflow mao ang nakapahimo kanila nga magpabilin. Kung naa na sila sa lugar, mohunong sila nga mobati nga sama sa mga espesyal nga epekto ug mahimong bahin sa laraw sa laraw, usa ka natural nga extension kung giunsa ang paglihok ug pagtubag sa produkto. Pagputos Ang mga animation mahimong usa sa labing malipayon nga mga bahin sa mga interface sa pagtukod, apan kung wala’y istruktura, mahimo usab kini nga usa sa labing dako nga gigikanan sa kahigawad. Pinaagi sa pagtratar sa mga keyframes isip mga token, imong gikuha ang usa ka butang nga kasagarang gubot ug lisud pagdumala ug himoon kini nga usa ka tin-aw, matag-an nga sistema. Ang tinuod nga bili dili lang sa pagtipig sa pipila ka linya sa code. Anaa sa pagsalig nga kung mogamit ka usa ka fade, slide, zoom, o spin, nahibal-an nimo kung giunsa kini molihok sa tibuuk nga proyekto. Anaa kini sa pagka-flexible nga gikan sa naandan nga mga kabtangan nga wala’y kagubot sa walay katapusan nga mga kalainan. Ug kini anaa sa accessibility nga gitukod sa pundasyon kay sa gidugang ingonusa ka afterthink. Nakita nako kini nga mga ideya nga nagtrabaho sa lainlaing mga team ug lainlaing mga codebase, ug ang sumbanan kanunay nga parehas. Kung nabutang na ang mga token, ang mga keyframe mohunong nga usa ka nagkatag nga koleksyon sa mga limbong ug mahimong bahin sa sinultian sa disenyo. Gihimo nila ang produkto nga mobati nga mas tinuyo, mas makanunayon, ug mas buhi. Kung magkuha ka usa ka butang gikan sa kini nga artikulo, himoa kini: ang mga animation angayan sa parehas nga pag-atiman ug istruktura nga gihatag na namon sa mga kolor, typography, ug gilay-on. Ang usa ka gamay nga pagpamuhunan sa mga token sa keyframe nagbayad matag higayon nga molihok ang imong interface.
