Bayangkeun ieu: anjeun gabung ka proyék anyar, teuleum kana basis kode, sareng dina sababaraha jam kahiji, anjeun mendakan hal anu teu biasa. Kasebar sapanjang stylesheets, anjeun mendakan sababaraha definisi @keyframes pikeun animasi dasar anu sami. Tilu épék fade-in anu béda, dua atanapi tilu variasi slide, sakeupeul animasi zum, sareng sahenteuna dua animasi spin anu béda sabab, naha, naha henteu? @keyframes pulsa { ti { skala: 1; } ka { skala: 1.1; } }
@keyframes gedé-pulsa { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1.2; } }
Upami skénario ieu katingalina biasa, anjeun henteu nyalira. Dina pangalaman kuring dina sagala rupa proyék, salah sahiji kameunangan gancang anu paling konsisten anu kuring tiasa nganteurkeun nyaéta konsolidasi sareng standarisasi keyframes. Éta janten pola anu tiasa dipercaya anu ayeuna kuring ngarepkeun ngabersihkeun ieu salaku salah sahiji tugas munggaran kuring dina basis kode anyar. Logika Tukangeun Chaos redundansi ieu ngajadikeun rasa sampurna mun anjeun mikir ngeunaan eta. Urang sadayana nganggo animasi dasar anu sami dina padamelan dinten-dinten: luntur, ngageser, ngazum, muter, sareng épék umum anu sanés. Animasi ieu cukup lugas, sareng gampang nyebatkeun definisi @keyframes gancang pikeun ngalaksanakeun padamelan. Tanpa sistem animasi terpusat, pamekar alami nulis keyframes ieu ti scratch, unaware yén animasi sarupa geus aya di tempat sejenna dina codebase nu. Ieu hususna umum nalika damel di arsitéktur dumasar-komponén (anu kalolobaan urang ngalakukeun dinten ayeuna), sabab tim sering dianggo paralel dina bagian anu béda dina aplikasi. Hasilna? Animasi rusuh. Masalah Leutik Isu anu paling atra sareng duplikasi keyframes nyaéta waktos pangembangan anu ngabuang sareng kembung kode anu teu perlu. Sababaraha definisi keyframe hartina sababaraha tempat pikeun ngapdet lamun sarat robah. Naha anjeun kedah nyaluyukeun waktos animasi luntur anjeun? Anjeun bakal kedah moro ka handap unggal conto sakuliah codebase Anjeun. Hoyong ngabakukeun fungsi easing? Good tuah manggihan sagala variasi. Multiplication titik pangropéa ieu ngajadikeun malah animasi basajan ngamutahirkeun tugas-consuming waktu. Masalah anu langkung ageung duplikasi keyframes ieu nyiptakeun masalah leuwih insidious lurking handapeun beungeut: bubu lingkup global. Malah nalika gawé bareng arsitéktur dumasar-komponén, keyframes CSS salawasna dihartikeun dina wengkuan global. Ieu ngandung harti yén sakabéh keyframes dilarapkeun ka sadaya komponén. salawasna. Sumuhun, animasi Anjeun teu merta ngagunakeun keyframes Anjeun tangtukeun dina komponén Anjeun. Éta ngagunakeun kerangka konci anu terakhir anu cocog sareng nami anu sami anu dimuat kana lingkup global. Salami sadayana keyframes anjeun idéntik, ieu bisa sigana masalah leutik. Tapi momen rék ngaropea hiji animasi pikeun kasus pamakéan husus, anjeun dina kasulitan, atawa goréng, anjeun bakal jadi hiji ngabalukarkeun aranjeunna. Boh animasi Anjeun moal jalan sabab komponén séjén dimuat sanggeus anjeun, overwriting keyframes Anjeun, atawa beban komponén Anjeun panungtungan sarta ngahaja ngarobah paripolah animasi pikeun unggal komponén séjén ngagunakeun ngaran keyframe urang, jeung anjeun malah teu sadar eta. Ieu conto saderhana anu nunjukkeun masalahna: .komponén-hiji { /* gaya komponén */ animasi: pulsa 1s betah-di-kaluar alternatif taya; }
/* definisi @keyframes ieu moal jalan */ @keyframes pulsa { ti { skala: 1; } ka { skala: 1.1; } }
/* engké di kode... */
.komponén-dua { /* gaya komponén */ animasi: pulsa 1s betah-di-kaluar taya wates; }
/* keyframes ieu bakal dilarapkeun ka duanana komponén */ @keyframes pulsa { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1.2; } }
Kadua komponén nganggo nami animasi anu sami, tapi definisi @keyframes kadua nimpa anu munggaran. Ayeuna duanana komponén-hiji jeung komponén-dua bakal ngagunakeun keyframes kadua, paduli nu komponén diartikeun keyframes mana. Tempo Pen Keyframes Tokens - Demo 1 [forked] ku Amit Sheen. Bagian awon? Ieu sering dianggo sampurna dina pangwangunan lokal tapi ngarecah misterius dina produksi nalika prosés ngawangun ngarobah urutan loading of stylesheets Anjeun. Anjeun mungkas nepi ka animasi nu kalakuanana béda gumantung kana komponén nu dimuat na naon runtuyan. Solusina: Unified Keyframes Jawaban kana rusuh ieu basajan heran: keyframes dinamis siap pake disimpen dina stylesheet dibagikeun. Tinimbang ngantep unggal komponén nangtukeun animasi sorangan, urang nyieun keyframes terpusat nu well-documented, gampangpamakéan, maintainable, sarta tailored ka kabutuhan husus proyek Anjeun. Pikirkeun éta salaku token keyframes. Sagampil kami nganggo tokens pikeun kelir sarta spasi, sarta loba urang geus ngagunakeun tokens pikeun sipat animasi, kawas durasi na easing fungsi, naha henteu make tokens pikeun keyframes ogé? Pendekatan ieu tiasa ngahijikeun sacara alami sareng alur kerja token desain ayeuna anu anjeun anggo, bari ngarengsekeun masalah leutik (duplikasi kode) sareng masalah anu langkung ageung (konflik lingkup global) sakaligus. Gagasanna langsung: nyiptakeun sumber bebeneran tunggal pikeun sadaya animasi umum urang. Stylesheet dibagikeun ieu ngandung keyframes taliti crafted nu nutupan pola animasi proyék kami sabenerna migunakeun. Taya deui guessing naha animasi luntur geus aya wae di codebase urang. Taya deui ngahaja overwriting animasi ti komponén séjén. Tapi ieu koncina: ieu sanés ngan ukur animasi salinan-témpél statik. Éta dirarancang pikeun dinamis sareng tiasa disaluyukeun ngaliwatan sipat khusus CSS, ngamungkinkeun urang pikeun ngajaga konsistensi bari tetep gaduh kalenturan pikeun adaptasi animasi kana kasus pamakean khusus, sapertos upami anjeun peryogi animasi "pulsa" anu rada ageung di hiji tempat. Ngawangun The First Keyframes Token Salah sahiji buah gantung anu mimiti anu kedah urang atasi nyaéta animasi "fade-in". Dina salah sahiji proyék anyar kuring, kuring mendakan langkung ti belasan definisi fade-in anu misah, sareng enya, aranjeunna sadayana ngan saukur animasi opacity tina 0 dugi ka 1. Ku kituna, hayu urang nyieun stylesheet anyar, sebutkeun kf-tokens.css, impor kana proyék urang, sarta nempatkeun keyframes kami kalawan komentar ditangtoskeun jero eta. /* keyframes-tokens.css */
/* * Diudar Dina - diudar animasi lawang * Pamakéan: animasi: kf-fade-in 0.3s betah-kaluar; */ @keyframes kf-fade-in { ti { opacity: 0; } ka { opacity: 1; } }
Deklarasi @keyframes tunggal ieu ngagentos sadaya animasi luntur anu kasebar dina dasar kode kami. Bersih, saderhana, sareng tiasa dianggo sacara global. Sareng ayeuna urang gaduh token ieu didefinisikeun, urang tiasa nganggo éta tina komponén naon waé sapanjang proyék kami: .modal { animasi: kf-udar-di 0.3s betah-kaluar; }
.tooltip { animasi: kf-diudar-di 0,2s betah-di-kaluar; }
.bewara { animasi: kf-diudar-di 0,5s betah-kaluar; }
Tempo Pen Keyframes Tokens - Demo 2 [forked] ku Amit Sheen. Catetan: Kami nganggo awalan kf- dina sadaya nami @keyframes. Awalan ieu boga fungsi minangka spasi ngaran nu nyegah konflik ngaran jeung animasi aya dina proyék jeung ngajadikeun eta geuwat jelas yén keyframes ieu asalna tina keyframes file tokens urang. Nyieun Slide Dinamis The kf-fade-in keyframes jalan hébat sabab basajan tur aya saeutik rohangan pikeun mess hal up. Dina animasi sejen, kumaha oge, urang kudu jadi leuwih dinamis, sarta di dieu urang bisa ngungkit kakuatan gede pisan sipat custom CSS. Ieu dimana keyframes tokens bener caang dibandingkeun animasi statik sumebar. Hayu urang nyandak hiji skenario umum: "slide-in" animasi. Tapi geser ti mana? 100px ti katuhu? 50% ti kénca? Naha éta kedah asup ti luhur layar? Atawa meureun ngambang ti handap? Jadi loba kemungkinan, tapi tinimbang nyieun keyframes misah pikeun tiap arah jeung unggal variasi, urang bisa ngawangun hiji token fléksibel nu diluyukeun kana sagala skenario: /* * Geser Dina - animasi geser arah * Anggo --kf-slide-from pikeun ngontrol arah * Standar: geser ti kénca (-100%) * Pamakéan: * animasi: kf-slide-di 0.3s betah-kaluar; * --kf-slide-ti: -100px 0; // geser ti kénca * --kf-slide-ti: 100px 0; // geser ti katuhu * --kf-slide-ti: 0 -50px; // geser ti luhur */
@keyframes kf-slide-in { ti { narjamahkeun: var (--kf-slide-ti, -100% 0); } ka { narjamahkeun: 0 0; } }
Ayeuna urang tiasa nganggo token @keyframes tunggal ieu pikeun arah slide naon waé ku cara ngarobih --kf-slide-from sipat khusus: .sidebar { animasi: kf-slide-di 0.3s betah-kaluar; /* Ngagunakeun nilai standar: slides ti kénca */ }
.bewara { animasi: kf-slide-di 0.4s betah-kaluar; --kf-slide-ti: 0 -50px; /* geser ti luhur */ }
.modal { animasi: kf-fade-in 0,5s, kf-slide-di 0,5s kubik-bezier (0,34, 1,56, 0,64, 1); --kf-slide-ti: 50px 50px; /* geser ti handap-katuhu */ }
Pendekatan ieu masihan kami kalenturan anu luar biasa bari ngajaga konsistensi. Hiji deklarasi keyframe, kemungkinan tanpa wates. Tempo Pen Keyframes Tokens - Demo 3 [forked] ku Amit Sheen. Sareng upami urang hoyong ngajantenkeun animasi urang langkung fleksibel, ngamungkinkeun épék "slide-out" ogé, urang tiasakantun nambihan --kf-slide-to sipat adat, sami sareng anu bakal urang tingali dina bagian salajengna. Bidirectional Zoom Keyframes Animasi umum sanésna anu diduplikasi dina proyék nyaéta épék "zum". Naha éta skala-up anu halus pikeun pesen roti bakar, zum-in dramatis pikeun modal, atanapi éfék skala-handap anu lembut pikeun judul, animasi zum aya dimana-mana. Gantina nyieun keyframes misah pikeun tiap nilai skala, hayu urang ngawangun hiji set fléksibel tina kf-zoom keyframes:
/* * Zoom - animasi skala * Anggo --kf-zoom-from sareng --kf-zoom-to pikeun ngontrol nilai skala * Default: zum ti 80% ka 100% (0.8 ka 1) * Pamakéan: * animasi: kf-zum 0.2s betah-kaluar; * --kf-zum-ti: 0,5; --kf-zum-ka: 1; // zum ti 50% ka 100% * --kf-zum-ti: 1; --kf-zum-ka: 0; // zum ti 100% ka 0% * --kf-zum-ti: 1; --kf-zum-ka: 1.1; // zum ti 100% ka 110% */
@keyframes kf-zoom { ti { skala: var (--kf-zum-ti, 0.8); } ka { skala: var(--kf-zum-ka, 1); } }
Kalayan hiji definisi, urang tiasa ngahontal variasi zum anu urang peryogikeun: .panggang { animasi: kf-slide-in 0.2s, kf-zum 0.4s betah-kaluar; --kf-slide-ti: 0 100%; /* geser ti luhur */ /* Ngagunakeun zum standar: skala ti 80% nepi ka 100% */ }
.modal { animasi: kf-zum 0,3s kubik-bezier (0,34, 1,56, 0,64, 1); --kf-zum-ti: 0; /* zum dramatis ti 0% nepi ka 100% */ }
.heading { animasi: kf-fade-in 2s, kf-zum 2s betah-di; --kf-zum-ti: 1.2; --kf-zum-ka: 0,8; /* skala lembut turun */ }
Standarna 0.8 (80%) tiasa dianggo sampurna pikeun sabagéan ageung elemen UI, sapertos pesen roti bakar sareng kartu, bari tetep gampang disaluyukeun pikeun kasus khusus. Tempo Pen Keyframes Tokens - Demo 4 [forked] ku Amit Sheen. Anjeun panginten tiasa perhatikeun hal anu pikaresepeun dina conto panganyarna: kami parantos ngagabungkeun animasi. Salah sahiji kaunggulan konci gawé bareng @keyframes tokens nyaeta aranjeunna nuju dirancang pikeun ngahijikeun seamlessly saling. Komposisi lemes ieu ngahaja, teu kahaja. Urang bakal ngabahas komposisi animasi dina leuwih jéntré engké, kaasup dimana maranéhna bisa jadi masalah, tapi paling kombinasi anu lugas tur gampang pikeun nerapkeun. Catetan: Nalika nyerat tulisan ieu, sareng panginten kusabab nyeratna, kuring mendakan kuring mikirkeun deui sadayana ideu animasi lawang. Kalayan sagala kamajuan panganyarna dina CSS, urang masih peryogi aranjeunna pisan? Kabeneran, Adam Argyle ngajalajah patarosan anu sami sareng dikedalkeun kalayan saé dina blog na. Ieu teu contradict naon ditulis di dieu, tapi teu nampilkeun pendekatan patut tempo, utamana lamun proyek Anjeun ngandelkeun pisan kana animasi lawang. Animasi kontinyu Bari animasi lawang, kawas "diudar", "slide", jeung "zum" lumangsung sakali lajeng eureun, animasi kontinyu loop salamina pikeun narik perhatian atawa nunjukkeun kagiatan lumangsung. Dua animasi kontinyu paling umum kuring sapatemon téh "spin" (pikeun loading indikator) jeung "pulsa" (pikeun nyorot elemen penting). Animasi ieu nampilkeun tantangan unik nalika nyiptakeun token keyframes. Beda sareng animasi lawang anu biasana angkat ti hiji kaayaan ka kaayaan anu sanés, animasi kontinyu kedah disaluyukeun pisan dina pola paripolahna. Dokter Spin Unggal proyék sigana ngagunakeun sababaraha animasi spin. Sababaraha puteran saarah jarum jam, anu sanésna saarah jarum jam. Sababaraha ngalakukeun hiji rotasi 360-derajat tunggal, batur ngalakukeun sababaraha péngkolan pikeun éfék gancang. Gantina nyieun keyframes misah pikeun tiap variasi, hayu urang ngawangun hiji spin fléksibel nu handles sagala skenario:
/* * Spin - animasi rotasi * Anggo --kf-spin-from sareng --kf-spin-to pikeun ngatur rentang rotasi * Anggo --kf-spin-turns pikeun ngontrol jumlah rotasi * Default: rotates ti 0deg ka 360deg (1 rotasi pinuh) * Pamakéan: * animasi: kf-spin 1s linier taya wates; * --kf-spin-giliran: 2; // 2 rotations pinuh * --kf-spin-ti: 0deg; --kf-spin-ka: 180deg; // satengah rotasi * --kf-spin-ti: 0deg; --kf-spin-ka: -360deg; // lawan jarum jam */
@keyframes kf-spin { ti { muterkeun: var (--kf-spin-ti, 0deg); } ka { muterkeun: calc (var (--kf-spin-ti, 0deg) + var (--kf-spin-ka, 360deg) * var (--kf-spin-turns, 1)); } }
Ayeuna urang tiasa nyiptakeun variasi spin anu urang resep:
.loading-spinner { animasi: kf-spin 1s linier taya wates; /* Ngagunakeun standar: rotates ti 0deg nepi ka 360deg */ }
.gancang-loader { animasi: kf-spin 1.2s betah-di-kaluar taya wates séjén; --kf-spin-giliran: 3; /* 3 rotations pinuh pikeun tiap arah per siklus*/ }
.steped-mundur { animasi: kf-spin 1,5s léngkah (8) taya; --kf-spin-ka: -360deg; /* lawan jarum jam */ }
.halus-wiggle { animasi: kf-spin 2s betah-di-kaluar taya wates séjén; --kf-spin-ti: -16deg; --kf-spin-ka: 32deg; /* ngageol 36 deg: antara -18deg jeung +18deg */ }
Tempo Pen Keyframes Tokens - Demo 5 [forked] ku Amit Sheen. Kaéndahan pendekatan ieu yén keyframes sarua dianggo pikeun loading spinners, puteran ikon, épék ngageol, komo kompléks multi-turn animasi. The Pulse Paradox Animasi pulsa téh trickier sabab bisa "pulsa" sipat béda. Sababaraha pulsa skala, batur pulsa opacity, sarta sababaraha sipat warna pulsa kawas kacaangan atawa jenuh. Tinimbang nyieun keyframes misah pikeun tiap sipat, urang bisa nyieun keyframes nu dianggo kalayan sagala sipat CSS. Ieu conto keyframe pulsa kalayan pilihan skala sareng opacity:
/* * Pulse - animasi pulsa * Anggo --kf-pulse-scale-ti sareng --kf-pulse-scale-to pikeun ngadalikeun rentang skala * Anggo --kf-pulse-opacity-ti sareng --kf-pulse-opacity-to pikeun ngadalikeun rentang opacity * Default: euweuh pulsa (sadayana nilai 1) * Pamakéan: * animasi: kf-pulsa 2s ease-in-out taya wates alternatif; * --kf-pulsa-skala-ti: 0,95; --kf-pulsa-skala-ka: 1.05; // pulsa skala * --kf-pulsa-opacity-ti: 0.7; --kf-pulsa-opacity-ka: 1; // pulsa opacity */
@keyframes kf-pulsa { ti { skala: var (--kf-pulsa-skala-ti, 1); opacity: var (--kf-pulsa-opacity-ti, 1); } ka { skala: var (--kf-pulsa-skala-ka, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Ieu nyiptakeun pulsa fléksibel anu tiasa ngahirupkeun sababaraha sipat: .panggero-pilampah { animasi: kf-pulsa 0,6s taya wates séjén; --kf-pulsa-opacity-ti: 0,5; /* pulsa opacity */ }
.bewara-titik { animasi: kf-pulsa 0,6s betah-di-kaluar alternatif taya; --kf-pulsa-skala-ti: 0.9; --kf-pulsa-skala-ka: 1.1; /* skala pulsa */ }
.text-highlight { animasi: kf-pulsa 1,5s betah-kaluar taya wates; --kf-pulsa-skala-ti: 0.8; --kf-pulsa-opacity-ti: 0.2; /* skala sareng pulsa opacity */ }
Tempo Pen Keyframes Tokens - Demo 6 [forked] ku Amit Sheen. Keyframe kf-pulsa tunggal ieu tiasa ngadamel sadayana tina perhatian anu halus dugi ka sorotan dramatis, bari gampang disaluyukeun. Easing canggih Salah sahiji hal anu hébat ngeunaan ngagunakeun token keyframes nyaéta kumaha gampangna pikeun ngalegaan perpustakaan animasi kami sareng masihan épék anu paling seueur pamekar moal ganggu nyerat ti mimiti, sapertos elastis atanapi mumbul. Ieu conto basajan "mumbul" keyframes token anu ngagunakeun --kf-bounce-ti sipat custom pikeun ngadalikeun jangkungna luncat. /* * Bounce - bouncing animasi lawang * Anggo --kf-bounce-from pikeun ngontrol jangkungna luncat * Default: luncat tina 100vh (pareum layar) * Pamakéan: * animasi: kf-bounce 3s betah-di; * --kf-mumbul-ti: 200px; // luncat tina jangkungna 200px */
@keyframes kf-bounce { 0% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -1); }
34% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -0,4); }
55% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -0,2); }
72% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -0,1); }
85% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -0,05); }
94% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -0,025); }
99% { narjamahkeun: 0 calc (var (--kf-mumbul-ti, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { narjamahkeun: 0 0; animasi-timing-fungsi: betah-kaluar; } }
Animasi kawas "elastis" anu bit trickier kusabab itungan jero keyframes. Urang kedah ngartikeun --kf-elastic-from-X sareng --kf-elastic-from-Y sacara misah (duanana opsional), sareng babarengan aranjeunna ngantepkeun kami ngadamel lawang elastis tina titik mana waé dina layar.
/* * Elastis Dina - animasi lawang elastis * Anggo --kf-elastic-from-X sareng --kf-elastic-from-Y pikeun ngadalikeun posisi mimiti * Default: asup ti puseur luhur (0, -100vh) * Pamakéan: * animasi: kf-elastis-di 2s betah-di-kaluar duanana; * --kf-élastis-ti-X: -50px; * --kf-élastis-ti-Y: -200px; // asupkeun ti (-50px, -200px) */
@keyframes kf-élastis-in { 0% { narjamahkeun: calc (var (--kf-élastis-ti-X, -50vw) * 1) calc (var (- kf-élastis-ti-Y, 0px) * 1); }
16% { narjamahkeun: calc (var (--kf-élastis-ti-X, -50vw) * -0.3227) calc (var (--kf-élastis-ti-Y, 0px) * -0.3227); }
28% { narjamahkeun: calc(var(--kf-élastis-ti-X, -50vw) * 0,1312)calc (var (--kf-élastis-ti-Y, 0px) * 0.1312); }
44% { narjamahkeun: calc (var (--kf-élastis-ti-X, -50vw) * -0,0463) calc (var (--kf-élastis-ti-Y, 0px) * -0,0463); }
59% { narjamahkeun: calc (var (--kf-élastis-ti-X, -50vw) * 0,0164) calc (var (--kf-élastis-ti-Y, 0px) * 0,0164); }
73% { narjamahkeun: calc (var (--kf-élastis-ti-X, -50vw) * -0,0058) calc (var (--kf-élastis-ti-Y, 0px) * -0,0058); }
88% { narjamahkeun: calc (var (--kf-élastis-ti-X, -50vw) * 0,0020) calc (var (--kf-élastis-ti-Y, 0px) * 0,0020); }
100% { narjamahkeun: 0 0; } }
Pendekatan ieu ngagampangkeun ngagunakeun deui sareng ngaropea keyframes canggih di sakuliah proyék urang, ngan ku cara ngarobah hiji sipat custom tunggal.
.bounce-and-zum { animasi: kf-bounce 3s ease-in, kf-zum 3s liniér; --kf-zum-ti: 0; }
.bounce-and-slide { animasi-komposisi: nambahkeun; /* Kadua animasi nganggo tarjamah */ animasi: kf-bounce 3s ease-in, kf-slide-in 3s betah-kaluar; --kf-slide-ti: -200px; }
.elastis-in { animasi: kf-elastis-di 2s betah-di-kaluar duanana; }
Tempo Pen Keyframes Tokens - Demo 7 [forked] ku Amit Sheen. Nepi ka titik ieu, urang geus katempo kumaha urang bisa ngumpulkeun keyframes dina cara pinter jeung efisien. Tangtosna, anjeun panginten hoyong ngarobih hal-hal supados langkung pas sareng kabutuhan proyék anjeun, tapi kami parantos nutupan conto sababaraha animasi umum sareng kasus pamakean sapopoé. Tur kalawan tokens keyframes ieu di tempat, urang ayeuna boga blok wangunan kuat pikeun nyieun konsisten, animasi maintainable sakuliah sakabéh proyék. Taya deui keyframes duplikat, euweuh deui konflik lingkup global. Ngan cara anu bersih, merenah pikeun nanganan sadaya kabutuhan animasi urang. Tapi patarosan nyata: Kumaha urang nyusun blok wangunan ieu babarengan? Ngahijikeun Sadayana Kami geus katempo yen ngagabungkeun dasar keyframes tokens basajan. Urang teu kedah nanaon husus tapi keur ngartikeun animasi munggaran, nangtukeun hiji kadua, nyetel variabel sakumaha diperlukeun, tur éta. /* Diudar di + geser di */ .panggang { animasi: kf-fade-in 0.4s, kf-slide-di 0,4s kubik-bezier (0,34, 1,56, 0,64, 1); --kf-slide-ti: 0 40px; }
/* Ngazum gede + diudar */ .modal { animasi: kf-fade-in 0.3s, kf-zum 0,3s kubik-bezier (0,34, 1,56, 0,64, 1); --kf-zum-ti: 0.7; --kf-zum-ka: 1; }
/* Geser asup + pulsa */ .bewara { animasi: kf-slide-di 0,5 detik, kf-pulsa 1.2s ease-in-out taya wates alternatif; --kf-slide-ti: -100px 0; --kf-pulsa-skala-ti: 0,95; --kf-pulsa-skala-ka: 1.05; }
Kombinasi ieu dianggo beautifully sabab unggal animasi nargétkeun sipat béda: opacity, transformasi (narjamahkeun / skala), jsb Tapi kadang aya bentrok, sarta kami kudu nyaho naha jeung kumaha carana nungkulan aranjeunna. Nalika dua animasi nyobian ngahirupkeun sipat anu sami - contona, boh skala animasi atanapi duanana opacity animasi - hasilna moal sapertos anu anjeun ngarepkeun. Sacara standar, ngan ukur salah sahiji animasi anu leres-leres dilarapkeun kana sipat éta, nyaéta anu terakhir dina daptar animasi. Ieu watesan kumaha CSS handles sababaraha animasi dina sipat anu sarua. Contona, ieu moal jalan sakumaha dimaksudkeun sabab ngan animasi kf-pulsa bakal nerapkeun. .bad-combo { animasi: kf-zoom 0.5s ka hareup, kf-pulsa 1,2s alternatip taya wates; --kf-zum-ti: 0,5; --kf-zum-ka: 1.2; --kf-pulsa-skala-ti: 0.8; --kf-pulsa-skala-ka: 1.1; }
Animasi Tambihan Cara pangbasajanna sareng paling langsung pikeun nanganan sababaraha animasi anu mangaruhan sipat anu sami nyaéta ngagunakeun sipat animasi-komposisi. Dina conto panungtungan di luhur, animasi kf-pulsa ngagantikeun animasi kf-zoom, ku kituna urang moal ningali zum awal jeung moal meunang skala ekspektasi 1,2. Ku nyetel animasi-komposisi pikeun nambahkeun, kami ngabejaan browser pikeun ngagabungkeun duanana animasi. Ieu masihan urang hasil anu dipikahoyong. .komponén-dua { animasi-komposisi: nambahkeun; }
Tempo Pen Keyframes Tokens - Demo 8 [forked] ku Amit Sheen. Pendekatan ieu tiasa dianggo pikeun kalolobaan kasus dimana urang hoyong ngagabungkeun épék dina harta anu sami. Éta ogé kapaké nalika urang kedah ngagabungkeun animasi sareng nilai sipat statik. Contona, upami urang boga unsur anu ngagunakeun sipat narjamahkeun pikeun posisi eta persis dimana urang hoyong, lajeng urang hoyong ngahirupkeun eta dina kalawan keyframes kf-slide-di, urang meunang luncat katempo nasty tanpa animasi-komposisi. Tempo Pen Keyframes Tokens - Demo 9 [forked] ku Amit Sheen. Kalawan animasi-komposisi disetel ka nambahkeun, animasi ieu mulus digabungkeun jeung ayatransformasi, jadi unsur tetep dina tempatna sarta animates saperti nu diharapkeun. Animasi Stagger Cara séjén pikeun nanganan sababaraha animasi nyaéta "ngahudangkeun" aranjeunna - nyaéta, ngamimitian animasi kadua rada saatos anu munggaran réngsé. Ieu sanes solusi anu lumaku pikeun unggal hal, tapi mangpaat lamun urang boga animasi lawang dituturkeun ku animasi kontinyu. /* luntur + pulsa opacity */ .bewara { animasi: kf-fade-in 2s ease-out, kf-pulsa 0,5s 2s betah-in-kaluar taya wates séjén; --kf-pulsa-opacity-ka: 0,5; }
Tempo Pen Keyframes Tokens - Demo 10 [forked] ku Amit Sheen. Urusan pesenan Sabagéan ageung animasi anu kami damel sareng nganggo harta transformasi. Dina kalolobaan kasus, ieu téh saukur leuwih merenah. Éta ogé gaduh kaunggulan kinerja sabab animasi transformasi tiasa dipercepat GPU. Tapi upami urang nganggo transformasi, urang kedah nampi yén urutan dimana urang ngalakukeun transformasi penting. loba pisan. Dina keyframes kami sajauh ieu, kami geus dipaké individu transforms. Numutkeun spésifikasi, ieu salawasna dilarapkeun dina urutan tetep: kahiji, unsur meunang narjamahkeun, teras muterkeun, teras skala. Ieu masuk akal sareng anu paling urang ngarepkeun. Nanging, upami urang nganggo sipat transformasi, urutan dimana fungsina ditulis nyaéta urutan anu diterapkeunana. Dina hal ieu, lamun urang mindahkeun hiji hal 100 piksel dina sumbu-X lajeng muterkeun eta ku 45 derajat, teu sarua jeung mimiti muterkeun eta ku 45 derajat lajeng mindahkeun eta 100 piksel. /* Kotak pink: Tarjamahkeun heula, teras puter */ .conto-hiji { transformasi: translateX (100px) muterkeun (45deg); }
/* Kotak héjo: Puter heula, teras tarjamahkeun */ .conto-dua { transformasi: muterkeun (45deg) translateX (100px); }
Tempo Pen Keyframes Tokens - Demo 11 [forked] ku Amit Sheen. Tapi dumasar kana urutan transformasi, sadaya transformasi individu - sadayana anu kami dianggo pikeun token keyframes - kajadian sateuacan fungsi transformasi. Éta hartosna naon waé anu anjeun setel dina harta transformasi bakal kajantenan saatos animasi. Tapi lamun disetel, contona, narjamahkeun babarengan jeung keyframes kf-spin, narjamahkeun bakal lumangsung saméméh animasi. Bingung acan?! Ieu ngakibatkeun kaayaan dimana nilai statik tiasa nyababkeun hasil anu béda pikeun animasi anu sami, sapertos dina kasus ieu:
/* Animasi umum pikeun duanana spinners */ .pamali { animasi: kf-spin 1s linier taya wates; }
/* Spinner pink: tarjamahkeun sateuacan diputar (transformasi individu) */ .spinner-pink { narjamahkeun: 100% 50%; }
/* Spinner héjo: puter teras tarjamahkeun (urutan fungsi) */ .spinner-héjo { transformasi: narjamahkeun (100%, 50%); }
Tempo Pen Keyframes Tokens - Demo 12 [forked] ku Amit Sheen. Anjeun tiasa ningali yén spinner munggaran (pink) meunang narjamahkeun nu lumangsung saméméh muterkeun kf-spin, jadi mimitina pindah ka tempatna lajeng spins. The spinner kadua (héjo) meunang narjamahkeun () fungsi anu lumangsung sanggeus transformasi individu, jadi unsur mimiti spin, lajeng pindah relatif ka sudut ayeuna, sarta kami meunang éta éfék orbit lega. Henteu, ieu sanés bug. Ieu mangrupikeun salah sahiji hal anu urang kedah terang ngeunaan CSS sareng émut nalika damel sareng sababaraha animasi atanapi sababaraha transformasi. Upami diperlukeun, anjeun ogé tiasa nyieun hiji set tambahan kf-spin-alt keyframes nu muterkeun elemen ngagunakeun muterkeun () fungsi. Ngurangan Gerak Sarta bari urang nuju ngawangkong ngeunaan keyframes alternatif, urang teu bisa malire pilihan "euweuh animasi". Salah sahiji kaunggulan pangbadagna ti pamakéan keyframes tokens nyaeta diakses bisa dipanggang dina, tur éta sabenerna rada gampang pikeun ngalakukeun. Ku ngarancang keyframes urang kalawan aksés ka pikiran, urang bisa mastikeun yén pamaké nu resep ngurangan gerak meunang smoother, kirang distracting pangalaman, tanpa gawé tambahan atawa duplikasi kode. Harti pasti tina "Gerak Ngurangan" tiasa robih sakedik tina hiji animasi ka animasi anu sanés, sareng ti proyék ka proyék, tapi ieu sababaraha poin penting anu kedah diémutan: Muting Keyframes Bari sababaraha animasi bisa softened atawa slowed handap, aya nu lianna nu kudu ngaleungit lengkep lamun gerak ngurangan dipénta. Animasi pulsa mangrupikeun conto anu saé. Pikeun mastikeun animasi ieu teu ngajalankeun dina modeu gerak ngurangan, urang ngan saukur bisa mungkus aranjeunna dina query média luyu.
@media (resep-reduced-motion: no-preference) { @keyfrmaes kf-pulsa { ti { skala: var (--kf-pulsa-skala-ti, 1); opacity: var (--kf-pulsa-opacity-ti, 1); } ka { skala: var (--kf-pulsa-skala-ka, 1); opacity:var (--kf-pulse-opacity-to, 1); } } }
Ieu ensures yén pamaké anu geus disetel prefers-diréduksi-gerak pikeun ngurangan moal ningali animasi tur bakal meunang pangalaman nu cocog preferensi maranéhanana. Instan Dina Aya sababaraha keyframes urang teu bisa saukur dipiceun, kayaning animasi lawang. Nilaina kedah robih, kedah ngahirupkeun; Upami teu kitu, unsur moal boga nilai bener. Tapi dina gerakan ngurangan, transisi ieu ti nilai awal kudu instan. Pikeun ngahontal ieu, urang bakal nangtukeun hiji set tambahan tina keyframes mana nilai jumps langsung ka kaayaan tungtung. Ieu janten keyframes standar urang. Lajeng, urang bakal nambahan keyframes biasa di jero query média pikeun prefers-réduksi-gerak disetel ka no-resep, kawas dina conto saméméhna. /* pop in instan pikeun ngurangan gerak */ @keyframes kf-zoom { ti, ka { skala: var(--kf-zum-ka, 1); } }
@media (resep-reduced-motion: no-preference) { /* Keyframes zum asli */ @keyframes kf-zoom { ti { skala: var (--kf-zum-ti, 0.8); } ka { skala: var(--kf-zum-ka, 1); } } }
Ku cara ieu, pamaké anu resep gerak ngurangan bakal ningali unsur muncul instan dina kaayaan ahirna, bari dulur sejenna meunang transisi animasi. Pendekatan Lelembut Aya kasus dimana urang hoyong tetep sababaraha gerakan, tapi langkung lemes sareng langkung tenang tibatan animasi asli. Contona, urang bisa ngaganti hiji lawang mumbul ku diudar-in hipu.
@keyframes kf-bounce { /* Lemes luntur-in pikeun ngurangan gerak */ }
@media (resep-reduced-motion: no-preference) { @keyframes kf-bounce { /* Keyframes mumbul asli */ } }
Ayeuna, pangguna anu diaktipkeun gerak anu dikurangan masih tiasa katingali, tapi tanpa gerakan anu kuat tina mumbul atanapi animasi elastis. Kalawan blok wangunan di tempat, patarosan salajengna nyaeta kumaha carana sangkan aranjeunna bagian tina workflow sabenerna. Nulis keyframes fléksibel hiji hal, tapi nyieun eta dipercaya sakuliah proyék badag merlukeun sababaraha strategi nu kuring kungsi diajar cara teuas. Strategi Palaksanaan & Praktek Pangalusna Sakali kami boga perpustakaan solid keyframes tokens, tantangan nyata kumaha carana mawa kana karya sapopoé.
Godaan nyaéta leupaskeun sadaya keyframes sakaligus sareng nyatakeun masalahna direngsekeun, tapi dina prakna kuring mendakan yén hasil anu pangsaéna asalna tina nyoko bertahap. Mimitian ku animasi anu paling umum, sapertos luntur atanapi geser. Ieu mangrupikeun kameunangan anu gampang anu nunjukkeun nilai langsung tanpa meryogikeun nyerat ulang anu ageung. Nami mangrupikeun titik sanés anu pantes diperhatoskeun. Awalan atanapi namespace anu konsisten ngajantenkeun animasi mana anu token sareng mana anu lokal. Éta ogé nyegah tabrakan anu teu kahaja sareng ngabantosan anggota tim énggal ngakuan sistem anu dibagi sakedap. Dokuméntasi sarua pentingna jeung kodeu sorangan. Malah komentar pondok luhureun unggal keyframes token tiasa nyimpen jam guessing engké. Pamekar kedah tiasa muka file token, nyeken pangaruh anu diperyogikeun, sareng nyalin pola pamakean langsung kana komponénna. Kalenturan anu ngajadikeun pendekatan ieu patut usaha. Ku ngalaan sipat adat anu wijaksana, kami masihan ruang tim pikeun adaptasi animasi tanpa ngarusak sistem. Dina waktu nu sarua, coba teu overcomplicate. Nyadiakeun kenop nu penting jeung tetep opinionated sésana. Tungtungna, inget diakses. Henteu unggal animasi peryogi alternatif gerak anu ngirangan, tapi seueur anu ngalakukeun. Baking dina pangaluyuan ieu mimiti hartina urang pernah kudu retrofit aranjeunna engké, sarta nembongkeun tingkat perawatan anu pamaké urang bakal perhatikeun sanajan maranéhna pernah nyebut eta.
Dina pangalaman kuring, ngubaran keyframes tokens salaku bagian tina design tokens workflow urang naon ngajadikeun eta lengket. Sakali aranjeunna aya dina tempatna, aranjeunna ngeureunkeun perasaan sapertos épék khusus sareng janten bagian tina basa desain, penyuluhan alami kumaha produkna gerak sareng ngaréspon. Bungkus Animasi tiasa janten salah sahiji bagian anu paling pikaresepeun pikeun ngawangun antarmuka, tapi tanpa struktur, aranjeunna ogé tiasa janten salah sahiji sumber hanjelu pangbadagna. Ku ngubaran keyframes sakumaha tokens, Anjeun nyandak hal anu biasana pabalatak tur teuas pikeun ngatur jeung ngahurungkeun kana jelas, sistem bisa diprediksi. Nilai nyata henteu ngan dina nyimpen sababaraha baris kode. Éta dina kapercayaan yén nalika anjeun nganggo luntur, geser, zum, atanapi spin, anjeun terang persis kumaha éta bakal kalakuanana dina proyék éta. Ieu dina kalenturan nu asalna tina sipat custom tanpa rusuh tina variasi sajajalan. Sarta eta aya dina diakses diwangun kana yayasan tinimbang ditambahkeun salakuhiji afterthought. Kuring geus katempo gagasan ieu dianggo dina tim béda jeung codebases béda, sarta pola sok sarua. Sakali tokens aya di tempat, keyframes eureun jadi kumpulan sumebar trik tur jadi bagian tina basa desain. Aranjeunna ngajantenkeun produkna langkung ngahaja, langkung konsisten, sareng langkung hirup. Upami anjeun nyandak hiji hal tina tulisan ieu, hayu waé kieu: animasi pantes perawatan sareng struktur anu sami anu kami parantos masihan kana warna, tipografi, sareng jarak. Investasi leutik dina token keyframes mayar unggal waktos antarmuka anjeun pindah.
