Imajine sa a: ou rantre nan yon nouvo pwojè, plonje nan kodbaz la, epi nan premye èdtan yo, ou dekouvri yon bagay ki fwistre abitye. Gaye nan fèy style yo, ou jwenn plizyè definisyon @keyframes pou menm animasyon debaz yo. Twa diferan efè fennen, de oswa twa varyasyon glisad, yon ti ponyen animasyon rale, ak omwen de animasyon vire diferan paske, byen, poukisa pa? @keyframes pulsasyon { soti nan { echèl: 1; } pou { echèl: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { echèl: 1; } 10%, 40% { echèl: 1.2; } }
Si senaryo sa a son abitye, ou pa poukont ou. Nan eksperyans mwen atravè plizyè pwojè, youn nan viktwa rapid ki pi konsistan mwen ka bay se konsolide ak estandadize keyframes. Li vin tounen yon modèl serye ke mwen kounye a gade pou pi devan pou netwayaj sa a kòm youn nan premye travay mwen sou nenpòt nouvo kodbaz. Lojik la dèyè dezòd la Redondans sa a fè sans pafè lè ou panse sou li. Nou tout sèvi ak menm animasyon fondamantal yo nan travay chak jou nou an: fennen, glise, zoom, vire, ak lòt efè komen. Animasyon sa yo trè senp, epi li fasil pou fwete yon definisyon rapid @keyframes pou fè travay la. San yo pa yon sistèm animasyon santralize, devlopè yo natirèlman ekri keyframes sa yo nan grafouyen, san yo pa konnen ke animasyon menm jan an deja egziste yon lòt kote nan kodbaz la. Sa a se sitou komen lè w ap travay nan achitekti ki baze sou eleman (ki pi fò nan nou fè jou sa yo), kòm ekip yo souvan travay nan paralèl atravè diferan pati nan aplikasyon an. Rezilta a? Animasyon dezòd. Ti Pwoblèm nan Pwoblèm ki pi evidan ak duplication keyframes se tan devlòpman gaspiye ak bloat kòd pa nesesè. Definisyon miltip keyframe vle di plizyè kote pou mete ajou lè kondisyon yo chanje. Bezwen ajiste distribisyon an nan animasyon fennen ou a? Ou pral bezwen chase chak egzanp atravè kodbaz ou a. Vle estandadize fonksyon soulajman? Bon chans jwenn tout varyasyon yo. Sa a miltiplikasyon nan pwen antretyen fè menm mizajou animasyon senp yon travay ki pran tan. Pwoblèm nan pi gwo Duplication keyframes sa a kreye yon pwoblèm pi trètr ki kache anba sifas la: pèlen dimansyon mondyal la. Menm lè w ap travay ak achitekti ki baze sou eleman, kle CSS yo toujou defini nan dimansyon mondyal la. Sa vle di tout keyframes aplike pou tout konpozan. Toujou. Wi, animasyon ou a pa nesesèman itilize keyframes ou defini nan eleman ou a. Li itilize dènye keyframes ki koresponn ak menm non sa a ki te chaje nan dimansyon mondyal la. Osi lontan ke tout keyframes ou yo idantik, sa a ta ka sanble tankou yon pwoblèm minè. Men, moman sa a ou vle Customize yon animasyon pou yon ka itilize espesifik, ou nan pwoblèm, oswa pi mal, ou pral youn nan ki lakòz yo. Swa animasyon ou a p ap travay paske yon lòt eleman chaje apre pa w la, li ranplase keyframes ou yo, oswa eleman ou a chaje dènye epi aksidantèlman chanje konpòtman animasyon an pou chak lòt eleman lè l sèvi avèk non keyframe sa a, epi ou ka pa menm reyalize li. Men yon egzanp senp ki montre pwoblèm nan: .konpozan-yon { /* estil konpozan */ animasyon: batman kè 1s fasilite-an-soti enfini altène; }
/* definisyon @keyframes sa a pap mache */ @keyframes pulsasyon { soti nan { echèl: 1; } pou { echèl: 1.1; } }
/* pita nan kòd la... */
.konpozan-de { /* estil konpozan */ animasyon: batman kè 1s fasilite-an-soti enfini; }
/* keyframes sa yo ap aplike pou tou de konpozan */ @keyframes pulsasyon { 0%, 20%, 100% { echèl: 1; } 10%, 40% { echèl: 1.2; } }
Tou de eleman yo itilize menm non animasyon an, men dezyèm @keyframes definisyon an ranplase premye a. Koulye a, tou de eleman-yon ak eleman-de pral sèvi ak dezyèm keyframes yo, kèlkeswa ki eleman defini ki keyframes. Gade jeton Keyframes Pen yo - Demo 1 [forked] pa Amit Sheen. Pati ki pi mal la? Sa a souvan travay parfe nan devlopman lokal men kraze misterye nan pwodiksyon lè pwosesis bati chanje lòd la loading nan stylesheets ou yo. Ou fini ak animasyon ki konpòte yon fason diferan depann sou ki eleman yo chaje ak nan ki sekans. Solisyon an: Keyframes inifye Repons lan nan dezòd sa a se etonan senp: predefini keyframes dinamik ki estoke nan yon stylesheet pataje. Olye pou nou kite chak eleman defini pwòp animasyon pa yo, nou kreye keyframes santralize ki byen dokimante, fasil pouitilize, antretyen, ak pwepare a bezwen espesifik nan pwojè ou a. Panse a li kòm siy keyframes. Menm jan nou itilize marqueur pou koulè ak espacement, e anpil nan nou deja sèvi ak marqueur pou pwopwiyete animasyon, tankou durée Et soulajman fonksyon, poukisa nou pa sèvi ak marqueur pou keyframes tou? Apwòch sa a ka entegre natirèlman ak nenpòt workflow siy konsepsyon aktyèl w ap itilize, pandan y ap rezoud tou de ti pwoblèm nan (kod repetisyon) ak pwoblèm nan pi gwo (konfli dimansyon mondyal) nan yon sèl kou. Lide a se senp: kreye yon sèl sous verite pou tout animasyon komen nou yo. Fèy style pataje sa a gen fotod kle ak anpil atansyon fabrike ki kouvri modèl animasyon pwojè nou an aktyèlman itilize. Pa plis devine si yon animasyon fennen deja egziste yon kote nan baz kòd nou an. Pa plis aksidantèlman ranplase animasyon nan lòt konpozan. Men, isit la se kle a: sa yo se pa sèlman estatik kopi-kole animasyon. Yo fèt pou yo dinamik ak personnalisable atravè pwopriyete koutim CSS, sa ki pèmèt nou kenbe konsistans pandan y ap toujou gen fleksibilite pou adapte animasyon nan ka itilizasyon espesifik, tankou si ou bezwen yon ti kras pi gwo "batman kè" animasyon nan yon sèl kote. Bati premye jeton Keyframes Youn nan premye fwi ki pandye nou ta dwe atake se animasyon "fade-in". Nan youn nan dènye pwojè mwen yo, mwen te jwenn plis pase yon douzèn definisyon separe, epi wi, yo tout tou senpleman anime opakite a soti nan 0 a 1. Se konsa, ann kreye yon nouvo stylesheet, rele li kf-tokens.css, enpòte li nan pwojè nou an, epi mete keyframes nou yo ak kòmantè apwopriye andedan li. /* keyframes-tokens.css */
/* * Fade In - fennen animasyon antre * Itilizasyon: animasyon: kf-fade-in 0.3s fasilite-soti; */ @keyframes kf-fade-in { soti nan { Opakite: 0; } pou { Opakite: 1; } }
Selibatè @keyframes deklarasyon sa a ranplase tout animasyon ki gaye nan kod nou an. Netwaye, senp, ak aplikab globalman. Epi kounye a ke nou gen siy sa a defini, nou ka itilize li nan nenpòt eleman nan tout pwojè nou an: .modal { animasyon: kf-fade-in 0.3s fasilite-soti; }
.tooltip { animasyon: kf-fade-in 0.2s fasilite-an-soti; }
.notifikasyon { animasyon: kf-fade-in 0.5s fasilite-soti; }
Gade jeton Pen Keyframes - Demo 2 [forked] pa Amit Sheen. Remak: Nou ap itilize yon prefiks kf- nan tout non @keyframes nou yo. Prefiks sa a sèvi kòm yon espas non ki anpeche konfli nonmen ak animasyon ki egziste deja nan pwojè a epi fè li imedyatman klè ke keyframes sa yo soti nan dosye tokens keyframes nou an. Fè yon glise dinamik Kf-fade-in keyframes yo travay anpil paske li senp epi gen ti plas pou dezòd bagay yo. Nan lòt animasyon, sepandan, nou bezwen pi plis dinamik, epi isit la nou ka ogmante pouvwa a menmen nan pwopriyete koutim CSS. Sa a se kote keyframes tokens reyèlman klere konpare ak animasyon estatik gaye. Ann pran yon senaryo komen: animasyon "glise-an". Men, glise nan ki kote? 100px sou bò dwat la? 50% sou bò gòch la? Èske li ta dwe antre nan tèt ekran an? Oswa petèt flote nan anba a? Se konsa, anpil posiblite, men olye pou yo kreye keyframes separe pou chak direksyon ak chak varyasyon, nou ka bati yon siy fleksib ki adapte a tout senaryo: /* * Slide In - animasyon glise direksyon * Sèvi ak --kf-glise-soti nan kontwole direksyon * Default: glise soti nan bò gòch (-100%) * Itilizasyon: * Animasyon: kf-glise-nan 0.3s fasilite-soti; * --kf-glise-soti nan: -100px 0; // glise apati goch * --kf-glise-soti nan: 100px 0; // glise apati dwat * --kf-glise-soti nan: 0 -50px; // glise soti anwo */
@keyframes kf-slide-in { soti nan { tradui: var(--kf-slide-from, -100% 0); } pou { tradui: 0 0; } }
Koulye a, nou ka itilize yon sèl jeton @keyframes sa a pou nenpòt direksyon glise tou senpleman pa chanje --kf-slide-from pwopriyete koutim la: .sidebar { animasyon: kf-glise-nan 0.3s fasilite-soti; /* Sèvi ak valè default: glisad sou bò gòch */ }
.notifikasyon { animasyon: kf-glise-an 0.4s fasilite-soti; --kf-glise-soti nan: 0 -50px; /* glise sou tèt */ }
.modal { animasyon: kf-fade-an 0.5s, kf-glise-nan 0.5s kib-bezier (0.34, 1.56, 0.64, 1); --kf-glise-soti nan: 50px 50px; /* glise anba a dwat */ }
Apwòch sa a ban nou fleksibilite enkwayab pandan w ap kenbe konsistans. Yon deklarasyon keyframe, posiblite enfini. Gade jeton Keyframes Pen yo - Demo 3 [forked] pa Amit Sheen. Men, si nou vle fè animasyon nou yo menm pi fleksib, sa ki pèmèt pou efè "glise-out" tou, nou katou senpleman ajoute yon --kf-slide-to pwopriyete koutim, menm jan ak sa nou pral wè nan pwochen seksyon an. Bidirectionnelle Zoom Keyframes Yon lòt animasyon komen ki vin kopi atravè pwojè yo se "zoom" efè. Kit se yon echèl sibtil pou mesaj pen griye, yon rale dramatik pou modal, oswa yon efè dou echèl desann pou tit, animasyon rale yo toupatou. Olye pou n kreye keyframes separe pou chak valè echèl, ann konstwi yon seri kle ankadreman kf-zoom fleksib:
/* * Zoom - animasyon echèl * Sèvi ak --kf-zoom-from ak --kf-zoom-to pou kontwole valè echèl yo * Default: zoom soti nan 80% a 100% (0.8 a 1) * Itilizasyon: * Animasyon: kf-zoom 0.2s fasilite-soti; * --kf-zoom-soti nan: 0.5; --kf-zoom-pou: 1; // rale soti nan 50% a 100% * --kf-zoom-soti nan: 1; --kf-zoom-pou: 0; // rale soti nan 100% a 0% * --kf-zoom-soti nan: 1; --kf-zoom-pou: 1.1; // rale soti nan 100% a 110% */
@keyframes kf-zoom { soti nan { echèl: var (--kf-zoom-soti nan, 0.8); } pou { echèl: var(--kf-zoom-to, 1); } }
Avèk yon definisyon, nou ka reyalize nenpòt varyasyon zoom nou bezwen: .griye { animasyon: kf-glise-nan 0.2s, kf-zoom 0.4s fasilite-soti; --kf-glise-soti nan: 0 100%; /* glise sou tèt */ /* Sèvi ak zoom default: echèl soti nan 80% a 100% */ }
.modal { animasyon: kf-zoom 0.3s kib-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-soti nan: 0; /* rale dramatik soti nan 0% a 100% */ }
.tit { animasyon: kf-fade-in 2s, kf-zoom 2s fasilite-nan; --kf-zoom-soti nan: 1.2; --kf-zoom-pou: 0.8; /* echèl dou desann */ }
Defo a nan 0.8 (80%) travay parfe pou pifò eleman UI, tankou mesaj pen griye ak kat, pandan y ap toujou fasil yo Customize pou ka espesyal. Gade jeton Pen Keyframes - Demo 4 [forked] pa Amit Sheen. Ou ta ka remake yon bagay enteresan nan egzanp ki sot pase yo: nou te konbine animasyon. Youn nan avantaj kle nan travay ak @keyframes tokens se ke yo ap fèt yo entegre san pwoblèm youn ak lòt. Konpozisyon lis sa a se entansyonèl, pa aksidan. Nou pral diskite sou konpozisyon animasyon an plis detay pita, ki gen ladan kote yo ka vin pwoblèm, men pifò konbinezon yo senp epi fasil pou aplike. Remak: Pandan m t ap ekri atik sa a, e petèt paske m te ekri l, mwen te twouve m repanse tout lide animasyon antre yo. Avèk tout pwogrè ki sot pase yo nan CSS, èske nou toujou bezwen yo nan tout? Erezman, Adam Argyle te eksplore menm kesyon yo epi li te eksprime yo briyan nan blog li a. Sa a pa kontredi sa ki ekri isit la, men li prezante yon apwòch vo konsidere, espesyalman si pwojè ou yo depann anpil sou animasyon antre. Animasyon kontinyèl Pandan ke animasyon antre, tankou "fennen", "glise", ak "zoom" rive yon fwa epi apre yo sispann, animasyon kontinyèl bouk endefini pou atire atansyon oswa endike aktivite k ap kontinye. De pi komen animasyon kontinyèl mwen rankontre yo se "vire" (pou endikatè chaje) ak "batman kè" (pou mete aksan sou eleman enpòtan). Animasyon sa yo prezante defi inik lè li rive kreye jeton keyframes. Kontrèman ak animasyon antre ki tipikman ale soti nan yon eta nan yon lòt, animasyon kontinyèl bezwen trè personnalisable nan modèl konpòtman yo. Sou entènèt jwèt Spin Doktè a Chak pwojè sanble itilize plizyè animasyon vire. Gen kèk vire nan direksyon goch, lòt moun vire nan direksyon goch. Gen kèk fè yon sèl wotasyon 360 degre, lòt moun fè plizyè vire pou yon efè pi vit. Olye pou nou kreye keyframes separe pou chak varyasyon, ann konstwi yon sèl vire fleksib ki okipe tout senaryo:
/* * Spin - animasyon wotasyon * Sèvi ak --kf-spin-from ak --kf-spin-to pou kontwole ranje wotasyon * Sèvi ak --kf-spin-turns pou kontwole kantite wotasyon * Default: wotasyon soti nan 0deg a 360deg (1 wotasyon konplè) * Itilizasyon: * Animasyon: kf-spin 1s lineyè enfini; * --kf-vire-vire: 2; // 2 wotasyon konplè * --kf-vire-soti nan: 0deg; --kf-vire-a: 180deg; // mwatye wotasyon * --kf-vire-soti nan: 0deg; --kf-vire-a: -360deg; // nan direksyon goch */
@keyframes kf-spin { soti nan { Thorne: var (--kf-spin-from, 0deg); } pou { Thorne: calc(var(--kf-spin-de, 0deg) + var (--kf-spin-to, 360deg) * var (--kf-spin-turns, 1)); } }
Koulye a, nou ka kreye nenpòt varyasyon vire nou renmen:
.loading-spinner { animasyon: kf-spin 1s lineyè enfini; /* Sèvi ak default: vire soti nan 0deg a 360deg */ }
.fast-loader { animasyon: kf-spin 1.2s fasilite-an-soti enfini altène; --kf-vire-vire: 3; /* 3 wotasyon konplè pou chak direksyon pou chak sik*/ }
.steped-reverse { animasyon: kf-spin 1.5s etap (8) enfini; --kf-vire-a: -360deg; /* nan direksyon goch */ }
.subtle-wiggle { animasyon: kf-spin 2s fasilite-an-soti enfini altène; --kf-vire-soti nan: -16deg; --kf-vire-a: 32deg; /* balanse 36 degre: ant -18deg ak +18deg */ }
Gade jeton Keyframes Pen yo - Demo 5 [forked] pa Amit Sheen. Bote apwòch sa a se ke imaj kle yo menm travay pou chaje spinners, ikon wotasyon, efè wiggle, e menm konplèks animasyon milti-vire. Paradoks batman kè a Animasyon batman kè yo pi difisil paske yo ka "pulse" pwopriyete diferan. Gen kèk batman echèl la, lòt moun batman opakite a, ak kèk pwopriyete koulè batman kè tankou klète oswa saturation. Olye ke nou kreye keyframes separe pou chak pwopriyete, nou ka kreye keyframes ki travay ak nenpòt pwopriyete CSS. Men yon egzanp yon keyframe batman kè ak opsyon echèl ak opakite:
/* * Pulsasyon - enpilsyon animasyon * Sèvi ak --kf-pulse-scale-from ak --kf-pulse-scale-to pou kontwole ranje echèl * Sèvi ak --kf-pulse-opacity-from ak --kf-pulse-opacity-to pou kontwole seri opakite * Default: pa gen batman (tout valè 1) * Itilizasyon: * Animasyon: kf-pulse 2s fasilite-an-soti enfini altène; * --kf-pulse-scale-of: 0.95; --kf-pulse-scale-to: 1.05; // echèl batman kè * --kf-pulse-opacity-soti nan: 0.7; --kf-pulse-opacity-to: 1; // batman opakite */
@keyframes kf-pulse { soti nan { echèl: var (--kf-pulse-scale-of, 1); opasite: var (--kf-pulse-opacity-of, 1); } pou { echèl: var (--kf-pulse-scale-to, 1); opasite: var (--kf-pulse-opacity-to, 1); } }
Sa a kreye yon batman fleksib ki ka anime plizyè pwopriyete: .rele-a-aksyon { animasyon: kf-pulse 0.6s enfini altène; --kf-pulse-opacity-soti nan: 0.5; /* batman opakite */ }
.notification-dot { animasyon: kf-pulse 0.6s fasilite-an-soti enfini altène; --kf-batman kè-echèl-soti nan: 0.9; --kf-pulse-scale-to: 1.1; /* echèl batman */ }
.text-highlight { animasyon: kf-pulse 1.5s fasilite-soti enfini; --kf-batman kè-echèl-soti nan: 0.8; --kf-pulse-opacity-soti nan: 0.2; /* echèl ak batman opakite */ }
Gade jeton Keyframes Pen yo - Demo 6 [forked] pa Amit Sheen. Kf-pulse keyframe sèl sa a ka okipe tout bagay soti nan sibtil atansyon grabs dramatik en, tout pandan y ap fasil yo Customize. Soulajman avanse Youn nan gwo bagay sou lè l sèvi avèk keyframes tokens se ki jan fasil li se pou elaji bibliyotèk animasyon nou an ak bay efè ke pifò devlopè pa ta deranje yo ekri nan grafouyen, tankou elastik oswa rebondisman. Isit la se yon egzanp yon senp "rebondisman" keyframes siy ki itilize yon --kf-bounce-from pwopriyete koutim pou kontwole wotè so a. /* * Rebondisman - rebondi animasyon antre * Sèvi ak --kf-bounce-from pou kontwole wotè so * Default: sote soti nan 100vh (off ekran) * Itilizasyon: * animasyon: kf-rebondisman 3s fasilite-an; * --kf-rebondisman-soti nan: 200px; // sote soti nan 200px wotè */
@keyframes kf-bounce { 0% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { tradui: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { tradui: 0 0; animasyon-distribisyon-fonksyon: fasilite-soti; } }
Animasyon tankou "elastik" se yon ti jan pi difisil paske nan kalkil yo andedan keyframes yo. Nou bezwen defini --kf-elastic-from-X ak --kf-elastic-from-Y separeman (tou de se opsyonèl), epi ansanm yo kite nou kreye yon antre elastik soti nan nenpòt pwen sou ekran an.
/* * Elastik nan - animasyon antre elastik * Sèvi ak --kf-elastic-from-X ak --kf-elastic-from-Y pou kontwole pozisyon kòmanse * Default: antre nan mitan tèt (0, -100vh) * Itilizasyon: * animasyon: kf-elastik-nan 2s fasilite-an-soti tou de; * --kf-elastic-of-X: -50px; * --kf-elastik-soti nan-Y: -200px; // antre soti nan (-50px, -200px) */
@keyframes kf-elastic-in { 0% { tradui: calc(var(--kf-elastic-de-X, -50vw) * 1) calc(var (--kf-elastic-de-Y, 0px) * 1); }
16% { tradui: calc(var(--kf-elastic-de-X, -50vw) * -0.3227) calc(var (--kf-elastic-de-Y, 0px) * -0.3227); }
28% { tradui: calc(var(--kf-elastic-of-X, -50vw) * 0.1312)calc(var(--kf-elastik-soti nan-Y, 0px) * 0.1312); }
44% { tradui: calc(var(--kf-elastic-de-X, -50vw) * -0.0463) calc(var (--kf-elastic-de-Y, 0px) * -0.0463); }
59% { tradui: calc(var(--kf-elastic-de-X, -50vw) * 0.0164) calc(var (--kf-elastic-de-Y, 0px) * 0.0164); }
73% { tradui: calc(var(--kf-elastic-de-X, -50vw) * -0.0058) calc(var (--kf-elastic-de-Y, 0px) * -0.0058); }
88% { tradui: calc(var(--kf-elastic-de-X, -50vw) * 0.0020) calc(var (--kf-elastic-de-Y, 0px) * 0.0020); }
100% { tradui: 0 0; } }
Apwòch sa a fè li fasil pou réutilisation ak personnaliser keyframes avanse atravè pwojè nou an, jis pa chanje yon sèl propriété personnalisé.
.bounce-and-zoom { animasyon: kf-bounce 3s fasil pou antre, kf-zoom 3s lineyè; --kf-zoom-soti nan: 0; }
.rebondisman-ak-glise { animasyon-konpozisyon: ajoute; /* Tou de animasyon yo itilize tradui */ animasyon: kf-bounce 3s fasil pou antre, kf-glise-nan 3s fasilite-soti; --kf-glise-soti nan: -200px; }
.elastik-nan { animasyon: kf-elastik-nan 2s fasilite-an-soti tou de; }
Gade jeton Pen Keyframes - Demo 7 [forked] pa Amit Sheen. Jiska pwen sa a, nou te wè ki jan nou ka konsolide keyframes nan yon fason entelijan ak efikas. Natirèlman, ou ta ka vle ajiste bagay sa yo pi byen anfòm bezwen pwojè ou a, men nou te kouvri egzanp plizyè animasyon komen ak ka itilize chak jou. Ak jeton keyframes sa yo an plas, kounye a nou gen blòk bilding pwisan pou kreye animasyon ki konsistan, ki kapab antreteni yo atravè tout pwojè a. Pa gen foto kle plis kopi, pa gen plis konfli dimansyon mondyal. Jis yon fason pwòp, pratik pou okipe tout bezwen animasyon nou yo. Men, vrè kesyon an se: Ki jan nou konpoze blòk bilding sa yo ansanm? Mete Li Tout Ansanm Nou te wè ke konbine siy debaz keyframes se senp. Nou pa bezwen anyen espesyal men defini premye animasyon an, defini dezyèm lan, mete varyab yo jan sa nesesè, e se li. /* Fennen + glise */ .griye { animasyon: kf-fade-an 0.4s, kf-glise-nan 0.4s kib-bezier (0.34, 1.56, 0.64, 1); --kf-glise-soti nan: 0 40px; }
/* Zoom an + fennen */ .modal { animasyon: kf-fade-an 0.3s, kf-zoom 0.3s kib-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-soti nan: 0.7; --kf-zoom-pou: 1; }
/* Glise + batman */ .notifikasyon { animasyon: kf-glise-nan 0.5s, kf-pulse 1.2s fasilite-an-soti enfini altène; --kf-glise-soti nan: -100px 0; --kf-pulse-scale-of: 0.95; --kf-pulse-scale-to: 1.05; }
Konbinezon sa yo travay trè byen paske chak animasyon vize yon pwopriyete diferan: opakite, transfòme (tradwi/echèl), elatriye Men pafwa gen konfli, epi nou bezwen konnen poukisa ak ki jan fè fas ak yo. Lè de animasyon eseye anime menm pwopriyete a - pou egzanp, tou de animasyon echèl oswa tou de animasyon opakite - rezilta a pa pral sa ou espere. Pa default, se sèlman youn nan animasyon yo aktyèlman aplike nan pwopriyete sa a, ki se youn nan dènye nan lis la animasyon. Sa a se yon limit nan fason CSS okipe plizyè animasyon sou menm pwopriyete a. Pou egzanp, sa a pa pral travay jan sa vle di paske se sèlman animasyon kf-pulse la ap aplike. .bad-combo { animasyon: kf-zoom 0.5s anvwa, kf-pulse 1.2s enfini altène; --kf-zoom-soti nan: 0.5; --kf-zoom-pou: 1.2; --kf-batman kè-echèl-soti nan: 0.8; --kf-pulse-scale-to: 1.1; }
Animasyon Adisyon Fason ki pi senp ak pi dirèk pou okipe plizyè animasyon ki afekte menm pwopriyete a se sèvi ak pwopriyete animasyon-konpozisyon. Nan dènye egzanp ki anwo a, animasyon kf-pulse la ranplase animasyon kf-zoom, kidonk nou pa pral wè premye rale a epi nou pa pral jwenn echèl la espere nan 1.2. Lè nou mete animasyon-konpozisyon pou ajoute, nou di navigatè a konbine tou de animasyon yo. Sa a ban nou rezilta nou vle a. .konpozan-de { animasyon-konpozisyon: ajoute; }
Al gade nan Pen Keyframes Tokens - Demo 8 [forked] pa Amit Sheen. Apwòch sa a travay byen pou pifò ka kote nou vle konbine efè sou menm pwopriyete a. Li itil tou lè nou bezwen konbine animasyon ak valè pwopriyete estatik. Pou egzanp, si nou gen yon eleman ki sèvi ak pwopriyete a tradui nan pozisyon li egzakteman kote nou vle, ak Lè sa a, nou vle anime li nan ak kf-glise-nan keyframes yo, nou jwenn yon move so vizib san animasyon-konpozisyon. Gade jeton Keyframes Pen yo - Demo 9 [forked] pa Amit Sheen. Avèk animasyon-konpozisyon mete ajoute, animasyon an fèt san pwoblèm konbine avèk ki deja egzistetransfòme, kidonk eleman an rete an plas ak anime jan yo espere. Animasyon Stagger Yon lòt fason pou jere plizyè animasyon se "echemen" yo - se sa ki, kòmanse dezyèm animasyon an yon ti kras apre premye a fini. Li se pa yon solisyon ki travay pou chak ka, men li itil lè nou gen yon animasyon antre ki te swiv pa yon animasyon kontinyèl. /* fennen + batman opakite */ .notifikasyon { animasyon: kf-fade-in 2s fasilite-soti, kf-pulse 0.5s 2s fasilite-an-soti enfini altène; --kf-pulse-opacity-to: 0.5; }
Gade jeton Pen Keyframes - Demo 10 [forked] pa Amit Sheen. Lòd Matters Yon gwo pati nan animasyon nou travay avèk yo sèvi ak pwopriyete a transfòme. Nan pifò ka, sa a se tou senpleman pi pratik. Li tou gen yon avantaj pèfòmans kòm transfòme animasyon yo ka akselere GPU. Men, si nou itilize transfòmasyon, nou bezwen aksepte ke lòd nou fè transfòmasyon nou yo enpòtan. Anpil. Nan keyframes nou yo jiskaprezan, nou te itilize transfòmasyon endividyèl yo. Dapre espesifikasyon yo, sa yo toujou aplike nan yon lòd fiks: premye, eleman an vin tradwi, Lè sa a, Thorne, Lè sa a, echèl. Sa fè sans e se sa pifò nan nou espere. Sepandan, si nou itilize pwopriyete transfòmasyon an, lòd yo ekri fonksyon yo se lòd yo aplike. Nan ka sa a, si nou deplase yon bagay 100 piksèl sou aks X la ak Lè sa a, Thorne li pa 45 degre, li pa menm jan ak premye wotasyon li pa 45 degre ak Lè sa a, deplase li 100 piksèl. /* Woz kare: Premye tradui, answit vire */ .egzanp-yon sèl { transfòme: translateX(100px) vire (45deg); }
/* Kare vèt: Premye vire, apre sa tradui */ .egzanp-de { transfòme: vire (45deg) translateX (100px); }
Gade jeton Pen Keyframes - Demo 11 [forked] pa Amit Sheen. Men, dapre lòd transfòmasyon an, tout transfòmasyon endividyèl yo - tout sa nou te itilize pou jeton keyframes yo - rive anvan fonksyon transfòme yo. Sa vle di nenpòt bagay ou mete nan pwopriyete transfòmasyon an pral rive apre animasyon yo. Men, si ou mete, pou egzanp, tradui ansanm ak kf-spin keyframes yo, tradui a pral rive anvan animasyon an. Konfonn ankò?! Sa a mennen nan sitiyasyon kote valè estatik ka lakòz rezilta diferan pou menm animasyon an, tankou nan ka sa a:
/* Animasyon komen pou tou de vire */ .spinner { animasyon: kf-spin 1s lineyè enfini; }
/* Woz spinner: tradui anvan wotasyon (transfòmasyon endividyèl) */ .spinner-roz { tradui: 100% 50%; }
/* Green spinner: vire epi tradui (lòd fonksyon) */ .spinner-green { transfòme: tradui (100%, 50%); }
Gade jeton Pen Keyframes - Demo 12 [forked] pa Amit Sheen. Ou ka wè ke premye spinner a (woz) vin yon tradiksyon ki rive anvan wotasyon kf-spin, kidonk li premye deplase nan plas li epi li vire. Dezyèm spinner (vèt) jwenn yon fonksyon translate() ki rive apre transfòmasyon endividyèl la, kidonk eleman an premye vire, answit deplase parapò ak ang aktyèl li, epi nou jwenn efè òbit lajè sa a. Non, sa a se pa yon ensèk. Li se jis youn nan bagay sa yo nou bezwen konnen sou CSS epi kenbe nan tèt ou lè w ap travay ak plizyè animasyon oswa transfòmasyon miltip. Si sa nesesè, ou kapab tou kreye yon seri anplis kf-spin-alt keyframes ki wotasyon eleman lè l sèvi avèk fonksyon rotate(). Mouvman redwi Epi pandan n ap pale de keyframes altènatif, nou pa ka inyore opsyon "pa gen okenn animasyon". Youn nan pi gwo avantaj ki genyen nan lè l sèvi avèk keyframes tokens se ke aksè ka kwit nan, epi li se aktyèlman byen fasil fè. Lè nou desine keyframes nou yo ak aksè nan tèt ou, nou ka asire ke itilizatè ki prefere mouvman redwi jwenn yon eksperyans ki pi dousman, mwens distrè, san travay siplemantè oswa repetisyon kòd. Siyifikasyon egzak la nan "Mouvman Redwi" ka chanje yon ti jan soti nan yon animasyon nan yon lòt, ak soti nan pwojè a pwojè, men isit la se kèk pwen enpòtan yo kenbe nan tèt ou: Silence Keyframes Pandan ke kèk animasyon ka adousi oswa ralanti, gen lòt ki ta dwe disparèt nèt lè yo mande mouvman redwi. Animasyon batman kè yo se yon bon egzanp. Pou asire w ke animasyon sa yo pa kouri nan mòd redui mouvman, nou ka tou senpleman vlope yo nan rechèch medya apwopriye a.
@medya (preferans-redwi-mouvman: pa gen preferans) { @keyfrmaes kf-pulse { soti nan { echèl: var (--kf-pulse-scale-of, 1); opasite: var (--kf-pulse-opacity-of, 1); } pou { echèl: var (--kf-pulse-scale-to, 1); Opakite:var(--kf-pulse-opacity-to, 1); } } }
Sa a asire ke itilizatè yo ki te mete prefere-redwi-mouvman diminye pa pral wè animasyon an epi yo pral jwenn yon eksperyans ki matche ak preferans yo. Instant In Gen kèk keyframes nou pa ka senpleman retire, tankou animasyon antre. Valè a dwe chanje, dwe anime; otreman, eleman an pa pral gen valè ki kòrèk yo. Men, nan mouvman redwi, tranzisyon sa a soti nan valè inisyal la ta dwe enstantane. Pou reyalize sa a, nou pral defini yon seri siplemantè nan keyframes kote valè a sote imedyatman nan eta final la. Sa yo vin keyframes default nou yo. Lè sa a, nou pral ajoute keyframes regilye yo andedan yon rechèch medya pou preferans-redwi-mouvman mete nan pa gen preferans, jis tankou nan egzanp anvan an. /* pete imedyatman pou mouvman redwi */ @keyframes kf-zoom { soti nan, rive { echèl: var(--kf-zoom-to, 1); } }
@medya (preferans-redwi-mouvman: pa gen preferans) { /* Image kle zoom orijinal */ @keyframes kf-zoom { soti nan { echèl: var (--kf-zoom-soti nan, 0.8); } pou { echèl: var(--kf-zoom-to, 1); } } }
Nan fason sa a, itilizatè ki prefere mouvman redwi pral wè eleman nan parèt imedyatman nan eta final li, pandan tout lòt moun jwenn tranzisyon an anime. Apwòch la mou Gen ka kote nou vle kenbe kèk mouvman, men pi douser ak pi kalm pase animasyon orijinal la. Pou egzanp, nou ka ranplase yon antre rebondisman ak yon fennen dou.
@keyframes kf-bounce { /* Fade-in mou pou mouvman redwi */ }
@medya (preferans-redwi-mouvman: pa gen preferans) { @keyframes kf-bounce { /* Image rebondisman orijinal yo */ } }
Koulye a, itilizatè ki gen mouvman redwi pèmèt toujou jwenn yon sans de aparans, men san yo pa mouvman an entans nan yon rebondisman oswa animasyon elastik. Avèk blòk bilding yo an plas, pwochen kesyon an se ki jan fè yo pati nan workflow aktyèl la. Ekri kle ankadreman fleksib se yon sèl bagay, men fè yo serye atravè yon gwo pwojè mande pou kèk estrateji ke mwen te aprann fason ki difisil. Estrateji aplikasyon ak pi bon pratik Yon fwa nou gen yon bibliyotèk solid nan jeton keyframes, reyèl defi a se ki jan yo pote yo nan travay chak jou.
Tantasyon an se lage tout keyframes nan yon fwa epi deklare pwoblèm nan rezoud, men nan pratik mwen te jwenn ke rezilta yo pi byen soti nan adopsyon gradyèl. Kòmanse ak animasyon ki pi komen yo, tankou fennen oswa glise. Sa yo se viktwa fasil ki montre valè imedya san yo pa mande gwo reekri. Nonmen se yon lòt pwen ki merite atansyon. Yon prefiks ki konsistan oswa espas non fè li evidan ki animasyon yo se siy ak ki se lokal yon sèl-off. Li tou anpeche kolizyon aksidan epi li ede nouvo manm ekip yo rekonèt sistèm nan pataje yon ti koutje sou. Dokimantasyon enpòtan menm jan ak kòd li menm. Menm yon kòmantè kout pi wo a chak siy keyframes ka sove èdtan nan devine pita. Yon pwomotè ta dwe kapab louvri fichye jeton an, eskane pou efè yo bezwen, epi kopye modèl itilizasyon an tou dwat nan eleman yo. Fleksibilite se sa ki fè apwòch sa a vo efò a. Lè nou ekspoze pwopriyete koutim sansib, nou bay ekip yo plas pou adapte animasyon an san yo pa kraze sistèm nan. An menm tan an, eseye pa twò konplike. Bay bouton yo ki enpòtan epi kenbe rès la opinyon. Finalman, sonje aksè. Se pa tout animasyon ki bezwen yon altènatif mouvman redwi, men anpil fè sa. Kwit nan ajisteman sa yo byen bonè vle di nou pa janm oblije modènize yo pita, epi li montre yon nivo swen ke itilizatè nou yo pral remake menm si yo pa janm mansyone li.
Nan eksperyans mwen, trete jeton keyframes kòm yon pati nan workflow tokens konsepsyon nou an se sa ki fè yo bwa. Yon fwa yo an plas, yo sispann santi tankou efè espesyal epi yo vin yon pati nan langaj konsepsyon an, yon ekstansyon natirèl nan fason pwodwi a deplase ak reponn. Anbalaj Animasyon yo ka youn nan pati ki pi lajwa nan bilding interfaces, men san yo pa estrikti, yo kapab tou vin youn nan pi gwo sous fristrasyon. Lè w trete keyframes kòm siy, ou pran yon bagay ki nòmalman sal e ki difisil pou jere epi fè l tounen yon sistèm klè e previzib. Valè reyèl la se pa sèlman nan ekonomize kèk liy nan kòd. Se nan konfyans ke lè ou itilize yon fennen, glise, rale, oswa vire, ou konnen egzakteman ki jan li pral konpòte atravè pwojè a. Li se nan fleksibilite ki soti nan pwopriyete koutim san dezòd varyasyon kontinuèl. Epi li se nan aksè a bati nan fondasyon an olye ke ajoute kòmyon apre panse. Mwen te wè lide sa yo travay nan ekip diferan ak diferan kodbaz, ak modèl la toujou menm. Yon fwa siy yo an plas, keyframes sispann se yon koleksyon ke trik nouvèl gaye epi yo vin yon pati nan langaj konsepsyon an. Yo fè pwodwi a santi yo plis entansyonèl, pi konsistan, ak plis vivan. Si ou pran yon bagay nan atik sa a, se pou li se sa a: animasyon yo merite menm swen ak estrikti nou deja bay koulè, tipografi, ak espas. Yon ti envestisman nan keyframes tokens peye chak fwa koòdone ou deplase.
