Immaġina dan: tissieħeb fi proġett ġdid, tgħaddas fil-codebase, u fl-ewwel ftit sigħat, tiskopri xi ħaġa familjari frustranti. Imxerrda fl-stylesheets, issib definizzjonijiet multipli @keyframes għall-istess animazzjonijiet bażiċi. Tliet effetti differenti ta 'fade-in, żewġ jew tliet varjazzjonijiet ta' slide, numru żgħir ta 'animazzjonijiet taż-żum, u mill-inqas żewġ animazzjonijiet ta' spin differenti għaliex, ukoll, għaliex le? @keyframes polz { minn { skala: 1; } lil { skala: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1.2; } }
Jekk dan ix-xenarju jinstema' familjari, m'intix waħdek. Fl-esperjenza tiegħi f'diversi proġetti, waħda mill-aktar rebħiet konsistenti konsistenti li nista' nwassal hija li nikkonsolida u nistandardizza l-keyframes. Sar mudell tant affidabbli li issa nistenna bil-ħerqa dan it-tindif bħala wieħed mill-ewwel kompiti tiegħi fuq kwalunkwe codebase ġdid. Il-Loġika Wara Il-Kaos Din is-sensja tagħmel sens perfett meta taħseb dwarha. Aħna lkoll nużaw l-istess animazzjonijiet fundamentali fix-xogħol tagħna ta 'kuljum: fades, slides, zooms, spins, u effetti komuni oħra. Dawn l-animazzjonijiet huma pjuttost sempliċi, u huwa faċli li tfassal definizzjoni ta' @keyframes malajr biex twettaq ix-xogħol. Mingħajr sistema ta 'animazzjoni ċentralizzata, l-iżviluppaturi naturalment jiktbu dawn il-frames ewlenin mill-bidu, mingħajr ma jkunu jafu li animazzjonijiet simili diġà jeżistu x'imkien ieħor fil-codebase. Dan huwa speċjalment komuni meta taħdem f'arkitetturi bbażati fuq komponenti (li ħafna minna nagħmlu f'dawn il-jiem), peress li t-timijiet ħafna drabi jaħdmu b'mod parallel f'partijiet differenti tal-applikazzjoni. Ir-riżultat? Kaos animazzjoni. Il-Problema Żgħira L-aktar kwistjonijiet ovvji bid-duplikazzjoni tal-frames ewlenin huma ħin ta 'żvilupp moħli u nefħa tal-kodiċi bla bżonn. Definizzjonijiet ta' frames ewlenin multipli jfissru postijiet multipli biex taġġorna meta jinbidlu r-rekwiżiti. Għandek bżonn taġġusta l-ħin tal-animazzjoni fade tiegħek? Int ser ikollok bżonn tikkaċċa kull istanza fil-codebase tiegħek. Trid tistandardizza l-funzjonijiet ta' faċilitazzjoni? Xorti tajba biex issib il-varjazzjonijiet kollha. Din il-multiplikazzjoni ta 'punti ta' manutenzjoni tagħmel anke aġġornamenti sempliċi ta 'animazzjoni biċċa xogħol li tieħu ħafna ħin. Il-Problema Akbar Din id-duplikazzjoni tal-keyframes toħloq problema ferm aktar insidjuża li tinsab taħt il-wiċċ: in-nassa tal-ambitu globali. Anke meta taħdem ma 'arkitetturi bbażati fuq komponenti, CSS keyframes huma dejjem definiti fl-ambitu globali. Dan ifisser li l-keyframes kollha japplikaw għall-komponenti kollha. Dejjem. Iva, l-animazzjoni tiegħek mhux bilfors tuża l-frames ewlenin li ddefinijt fil-komponent tiegħek. Juża l-aħħar keyframes li jaqblu mal-istess isem eżatt li ġew mgħobbija fl-ambitu globali. Sakemm il-keyframes kollha tiegħek huma identiċi, din tista' tidher kwistjoni minuri. Imma fil-mument li trid tippersonalizza animazzjoni għal każ ta 'użu speċifiku, int fl-inkwiet, jew agħar minn hekk, tkun dak li tikkawżahom. Jew l-animazzjoni tiegħek ma taħdimx minħabba li komponent ieħor mgħobbi wara tiegħek, jissostitwixxi l-keyframes tiegħek, jew il-komponent tiegħek jgħabbi l-aħħar u aċċidentalment ibiddel l-imġieba tal-animazzjoni għal kull komponent ieħor billi juża l-isem ta 'dak il-keyframe, u tista' lanqas tirrealizzah. Hawn eżempju sempliċi li juri l-problema: .komponent-one { /* stili ta' komponenti */ animazzjoni: polz 1s ease-in-out infinita alternattiva; }
/* din id-definizzjoni @keyframes mhux se taħdem */ @keyframes polz { minn { skala: 1; } lil { skala: 1.1; } }
/* aktar tard fil-kodiċi... */
.komponent-tnejn { /* stili ta' komponenti */ animazzjoni: polz 1s ease-in-out infinita; }
/* dan il-keyframes se japplika għaż-żewġ komponenti */ @keyframes polz { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1.2; } }
Iż-żewġ komponenti jużaw l-istess isem tal-animazzjoni, iżda t-tieni definizzjoni @keyframes tissostitwixxi l-ewwel waħda. Issa kemm il-komponent wieħed kif ukoll it-tieni komponent se jużaw it-tieni keyframes, irrispettivament minn liema komponent iddefinixxa liema keyframes. Ara l-Pen Keyframes Tokens - Demo 1 [forked] minn Amit Sheen. L-agħar parti? Dan spiss jaħdem perfettament fl-iżvilupp lokali iżda jinkiser misterjuż fil-produzzjoni meta l-proċessi tal-bini jibdlu l-ordni tat-tagħbija tal-stylesheets tiegħek. Tispiċċa b'animazzjonijiet li jġibu ruħhom b'mod differenti skont liema komponenti jitgħabbew u f'liema sekwenza. Is-Soluzzjoni: Keyframes Unifikati It-tweġiba għal dan il-kaos hija sorprendentement sempliċi: keyframes dinamiċi predefiniti maħżuna fi stylesheet kondiviża. Minflok ma nħallu kull komponent jiddefinixxi l-animazzjonijiet tiegħu stess, noħolqu keyframes ċentralizzati li huma dokumentati tajjeb, faċli biexużu, manutenzjoni, u mfassla għall-bżonnijiet speċifiċi tal-proġett tiegħek. Aħseb fiha bħala tokens ta' frames ewlenin. Hekk kif nużaw tokens għall-kuluri u l-ispazjar, u ħafna minna diġà nużaw tokens għal proprjetajiet ta 'animazzjoni, bħal tul u funzjonijiet ta' faċilitazzjoni, għaliex ma nużawx tokens għal keyframes ukoll? Dan l-approċċ jista 'jintegra b'mod naturali ma' kwalunkwe fluss tax-xogħol tat-token tad-disinn attwali li qed tuża, filwaqt li jsolvi kemm il-problema żgħira (duplikazzjoni tal-kodiċi) kif ukoll il-problema akbar (kunflitti ta 'skop globali) f'daqqa. L-idea hija sempliċi: toħloq sors uniku ta 'verità għall-animazzjonijiet komuni tagħna kollha. Din il-folja tal-istil kondiviża fiha keyframes maħdumin bir-reqqa li jkopru l-mudelli tal-animazzjoni li fil-fatt juża l-proġett tagħna. Mhux aktar guessing jekk animazzjoni fade diġà teżisti x'imkien fil-codebase tagħna. Mhux aktar aċċidentalment tikteb fuqu animazzjonijiet minn komponenti oħra. Imma hawn iċ-ċavetta: dawn mhumiex biss animazzjonijiet statiċi tal-kopja-pejst. Huma ddisinjati biex ikunu dinamiċi u customizable permezz ta’ proprjetajiet personalizzati tas-CSS, li jippermettulna nżommu l-konsistenza filwaqt li xorta jkollna l-flessibbiltà li naddattaw animazzjonijiet għal każijiet ta’ użu speċifiċi, bħal jekk għandek bżonn animazzjoni ta’ “polz” kemmxejn akbar f’post wieħed. Bini L-Ewwel Keyframes Token Wieħed mill-ewwel frott baxx li għandna nindirizzaw huwa l-animazzjoni "fade-in". F'wieħed mill-proġetti reċenti tiegħi, sibt aktar minn tużżana definizzjonijiet separati ta 'fade-in, u iva, kollha sempliċement animaw l-opaċità minn 0 għal 1. Mela, ejja noħolqu stil ġdid, sejjaħlu kf-tokens.css, jimportawh fil-proġett tagħna, u poġġi l-keyframes tagħna b'kummenti xierqa ġewwa fih. /* keyframes-tokens.css */
/* * Fade In - fade animazzjoni tad-daħla * Użu: animazzjoni: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { minn { opaċità: 0; } lil { opaċità: 1; } }
Din id-dikjarazzjoni unika ta' @keyframes tissostitwixxi dawk l-animazzjonijiet kollha mferrxa ta' fade-in madwar il-codebase tagħna. Nadif, sempliċi, u applikabbli globalment. U issa li għandna dan it-token definit, nistgħu nużawh minn kwalunkwe komponent matul il-proġett tagħna: .modali { animazzjoni: kf-fade-in 0.3s ease-out; }
.tooltip { animazzjoni: kf-fade-in 0.2s ease-in-out; }
.notifika { animazzjoni: kf-fade-in 0.5s ease-out; }
Ara l-Pen Keyframes Tokens - Demo 2 [forked] minn Amit Sheen. Nota: Qed nużaw prefiss kf- fl-ismijiet kollha tagħna @keyframes. Dan il-prefiss iservi bħala spazju tal-isem li jipprevjeni kunflitti ta’ ismijiet ma’ animazzjonijiet eżistenti fil-proġett u jagħmilha ċara immedjatament li dawn il-frames ewlenin ġejjin mill-fajl tat-tokens tal-frames ewlenin tagħna. Nagħmlu Slide Dinamika Il-keyframes kf-fade-in jaħdmu tajjeb għax huwa sempliċi u ftit hemm lok biex tħawwad l-affarijiet. F'animazzjonijiet oħra, madankollu, jeħtieġ li nkunu ħafna aktar dinamiċi, u hawnhekk nistgħu nisfruttaw il-qawwa enormi tal-proprjetajiet tad-dwana CSS. Dan huwa fejn it-tokens keyframes verament shine meta mqabbla ma 'animazzjonijiet statiċi mferrxa. Ejja nieħdu xenarju komuni: animazzjonijiet "slide-in". Imma slide minn fejn? 100px mil-lemin? 50% mix-xellug? Għandu jidħol minn fuq tal-iskrin? Jew forsi f'wiċċ l-ilma mill-qiegħ? Tant possibbiltajiet, iżda minflok noħolqu keyframes separati għal kull direzzjoni u kull varjazzjoni, nistgħu nibnu token flessibbli wieħed li jadatta għax-xenarji kollha: /* * Slide In - animazzjoni ta' slide direzzjonali * Uża --kf-slide-from biex tikkontrolla d-direzzjoni * Default: tiżżerżaq 'il ġewwa mix-xellug (-100%) * Użu: * animazzjoni: kf-slide-in 0.3s ease-out; * --kf-slide-minn: -100px 0; // slide mix-xellug * --kf-slide-minn: 100px 0; // slide mil-lemin * --kf-slide-minn: 0 -50px; // slide minn fuq */
@keyframes kf-slide-in { minn { ittraduċi: var(--kf-slide-from, -100% 0); } lil { ittraduċi: 0 0; } }
Issa nistgħu nużaw dan it-token wieħed ta' @keyframes għal kwalunkwe direzzjoni ta' slide sempliċement billi nibdlu l-propjetà tad-dwana --kf-slide-from: .sidebar { animazzjoni: kf-slide-in 0.3s ease-out; /* Juża valur predefinit: slides mix-xellug */ }
.notifika { animazzjoni: kf-slide-in 0.4s ease-out; --kf-slide-minn: 0 -50px; /* slide minn fuq */ }
.modali { animazzjoni: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-minn: 50px 50px; /* slide minn isfel għal-lemin */ }
Dan l-approċċ jagħtina flessibilità inkredibbli filwaqt li żżomm il-konsistenza. Dikjarazzjoni waħda keyframe, possibbiltajiet infiniti. Ara l-Pen Keyframes Tokens - Demo 3 [forked] minn Amit Sheen. U jekk irridu nagħmlu l-animazzjonijiet tagħna saħansitra aktar flessibbli, li jippermettu wkoll effetti ta '"slide-out", nistgħusempliċement żid --kf-slide-to proprjetà tad-dwana, simili għal dak li ser naraw fit-taqsima li jmiss. Bidirezzjonali Zoom Keyframes Animazzjoni komuni oħra li tiġi duplikata fost il-proġetti hija l-effetti ta '"zoom". Kemm jekk huwa żieda sottili għal messaġġi toast, zoom-in drammatiku għall-modali, jew effett ġentili ta 'scale-down għall-intestaturi, animazzjonijiet taż-żum huma kullimkien. Minflok ma noħolqu keyframes separati għal kull valur ta’ skala, ejja nibnu sett wieħed flessibbli ta’ keyframes kf-zoom:
/* * Zoom - animazzjoni fuq skala * Uża --kf-zoom-from u --kf-zoom-to biex tikkontrolla l-valuri tal-iskala * Default: zooms minn 80% għal 100% (0.8 għal 1) * Użu: * animazzjoni: kf-zoom 0.2s ease-out; * --kf-zoom-minn: 0.5; --kf-zoom-to: 1; // zoom minn 50% għal 100% * --kf-zoom-minn: 1; --kf-zoom-to: 0; // zoom minn 100% għal 0% * --kf-zoom-minn: 1; --kf-zoom-to: 1.1; // zoom minn 100% għal 110% */
@keyframes kf-zoom { minn { skala: var(--kf-zoom-minn, 0.8); } lil { skala: var(--kf-zoom-to, 1); } }
B'definizzjoni waħda, nistgħu niksbu kwalunkwe varjazzjoni taż-żum li neħtieġu: .toast { animazzjoni: kf-slide-in 0.2s, kf-zoom 0.4s ease-out; --kf-slide-minn: 0 100%; /* slide minn fuq */ /* Juża zoom default: skali minn 80% għal 100% */ }
.modali { animazzjoni: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-minn: 0; /* zoom drammatiku minn 0% sa 100% */ }
.intestatura { animazzjoni: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-zoom-minn: 1.2; --kf-zoom-to: 0.8; /* tnaqqis ġentili */ }
Id-default ta '0.8 (80%) jaħdem perfettament għall-biċċa l-kbira tal-elementi tal-UI, bħal messaġġi toast u kards, filwaqt li għadu faċli biex tippersonalizza għal każijiet speċjali. Ara l-Pen Keyframes Tokens - Demo 4 [forked] minn Amit Sheen. Jista' jkun li ndunajt xi ħaġa interessanti fl-eżempji riċenti: ilna ngħaqqdu l-animazzjonijiet. Wieħed mill-vantaġġi ewlenin tal-ħidma mat-tokens @keyframes huwa li huma ddisinjati biex jintegraw bla xkiel ma 'xulxin. Din il-kompożizzjoni bla xkiel hija intenzjonata, mhux aċċidentali. Niddiskutu l-kompożizzjoni tal-animazzjoni f'aktar dettall aktar tard, inkluż fejn jistgħu jsiru problematiċi, iżda l-biċċa l-kbira tal-kombinazzjonijiet huma sempliċi u faċli biex jiġu implimentati. Nota: Waqt li nikteb dan l-artiklu, u forsi minħabba li nktibtu, sibt ruħi naħseb mill-ġdid l-idea kollha tal-animazzjonijiet tad-dħul. Bl-avvanzi reċenti kollha fis-CSS, għad għandna bżonnhom? Fortunatament, Adam Argyle esplora l-istess mistoqsijiet u esprimahom b'mod brillanti fil-blog tiegħu. Dan ma jikkontradixxix dak li hemm miktub hawn, iżda jippreżenta approċċ ta 'min jitqies, speċjalment jekk il-proġetti tiegħek jiddependu ħafna fuq animazzjonijiet tad-dħul. Animazzjonijiet Kontinwi Filwaqt li l-animazzjonijiet tad-dħul, bħal "fade", "slide", u "zoom" iseħħu darba u mbagħad jieqfu, animazzjonijiet kontinwi jiġbdu l-attenzjoni jew jindikaw attività kontinwa. Iż-żewġ animazzjonijiet kontinwi l-aktar komuni li niltaqa 'ma' huma "spin" (għall-indikaturi tat-tagħbija) u "polz" (għall-enfasi ta 'elementi importanti). Dawn l-animazzjonijiet jippreżentaw sfidi uniċi meta jiġu biex jinħolqu tokens ta’ keyframes. B'differenza animazzjonijiet tad-dħul li tipikament imorru minn stat għal ieħor, animazzjonijiet kontinwi jeħtieġ li jkunu customizable ħafna fil-mudelli ta 'mġieba tagħhom. L-Ispin Doctor Kull proġett jidher li juża animazzjonijiet spin multipli. Xi jduru lejn l-arloġġ, oħrajn kontra l-arloġġ. Xi wħud jagħmlu rotazzjoni waħda ta '360 grad, oħrajn jagħmlu dawriet multipli għal effett aktar mgħaġġel. Minflok ma noħolqu keyframes separati għal kull varjazzjoni, ejja nibnu spin waħda flessibbli li tieħu ħsieb ix-xenarji kollha:
/* * Spin - animazzjoni ta 'rotazzjoni * Uża --kf-spin-from u --kf-spin-to biex tikkontrolla l-firxa tar-rotazzjoni * Uża --kf-spin-turns biex tikkontrolla l-ammont tar-rotazzjoni * Default: idur minn 0deg għal 360deg (rotazzjoni sħiħa 1) * Użu: * animazzjoni: kf-spin 1s lineari infinita; * --kf-spin-dawriet: 2; // 2 rotazzjonijiet sħaħ * --kf-spin-minn: 0deg; --kf-spin-to: 180deg; // nofs rotazzjoni * --kf-spin-minn: 0deg; --kf-spin-to: -360deg; // kontra l-arloġġ */
@keyframes kf-spin { minn { dawwar: var(--kf-spin-from, 0deg); } lil { dawwar: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Issa nistgħu noħolqu kwalunkwe varjazzjoni ta 'spin li nħobbu:
.loading-spinner { animazzjoni: kf-spin 1s lineari infinita; /* Juża default: idur minn 0deg għal 360deg */ }
.fast-loader { animazzjoni: kf-spin 1.2s ease-in-out infinita alternattiva; --kf-spin-dawriet: 3; /* 3 rotazzjonijiet sħaħ għal kull direzzjoni għal kull ċiklu*/ }
.steped-reverse { animazzjoni: kf-spin 1.5s passi(8) infinita; --kf-spin-to: -360deg; /* kontra l-arloġġ */ }
.subtle-wiggle { animazzjoni: kf-spin 2s ease-in-out infinita alternattiva; --kf-spin-minn: -16deg; --kf-spin-to: 32deg; /* wiggle 36 grad: bejn -18deg u +18deg */ }
Ara l-Pen Keyframes Tokens - Demo 5 [forked] minn Amit Sheen. Is-sbuħija ta 'dan l-approċċ hija li l-istess keyframes jaħdmu għat-tagħbija ta' spinners, ikoni li jduru, effetti wiggle, u anke animazzjonijiet kumplessi b'ħafna dawriet. Il-Paradoss tal-Pulse L-animazzjonijiet tal-polz huma aktar delikati għaliex jistgħu "pulsaw" proprjetajiet differenti. Xi impuls l-iskala, oħrajn impuls l-opaċità, u xi proprjetajiet tal-kulur tal-polz bħall-luminożità jew saturazzjoni. Minflok noħolqu keyframes separati għal kull proprjetà, nistgħu noħolqu keyframes li jaħdmu ma 'kwalunkwe proprjetà CSS. Hawn eżempju ta' keyframe tal-polz b'għażliet ta' skala u opaċità:
/* * Pulse - animazzjoni pulsanti * Uża --kf-pulse-scale-from u --kf-pulse-scale-to biex tikkontrolla l-firxa tal-iskala * Uża --kf-pulse-opacity-from u --kf-pulse-opacity-to biex tikkontrolla l-firxa tal-opaċità * Default: l-ebda polz (il-valuri kollha 1) * Użu: * animazzjoni: kf-pulse 2s ease-in-out infinita alternattiva; * --kf-polz-scale-minn: 0.95; --kf-polz-scale-to: 1.05; // skala polz * --kf-polz-opaċità-minn: 0.7; --kf-opaċità tal-polz-to: 1; // polz tal-opaċità */
@keyframes kf-pulse { minn { skala: var(--kf-polz-skala-minn, 1); opaċità: var(--kf-polz-opaċità-minn, 1); } lil { skala: var(--kf-polz-scale-to, 1); opaċità: var(--kf-polz-opaċità-to, 1); } }
Dan joħloq polz flessibbli li jista' janima proprjetajiet multipli: .call-to-action { animazzjoni: kf-polz 0.6s alternattiv infinit; --kf-polz-opaċità-minn: 0.5; /* polz tal-opaċità */ }
.notifika-dot { animazzjoni: kf-pulse 0.6s ease-in-out infinita alternattiva; --kf-polz-scale-minn: 0.9; --kf-polz-scale-to: 1.1; /* polz tal-iskala */ }
.text-highlight { animazzjoni: kf-pulse 1.5s ease-out infinita; --kf-polz-scale-minn: 0.8; --kf-polz-opaċità-minn: 0.2; /* polz ta' skala u opaċità */ }
Ara l-Pen Keyframes Tokens - Demo 6 [forked] minn Amit Sheen. Dan il-keyframe wieħed kf-pulse jista 'jimmaniġġja kollox minn grabs ta' attenzjoni sottili għal punti ewlenin drammatiċi, filwaqt li jkun faċli biex tippersonalizza. Tħaffif Avvanzat Waħda mill-affarijiet kbar dwar l-użu ta 'tokens ta' keyframes hija kemm huwa faċli li tespandi l-librerija tal-animazzjoni tagħna u tipprovdi effetti li l-biċċa l-kbira tal-iżviluppaturi ma jiddejqux jiktbu mill-bidu, bħal elastiċi jew bounce. Hawn hu eżempju ta 'sempliċi token ta' keyframes "bounce" li juża proprjetà tad-dwana --kf-bounce-from biex jikkontrolla l-għoli tal-qabża. /* * Bounce - animazzjoni tad-daħla bouncing * Uża --kf-bounce-from biex tikkontrolla l-għoli tal-qabża * Default: jaqbeż minn 100vh (off screen) * Użu: * animazzjoni: kf-bounce 3s ease-in; * --kf-bounce-minn: 200px; // Aqbeż minn għoli ta' 200px */
@keyframes kf-bounce { 0% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { ittraduċi: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { ittraduċi: 0 0; animazzjoni-ħin-funzjoni: ease-out; } }
Animazzjonijiet bħal "elastiċi" huma daqsxejn aktar delikati minħabba l-kalkoli ġewwa l-keyframes. Għandna bżonn niddefinixxu --kf-elastic-from-X u --kf-elastic-from-Y separatament (it-tnejn huma fakultattivi), u flimkien ħallina noħolqu entratura elastika minn kwalunkwe punt fuq l-iskrin.
/* * Elastiku In - animazzjoni tad-daħla elastika * Uża --kf-elastic-from-X u --kf-elastic-from-Y biex tikkontrolla l-pożizzjoni tal-bidu * Default: jidħol miċ-ċentru ta' fuq (0, -100vh) * Użu: * animazzjoni: kf-elastic-in 2s ease-in-out it-tnejn; * --kf-elastiku-minn-X: -50px; * --kf-elastiku-minn-Y: -200px; // daħħal minn (-50px, -200px) */
@keyframes kf-elastic-in { 0% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { ittraduċi: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { ittraduċi: 0 0; } }
Dan l-approċċ jagħmilha faċli li terġa 'tintuża u tippersonalizza keyframes avvanzati madwar il-proġett tagħna, sempliċement billi tinbidel proprjetà personalizzata waħda.
.bounce-and-zoom { animazzjoni: kf-bounce 3s ease-in, kf-zoom 3s lineari; --kf-zoom-minn: 0; }
.bounce-and-slide { animazzjoni-kompożizzjoni: żid; /* Iż-żewġ animazzjonijiet jużaw translate */ animazzjoni: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-minn: -200px; }
.elastic-in { animazzjoni: kf-elastic-in 2s ease-in-out it-tnejn; }
Ara l-Pen Keyframes Tokens - Demo 7 [forked] minn Amit Sheen. Sa dan il-punt, rajna kif nistgħu nikkonsolidaw keyframes b'mod intelliġenti u effiċjenti. Ovvjament, tista 'tkun trid ttejjeb l-affarijiet biex taqdi aħjar il-ħtiġijiet tal-proġett tiegħek, iżda koprejna eżempji ta' diversi animazzjonijiet komuni u każijiet ta 'użu ta' kuljum. U b'dawn it-tokens keyframes f'posthom, issa għandna blokki ta 'bini b'saħħithom għall-ħolqien ta' animazzjonijiet konsistenti u li jistgħu jinżammu fil-proġett kollu. Ebda keyframes aktar duplikati, mhux aktar kunflitti ta 'skop globali. Sempliċement mod nadif u konvenjenti biex timmaniġġja l-ħtiġijiet kollha ta 'animazzjoni tagħna. Imma l-mistoqsija vera hija: Kif nikkomponu dawn il-blokki tal-bini flimkien? Inqegħdu Kollox Flimkien Rajna li l-kombinazzjoni ta 'tokens ta' keyframes bażiċi hija sempliċi. M'għandniex bżonn xi ħaġa speċjali iżda li niddefinixxu l-ewwel animazzjoni, niddefinixxu t-tieni waħda, issettja l-varjabbli kif meħtieġ, u dak hu. /* Fade in + slide in */ .toast { animazzjoni: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-minn: 0 40px; }
/* Zoom in + fade in */ .modali { animazzjoni: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-minn: 0.7; --kf-zoom-to: 1; }
/* Żerżaq + polz */ .notifika { animazzjoni: kf-slide-in 0.5s, kf-pulse 1.2s ease-in-out infinita alternattiva; --kf-slide-minn: -100px 0; --kf-polz-scale-minn: 0.95; --kf-polz-scale-to: 1.05; }
Dawn il-kombinazzjonijiet jaħdmu sabiħ minħabba li kull animazzjoni timmira proprjetà differenti: opaċità, trasformazzjoni (ittraduċi/skala), eċċ Imma kultant ikun hemm kunflitti, u għandna bżonn inkunu nafu għaliex u kif nittrattawhom. Meta żewġ animazzjonijiet jippruvaw janimaw l-istess proprjetà - per eżempju, kemm l-iskala animazzjoni jew it-tnejn li animaw l-opaċità - ir-riżultat mhux se jkun dak li tistenna. B'mod awtomatiku, waħda biss mill-animazzjonijiet hija attwalment applikata għal dik il-proprjetà, li hija l-aħħar waħda fil-lista tal-animazzjoni. Din hija limitazzjoni ta 'kif CSS jimmaniġġa animazzjonijiet multipli fuq l-istess proprjetà. Pereżempju, dan mhux se jaħdem kif maħsub minħabba li l-animazzjoni kf-pulse biss se tapplika. .bad-combo { animazzjoni: kf-zoom 0.5s 'il quddiem, kf-polz 1.2s alternattiv infinit; --kf-zoom-minn: 0.5; --kf-zoom-to: 1.2; --kf-polz-scale-minn: 0.8; --kf-polz-scale-to: 1.1; }
Żieda ta' Animazzjoni L-aktar mod sempliċi u dirett biex timmaniġġa animazzjonijiet multipli li jaffettwaw l-istess proprjetà huwa li tuża l-proprjetà tal-kompożizzjoni tal-animazzjoni. Fl-aħħar eżempju ta 'hawn fuq, l-animazzjoni kf-pulse tissostitwixxi l-animazzjoni kf-zoom, għalhekk mhux se naraw iż-żum inizjali u mhux se nġibu l-iskala mistennija għal ta' 1.2. Billi tissettja l-kompożizzjoni tal-animazzjoni li żżid, aħna ngħidu lill-browser biex jgħaqqad iż-żewġ animazzjonijiet. Dan jagħtina r-riżultat li rridu. .komponent-tnejn { animazzjoni-kompożizzjoni: żid; }
Ara l-Pen Keyframes Tokens - Demo 8 [forked] minn Amit Sheen. Dan l-approċċ jaħdem tajjeb għal ħafna każijiet fejn irridu ngħaqqdu l-effetti fuq l-istess proprjetà. Huwa utli wkoll meta għandna bżonn ngħaqqdu animazzjonijiet ma 'valuri ta' proprjetà statika. Pereżempju, jekk ikollna element li juża l-propjetà tat-traduzzjoni biex ipoġġiha eżattament fejn irridu, u mbagħad irridu nanimawha bil-keyframes kf-slide-in, ikollna qabża viżibbli diżgustanti mingħajr animazzjoni-kompożizzjoni. Ara l-Pen Keyframes Tokens - Demo 9 [forked] minn Amit Sheen. B'animazzjoni-kompożizzjoni stabbilita biex iżżid, l-animazzjoni hija kkombinata bla xkiel mal-eżistentitittrasforma, sabiex l-element jibqa' f'postu u janima kif mistenni. Animazzjoni Stagger Mod ieħor ta 'immaniġġjar ta' animazzjonijiet multipli huwa li "jitħawwad" - jiġifieri, tibda t-tieni animazzjoni ftit wara li tispiċċa l-ewwel waħda. Mhix soluzzjoni li taħdem għal kull każ, iżda hija utli meta jkollna animazzjoni tad-dħul segwita minn animazzjoni kontinwa. /* fade in + polz ta' opaċità */ .notifika { animazzjoni: kf-fade-in 2s ease-out, kf-polz 0.5s 2s ease-in-out alternattiv infinit; --kf-opaċità tal-polz-to: 0.5; }
Ara l-Pen Keyframes Tokens - Demo 10 [forked] minn Amit Sheen. Kwistjonijiet ta' Ordni Parti kbira mill-animazzjonijiet li naħdmu magħhom jużaw it-transform property. F'ħafna każijiet, dan huwa sempliċement aktar konvenjenti. Għandu wkoll vantaġġ ta 'prestazzjoni peress li l-animazzjonijiet tat-trasformazzjoni jistgħu jiġu aċċellerati bil-GPU. Imma jekk nużaw it-trasformazzjonijiet, irridu naċċettaw li l-ordni li fiha nwettqu t-trasformazzjonijiet tagħna hija importanti. Ħafna. Fil-keyframes tagħna s'issa, użajna trasformazzjonijiet individwali. Skont l-ispeċifikazzjonijiet, dawn huma dejjem applikati f'ordni fissa: l-ewwel, l-element jittraduċi, imbagħad idawwar, imbagħad skala. Dan jagħmel sens u huwa dak li ħafna minna nistennew. Madankollu, jekk nużaw il-proprjetà tat-trasformazzjoni, l-ordni li fiha l-funzjonijiet huma miktuba hija l-ordni li fiha huma applikati. F'dan il-każ, jekk nimxu xi ħaġa 100 pixel fuq l-assi X u mbagħad inbiddlu b'45 grad, mhuwiex l-istess bħal li l-ewwel inbiddlu b'45 grad u mbagħad nimxu 100 pixel. /* Kwadru roża: L-ewwel ittraduċi, imbagħad idawwar */ .eżempju-wieħed { tittrasforma: translateX(100px) dawwar(45deg); }
/* Kwadru aħdar: L-ewwel dawwar, imbagħad ittraduċi */ .eżempju-tnejn { tittrasforma: dawwar(45deg) translateX(100px); }
Ara l-Pen Keyframes Tokens - Demo 11 [forked] minn Amit Sheen. Iżda skont l-ordni tat-trasformazzjoni, it-trasformazzjonijiet individwali kollha - dak kollu li użajna għat-tokens tal-frames ewlenin - iseħħ qabel il-funzjonijiet tat-trasformazzjoni. Dan ifisser li kull ħaġa li ssettja fil-proprjetà tat-trasformazzjoni se jiġri wara l-animazzjonijiet. Imma jekk tissettja, pereżempju, tittraduċi flimkien mal-keyframes kf-spin, it-traduzzjoni ssir qabel l-animazzjoni. Konfuż għadu?! Dan iwassal għal sitwazzjonijiet fejn il-valuri statiċi jistgħu jikkawżaw riżultati differenti għall-istess animazzjoni, bħal fil-każ li ġej:
/* Animazzjoni komuni għaż-żewġ spinners */ .spinner { animazzjoni: kf-spin 1s lineari infinita; }
/* Spinner roża: ittraduċi qabel iddawwar (trasforma individwali) */ .spinner-roża { ittraduċi: 100% 50%; }
/* Spinner aħdar: dawwar imbagħad ittraduċi (ordni tal-funzjoni) */ .spinner-aħdar { tittrasforma: ittraduċi(100%, 50%); }
Ara l-Pen Keyframes Tokens - Demo 12 [furketta] minn Amit Sheen. Tista 'tara li l-ewwel spinner (roża) jieħu traduzzjoni li jiġri qabel id-dawran ta' kf-spin, għalhekk l-ewwel jimxi lejn il-post tiegħu u mbagħad idawwar. It-tieni spinner (aħdar) jieħu funzjoni translate() li sseħħ wara t-trasformazzjoni individwali, għalhekk l-element l-ewwel idawwar, imbagħad jiċċaqlaq relattiv għall-angolu attwali tiegħu, u nġibu dak l-effett ta 'orbita wiesgħa. Le, dan mhuwiex bug. Hija biss waħda minn dawk l-affarijiet li rridu nkunu nafu dwar is-CSS u nżommu f'moħħna meta naħdmu ma 'animazzjonijiet multipli jew trasformazzjonijiet multipli. Jekk meħtieġ, tista 'wkoll toħloq sett addizzjonali ta' keyframes kf-spin-alt li jduru elementi bl-użu tal-funzjoni rotate(). Mozzjoni Mnaqqsa U filwaqt li qed nitkellmu dwar keyframes alternattivi, ma nistgħux ninjoraw l-għażla "l-ebda animazzjoni". Wieħed mill-akbar vantaġġi tal-użu ta 'tokens ta' keyframes huwa li l-aċċessibilità tista 'tiġi moħmija, u fil-fatt hija pjuttost faċli li tagħmel. Billi niddisinjaw il-keyframes tagħna b'attenzjoni għall-aċċessibbiltà, nistgħu niżguraw li l-utenti li jippreferu mozzjoni mnaqqsa jiksbu esperjenza aktar bla xkiel, li tfixkel inqas, mingħajr xogħol żejjed jew duplikazzjoni tal-kodiċi. It-tifsira eżatta ta '"Mozzjoni Mnaqqsa" tista' tinbidel ftit minn animazzjoni għal oħra, u minn proġett għal proġett, iżda hawn ftit punti importanti li għandek iżżomm f'moħħok: Siektjar Keyframes Filwaqt li xi animazzjonijiet jistgħu jiġu mrattab jew imnaqqsa, hemm oħrajn li għandhom jisparixxu kompletament meta tintalab mozzjoni mnaqqsa. Animazzjonijiet Pulse huma eżempju tajjeb. Biex niżguraw li dawn l-animazzjonijiet ma jaħdmux fil-modalità ta 'moviment imnaqqas, nistgħu sempliċiment nagħlaqhom fil-mistoqsija tal-midja xierqa.
@media (jippreferi-mozzjoni mnaqqsa: ebda preferenza) { @keyfrmaes kf-pulse { minn { skala: var(--kf-polz-skala-minn, 1); opaċità: var(--kf-polz-opaċità-minn, 1); } lil { skala: var(--kf-polz-scale-to, 1); opaċità:var(--kf-opaċità tal-polz-to, 1); } } }
Dan jiżgura li l-utenti li waqqfu prefers-reduced-motion biex inaqqsu mhux se jaraw l-animazzjoni u se jiksbu esperjenza li taqbel mal-preferenza tagħhom. Instant In Hemm xi frames ewlenin li ma nistgħux sempliċement inneħħu, bħal animazzjonijiet tad-dħul. Il-valur irid jinbidel, irid janima; inkella, l-element mhux se jkollu l-valuri korretti. Iżda f'moviment imnaqqas, din it-tranżizzjoni mill-valur inizjali għandha tkun immedjata. Biex jinkiseb dan, aħna ser niddefinixxu sett addizzjonali ta 'keyframes fejn il-valur jaqbeż immedjatament għall-istat finali. Dawn isiru keyframes default tagħna. Imbagħad, aħna ser inżidu l-keyframes regolari ġewwa query tal-midja għal prefers-reduced-motion issettjat għall-ebda preferenza, bħal fl-eżempju preċedenti. /* jidħol istantanjament għal moviment imnaqqas */ @keyframes kf-zoom { minn, sa { skala: var(--kf-zoom-to, 1); } }
@media (jippreferi-mozzjoni mnaqqsa: ebda preferenza) { /* Oriġinali zoom keyframes */ @keyframes kf-zoom { minn { skala: var(--kf-zoom-minn, 0.8); } lil { skala: var(--kf-zoom-to, 1); } } }
Dan il-mod, l-utenti li jippreferu mozzjoni mnaqqsa se jaraw l-element jidher istantanjament fl-istat finali tiegħu, filwaqt li kulħadd jieħu t-tranżizzjoni animata. L-Approċċ Artab Hemm każijiet fejn irridu nżommu xi moviment, iżda ħafna aktar artab u aktar kalm mill-animazzjoni oriġinali. Per eżempju, nistgħu nissostitwixxu entratura bounce ma 'fade-in ġentili.
@keyframes kf-bounce { /* Fade-in artab għal moviment imnaqqas */ }
@media (jippreferi-mozzjoni mnaqqsa: ebda preferenza) { @keyframes kf-bounce { /* Oriġinali bounce keyframes */ } }
Issa, utenti b'mozzjoni mnaqqsa ppermettiet xorta jkollhom sens ta 'dehra, iżda mingħajr il-moviment intens ta' bounce jew animazzjoni elastika. Bil-blokki tal-bini f'posthom, il-mistoqsija li jmiss hija kif tagħmilhom parti mill-fluss tax-xogħol attwali. Il-kitba ta 'keyframes flessibbli hija ħaġa waħda, iżda li tagħmilhom affidabbli tul proġett kbir jeħtieġ ftit strateġiji li kelli nitgħallem bl-aħjar mod. Strateġiji ta' Implimentazzjoni u l-Aħjar Prattiċi Ladarba jkollna librerija soda ta 'tokens ta' keyframes, l-isfida reali hija kif indaħħluhom fix-xogħol ta 'kuljum.
It-tentazzjoni hija li twaqqa' l-keyframes kollha f'daqqa u tiddikjara l-problema solvuta, iżda fil-prattika sibt li l-aħjar riżultati ġejjin minn adozzjoni gradwali. Ibda bl-aktar animazzjonijiet komuni, bħal fade jew slide. Dawn huma rebħiet faċli li juru valur immedjat mingħajr ma jeħtieġu kitbiet kbar mill-ġdid. Ismijiet huwa punt ieħor li jistħoqqlu attenzjoni. Prefiss konsistenti jew spazju tal-isem jagħmilha ovvja liema animazzjonijiet huma tokens u liema huma ta' darba lokali. Jipprevjeni wkoll ħabtiet aċċidentali u jgħin lill-membri ġodda tat-tim jagħrfu s-sistema kondiviża f'daqqa t'għajn. Id-dokumentazzjoni hija importanti daqs il-kodiċi innifsu. Anke kumment qasir fuq kull token keyframes jista 'jiffranka sigħat ta' guessing aktar tard. Żviluppatur għandu jkun jista 'jiftaħ il-fajl tat-tokens, jiskennja għall-effett li jeħtieġ, u jikkopja l-mudell tal-użu direttament fil-komponent tagħhom. Il-flessibilità hija dak li jagħmel dan l-approċċ jiswa l-isforz. Billi nesponu proprjetajiet personalizzati sensibbli, aħna nagħtu spazju lit-timijiet biex jadattaw l-animazzjoni mingħajr ma nkissru s-sistema. Fl-istess ħin, ipprova ma tikkomplikax iżżejjed. Ipprovdi l-pumi li jimpurtaw u żomm il-bqija opinionated. Fl-aħħarnett, ftakar l-aċċessibbiltà. Mhux kull animazzjoni teħtieġ alternattiva ta 'moviment imnaqqas, iżda ħafna għandhom. Il-ħami f'dawn l-aġġustamenti kmieni jfisser li qatt ma rridu nwettquhom aktar tard, u turi livell ta 'kura li l-utenti tagħna jindunaw anki jekk qatt ma jsemmuh.
Fl-esperjenza tiegħi, it-trattament tat-tokens keyframes bħala parti mill-fluss tax-xogħol tagħna tat-tokens tad-disinn huwa dak li jagħmilhom jeħlu. Ladarba jkunu f'posthom, jieqfu jħossu bħal effetti speċjali u jsiru parti mill-lingwa tad-disinn, estensjoni naturali ta 'kif jiċċaqlaq u jirrispondi l-prodott. Tgeżwir Up L-animazzjonijiet jistgħu jkunu waħda mill-aktar partijiet ferrieħa tal-interfaces tal-bini, iżda mingħajr struttura, jistgħu wkoll isiru wieħed mill-akbar sorsi ta 'frustrazzjoni. Billi tittratta keyframes bħala tokens, tieħu xi ħaġa li ġeneralment tkun imħawwda u diffiċli biex timmaniġġjaha u tibdelha f'sistema ċara u prevedibbli. Il-valur reali mhuwiex biss fl-iffrankar ta 'ftit linji ta' kodiċi. Huwa fil-kunfidenza li meta tuża fade, slide, zoom, jew spin, taf eżattament kif se jġib ruħu tul il-proġett. Huwa fil-flessibbiltà li ġejja minn proprjetajiet tad-dwana mingħajr il-kaos ta 'varjazzjonijiet bla tarf. U huwa fl-aċċessibbiltà mibnija fil-pedament aktar milli miżjud bħalaħsieb wara. Rajt dawn l-ideat jaħdmu f'timijiet differenti u codebases differenti, u l-mudell huwa dejjem l-istess. Ladarba t-tokens ikunu f'posthom, keyframes jieqfu jkunu ġabra mxerrda ta 'tricks u jsiru parti mill-lingwa tad-disinn. Huma jagħmlu l-prodott iħossu aktar intenzjonat, aktar konsistenti, u aktar ħaj. Jekk tieħu ħaġa waħda minn dan l-artikolu, ħalliha tkun din: animazzjonijiet jistħoqqilhom l-istess kura u struttura li diġà nagħtu lill-kuluri, it-tipografija u l-ispazjar. Investiment żgħir f'tokens ta' frames ewlenin iħallas kull darba li l-interface tiegħek tiċċaqlaq.
