Isipin ito: sumali ka sa isang bagong proyekto, sumisid sa codebase, at sa loob ng unang ilang oras, may natuklasan kang nakakadismaya na pamilyar. Nakakalat sa mga stylesheet, makakahanap ka ng maraming kahulugan ng @keyframes para sa parehong mga pangunahing animation. Tatlong magkakaibang fade-in effect, dalawa o tatlong slide variation, isang dakot ng zoom animation, at hindi bababa sa dalawang magkaibang spin animation dahil, mabuti, bakit hindi? @keyframes pulse { mula kay { sukat: 1; } sa { sukat: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { sukat: 1; } 10%, 40% { sukat: 1.2; } }
Kung pamilyar ang sitwasyong ito, hindi ka nag-iisa. Sa aking karanasan sa iba't ibang proyekto, isa sa mga pinaka-pare-parehong mabilis na panalo na maibibigay ko ay ang pagsasama-sama at pag-standardize ng mga keyframe. Ito ay naging isang maaasahang pattern na inaasahan ko na ngayon ang paglilinis na ito bilang isa sa aking mga unang gawain sa anumang bagong codebase. Ang Lohika sa Likod ng Chaos Ang redundancy na ito ay may perpektong kahulugan kapag iniisip mo ito. Gumagamit tayo ng parehong pangunahing mga animation sa ating pang-araw-araw na gawain: fades, slides, zooms, spins, at iba pang mga karaniwang epekto. Ang mga animation na ito ay medyo prangka, at madaling gumawa ng isang mabilis na kahulugan ng @keyframes upang magawa ang trabaho. Kung walang sentralisadong sistema ng animation, natural na isinulat ng mga developer ang mga keyframe na ito mula sa simula, nang hindi alam na mayroon nang mga katulad na animation sa ibang lugar sa codebase. Pangkaraniwan ito lalo na kapag nagtatrabaho sa mga arkitektura na nakabatay sa bahagi (na ginagawa ng karamihan sa atin sa mga araw na ito), dahil madalas na magkaparehas na gumagana ang mga team sa iba't ibang bahagi ng application. Ang resulta? Animation kaguluhan. Ang Maliit na Problema Ang pinaka-halatang isyu sa pagdoble ng mga keyframe ay ang nasayang na oras ng pag-develop at hindi kinakailangang code bloat. Ang ibig sabihin ng maraming kahulugan ng keyframe ay maraming lugar na ia-update kapag nagbago ang mga kinakailangan. Kailangang ayusin ang timing ng iyong fade animation? Kakailanganin mong hanapin ang bawat instance sa iyong codebase. Gusto mong i-standardize ang mga function ng easing? Good luck sa paghahanap ng lahat ng mga pagkakaiba-iba. Ang pagpaparami ng mga punto ng pagpapanatili na ito ay ginagawang kahit na ang simpleng pag-update ng animation ay isang gawaing nakakaubos ng oras. Ang Mas Malaking Problema Ang pagdoble ng keyframes na ito ay lumilikha ng mas mapanlinlang na problema na nakatago sa ilalim ng ibabaw: ang pandaigdigang saklaw na bitag. Kahit na nagtatrabaho sa mga arkitektura na nakabatay sa bahagi, palaging tinutukoy ang mga keyframe ng CSS sa pandaigdigang saklaw. Nangangahulugan ito na ang lahat ng mga keyframe ay nalalapat sa lahat ng mga bahagi. Laging. Oo, hindi kinakailangang gamitin ng iyong animation ang mga keyframe na tinukoy mo sa iyong bahagi. Ginagamit nito ang mga huling keyframe na tumutugma sa eksaktong parehong pangalan na na-load sa pandaigdigang saklaw. Hangga't ang lahat ng iyong mga keyframe ay magkapareho, ito ay maaaring mukhang isang maliit na isyu. Ngunit sa sandaling gusto mong i-customize ang isang animation para sa isang partikular na kaso ng paggamit, nagkakaproblema ka, o mas masahol pa, ikaw ang magdudulot sa kanila. Maaaring hindi gagana ang iyong animation dahil nag-load ang isa pang bahagi pagkatapos ng sa iyo, ang pag-overwrite sa iyong mga keyframe, o ang pag-load ng iyong bahagi ay tumagal at hindi sinasadyang nabago ang pagkilos ng animation para sa bawat iba pang bahagi gamit ang pangalan ng keyframe na iyon, at maaaring hindi mo ito napagtanto. Narito ang isang simpleng halimbawa na nagpapakita ng problema: .component-one { /* mga istilo ng sangkap */ animation: pulse 1s ease-in-out infinite alternate; }
/* hindi gagana itong @keyframes definition */ @keyframes pulse { mula kay { sukat: 1; } sa { sukat: 1.1; } }
/* mamaya sa code... */
.component-two { /* mga istilo ng sangkap */ animation: pulse 1s ease-in-out infinite; }
/* malalapat ang mga keyframe na ito sa parehong bahagi */ @keyframes pulse { 0%, 20%, 100% { sukat: 1; } 10%, 40% { sukat: 1.2; } }
Ang parehong mga bahagi ay gumagamit ng parehong pangalan ng animation, ngunit ang pangalawang kahulugan ng @keyframes ay na-overwrite ang una. Ngayon ang parehong component-one at component-two ay gagamit ng pangalawang keyframe, anuman ang tinukoy na bahagi kung aling mga keyframe. Tingnan ang Pen Keyframes Token - Demo 1 [na-forked] ni Amit Sheen. Ang pinakamasamang bahagi? Madalas itong gumagana nang perpekto sa lokal na pag-unlad ngunit mahiwagang nasisira sa produksyon kapag binago ng mga proseso ng pagbuo ang pagkakasunud-sunod ng paglo-load ng iyong mga stylesheet. Napupunta ka sa mga animation na naiiba ang kilos depende sa kung aling mga bahagi ang na-load at sa anong pagkakasunud-sunod. Ang Solusyon: Pinag-isang Keyframe Ang sagot sa kaguluhang ito ay nakakagulat na simple: paunang-natukoy na mga dynamic na keyframe na naka-imbak sa isang nakabahaging stylesheet. Sa halip na hayaan ang bawat bahagi na tukuyin ang sarili nitong mga animation, gumagawa kami ng mga sentralisadong keyframe na mahusay na dokumentado, madalinggamitin, mapanatili, at iniangkop sa mga partikular na pangangailangan ng iyong proyekto. Isipin ito bilang mga token ng keyframe. Kung paanong gumagamit tayo ng mga token para sa mga kulay at spacing, at marami na sa atin ang gumagamit ng mga token para sa mga katangian ng animation, tulad ng tagal at pagpapagaan ng mga function, bakit hindi na rin gumamit ng mga token para sa mga keyframe? Ang diskarteng ito ay maaaring natural na isama sa anumang kasalukuyang disenyo ng token workflow na ginagamit mo, habang nilulutas ang parehong maliit na problema (pagdoble ng code) at ang mas malaking problema (mga salungatan sa pandaigdigang saklaw) nang sabay-sabay. Ang ideya ay diretso: lumikha ng isang pinagmumulan ng katotohanan para sa lahat ng aming karaniwang mga animation. Ang nakabahaging stylesheet na ito ay naglalaman ng maingat na ginawang mga keyframe na sumasaklaw sa mga pattern ng animation na aktwal na ginagamit ng aming proyekto. Hindi na mahulaan kung mayroon nang fade animation sa isang lugar sa aming codebase. Wala nang aksidenteng na-overwrite ang mga animation mula sa iba pang mga bahagi. Ngunit narito ang susi: ang mga ito ay hindi lamang mga static na copy-paste na animation. Idinisenyo ang mga ito upang maging dynamic at nako-customize sa pamamagitan ng mga custom na katangian ng CSS, na nagbibigay-daan sa amin na mapanatili ang pagkakapare-pareho habang mayroon pa ring kakayahang umangkop na iakma ang mga animation sa mga partikular na kaso ng paggamit, tulad ng kung kailangan mo ng bahagyang mas malaking "pulse" na animation sa isang lugar. Pagbuo ng Unang Keyframes Token Isa sa mga unang mababang-hanging na prutas na dapat nating harapin ay ang "fade-in" na animation. Sa isa sa aking kamakailang mga proyekto, natagpuan ko ang higit sa isang dosenang magkahiwalay na mga kahulugan ng fade-in, at oo, lahat sila ay nag-animate lamang ng opacity mula 0 hanggang 1. Kaya, gumawa tayo ng bagong stylesheet, tawagan itong kf-tokens.css, i-import ito sa aming proyekto, at ilagay ang aming mga keyframe na may mga tamang komento sa loob nito. /* keyframes-tokens.css */
/* * Fade In - fade entrance animation * Paggamit: animation: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { mula kay { opacity: 0; } sa { opacity: 1; } }
Pinapalitan ng solong @keyframes na deklarasyon ang lahat ng nakakalat na fade-in na animation sa aming codebase. Malinis, simple, at naaangkop sa buong mundo. At ngayong mayroon na kaming tinukoy na token na ito, magagamit namin ito mula sa anumang bahagi sa kabuuan ng aming proyekto: .modal { animation: kf-fade-in 0.3s ease-out; }
.tooltip { animation: kf-fade-in 0.2s ease-in-out; }
.notification { animation: kf-fade-in 0.5s ease-out; }
Tingnan ang Pen Keyframes Token - Demo 2 [na-forked] ni Amit Sheen. Tandaan: Gumagamit kami ng kf- prefix sa lahat ng aming @keyframes na pangalan. Ang prefix na ito ay nagsisilbing isang namespace na pumipigil sa pagbibigay ng pangalan sa mga salungatan sa mga kasalukuyang animation sa proyekto at ginagawang malinaw kaagad na ang mga keyframe na ito ay nagmumula sa aming keyframes tokens file. Paggawa ng Dynamic na Slide Ang mga kf-fade-in na keyframe ay mahusay na gumagana dahil ito ay simple at may maliit na puwang upang guluhin ang mga bagay-bagay. Sa ibang mga animation, gayunpaman, kailangan nating maging mas dynamic, at dito natin magagamit ang napakalaking kapangyarihan ng mga custom na katangian ng CSS. Dito talaga kumikinang ang mga keyframe token kumpara sa mga nakakalat na static na animation. Gumawa tayo ng karaniwang senaryo: "slide-in" na mga animation. Ngunit mag-slide mula saan? 100px mula sa kanan? 50% mula sa kaliwa? Dapat ba itong pumasok mula sa tuktok ng screen? O baka lumutang mula sa ibaba? Napakaraming posibilidad, ngunit sa halip na lumikha ng hiwalay na mga keyframe para sa bawat direksyon at bawat variation, maaari tayong bumuo ng isang flexible na token na umaangkop sa lahat ng mga sitwasyon: /* * Slide In - direksyon na slide animation * Gamitin ang --kf-slide-from upang kontrolin ang direksyon * Default: dumudulas mula sa kaliwa (-100%) * Paggamit: * animation: kf-slide-in 0.3s ease-out; * --kf-slide-mula sa: -100px 0; // slide mula sa kaliwa * --kf-slide-mula sa: 100px 0; // slide mula sa kanan * --kf-slide-mula sa: 0 -50px; // slide mula sa itaas */
@keyframes kf-slide-in { mula kay { isalin: var(--kf-slide-from, -100% 0); } sa { isalin: 0 0; } }
Ngayon ay magagamit na natin ang solong @keyframes token na ito para sa anumang direksyon ng slide sa pamamagitan lamang ng pagbabago sa --kf-slide-from custom na property: .sidebar { animation: kf-slide-in 0.3s ease-out; /* Gumagamit ng default na halaga: mga slide mula sa kaliwa */ }
.notification { animation: kf-slide-in 0.4s ease-out; --kf-slide-mula sa: 0 -50px; /* slide mula sa itaas */ }
.modal { animation: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-mula sa: 50px 50px; /* slide mula sa ibabang kanan */ }
Ang diskarte na ito ay nagbibigay sa amin ng hindi kapani-paniwalang kakayahang umangkop habang pinapanatili ang pagkakapare-pareho. Isang deklarasyon ng keyframe, walang katapusang mga posibilidad. Tingnan ang Pen Keyframes Token - Demo 3 [na-forked] ni Amit Sheen. At kung gusto naming gawing mas flexible ang aming mga animation, na nagbibigay-daan din para sa mga "slide-out" na epekto, maaari namingmagdagdag lang ng --kf-slide-to custom property, katulad ng makikita natin sa susunod na seksyon. Bidirectional Zoom Keyframes Ang isa pang karaniwang animation na nado-duplicate sa mga proyekto ay ang "zoom" effect. Kung ito man ay isang banayad na scale-up para sa mga mensahe ng toast, isang dramatikong pag-zoom-in para sa mga modal, o isang banayad na scale-down na epekto para sa mga heading, ang mga zoom animation ay nasa lahat ng dako. Sa halip na lumikha ng hiwalay na mga keyframe para sa bawat halaga ng sukat, bumuo tayo ng isang flexible na hanay ng mga kf-zoom keyframe:
/* * Zoom - scale animation * Gamitin ang --kf-zoom-from at --kf-zoom-to upang kontrolin ang mga halaga ng sukat * Default: nag-zoom mula 80% hanggang 100% (0.8 hanggang 1) * Paggamit: * animation: kf-zoom 0.2s ease-out; * --kf-zoom-mula sa: 0.5; --kf-zoom-to: 1; // zoom mula 50% hanggang 100% * --kf-zoom-mula sa: 1; --kf-zoom-to: 0; // zoom mula 100% hanggang 0% * --kf-zoom-mula sa: 1; --kf-zoom-to: 1.1; // zoom mula 100% hanggang 110% */
@keyframes kf-zoom { mula kay { sukat: var(--kf-zoom-mula sa, 0.8); } sa { sukat: var(--kf-zoom-to, 1); } }
Sa isang kahulugan, makakamit natin ang anumang variation ng zoom na kailangan natin: .toast { animation: kf-slide-in 0.2s, kf-zoom 0.4s ease-out; --kf-slide-mula sa: 0 100%; /* slide mula sa itaas */ /* Gumagamit ng default na zoom: mga kaliskis mula 80% hanggang 100% */ }
.modal { animation: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-mula sa: 0; /* dramatic zoom mula 0% hanggang 100% */ }
.heading { animation: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-zoom-mula sa: 1.2; --kf-zoom-to: 0.8; /* banayad na pagbabawas */ }
Ang default na 0.8 (80%) ay gumagana nang perpekto para sa karamihan ng mga elemento ng UI, tulad ng mga toast na mensahe at card, habang madali pa ring i-customize para sa mga espesyal na kaso. Tingnan ang Pen Keyframes Token - Demo 4 [na-forked] ni Amit Sheen. Maaaring may napansin kang kawili-wili sa mga kamakailang halimbawa: pinagsasama-sama namin ang mga animation. Isa sa mga pangunahing bentahe ng pagtatrabaho sa mga token ng @keyframes ay ang mga ito ay idinisenyo upang maayos na pagsamahin ang isa't isa. Ang makinis na komposisyon na ito ay sinadya, hindi sinasadya. Tatalakayin namin ang komposisyon ng animation nang mas detalyado sa ibang pagkakataon, kabilang ang kung saan maaaring maging problema ang mga ito, ngunit karamihan sa mga kumbinasyon ay diretso at madaling ipatupad. Tandaan: Habang isinusulat ang artikulong ito, at marahil dahil sa pagsusulat nito, nakita kong muli kong iniisip ang buong ideya ng mga animation ng pasukan. Sa lahat ng kamakailang pag-unlad sa CSS, kailangan pa ba natin ang mga ito? Sa kabutihang palad, sinaliksik ni Adam Argyle ang parehong mga tanong at ipinahayag ang mga ito nang mahusay sa kanyang blog. Hindi ito sumasalungat sa kung ano ang nakasulat dito, ngunit nagpapakita ito ng isang diskarte na dapat isaalang-alang, lalo na kung ang iyong mga proyekto ay lubos na umaasa sa mga animation ng pasukan. Patuloy na Mga Animasyon Habang ang mga animation ng pasukan, tulad ng "fade", "slide", at "zoom" ay nangyayari nang isang beses at pagkatapos ay huminto, ang tuluy-tuloy na mga animation ay umiikot nang walang katapusan upang makatawag ng pansin o magpahiwatig ng patuloy na aktibidad. Ang dalawang pinakakaraniwang tuluy-tuloy na animation na aking nararanasan ay ang "spin" (para sa loading indicators) at "pulse" (para sa pag-highlight ng mahahalagang elemento). Ang mga animation na ito ay nagpapakita ng mga natatanging hamon pagdating sa paglikha ng mga keyframe na token. Hindi tulad ng mga entrance animation na karaniwang napupunta mula sa isang estado patungo sa isa pa, ang tuluy-tuloy na mga animation ay kailangang lubos na nako-customize sa kanilang mga pattern ng pag-uugali. Ang Spin Doctor Ang bawat proyekto ay tila gumagamit ng maramihang mga spin animation. Ang ilan ay umiikot sa clockwise, ang iba ay pakaliwa. Ang ilan ay gumagawa ng isang solong 360-degree na pag-ikot, ang iba ay gumagawa ng maraming pagliko para sa isang mas mabilis na epekto. Sa halip na gumawa ng magkakahiwalay na keyframe para sa bawat variation, bumuo tayo ng isang flexible spin na humahawak sa lahat ng mga sitwasyon:
/* * Spin - pag-ikot ng animation * Gamitin ang --kf-spin-from at --kf-spin-to upang kontrolin ang saklaw ng pag-ikot * Gamitin ang --kf-spin-turns upang kontrolin ang dami ng pag-ikot * Default: umiikot mula 0deg hanggang 360deg (1 buong pag-ikot) * Paggamit: * animation: kf-spin 1s linear infinite; * --kf-spin-turns: 2; // 2 buong pag-ikot * --kf-spin-mula sa: 0deg; --kf-spin-to: 180deg; // kalahating pag-ikot * --kf-spin-mula sa: 0deg; --kf-spin-to: -360deg; // counterclockwise */
@keyframes kf-spin { mula kay { paikutin: var(--kf-spin-from, 0deg); } sa { paikutin: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Ngayon ay maaari na tayong lumikha ng anumang spin variation na gusto natin:
.loading-spinner { animation: kf-spin 1s linear infinite; /* Gumagamit ng default: umiikot mula 0deg hanggang 360deg */ }
.fast-loader { animation: kf-spin 1.2s ease-in-out na walang katapusan na kahalili; --kf-spin-turns: 3; /* 3 buong pag-ikot para sa bawat direksyon sa bawat cycle*/ }
.steped-reverse { animation: kf-spin 1.5s steps(8) infinite; --kf-spin-to: -360deg; /* counterclockwise */ }
.subtle-wiggle { animation: kf-spin 2s ease-in-out na walang katapusan na kahalili; --kf-spin-mula sa: -16deg; --kf-spin-to: 32deg; /* kumawag-kawag 36 deg: sa pagitan ng -18deg at +18deg */ }
Tingnan ang Pen Keyframes Token - Demo 5 [na-forked] ni Amit Sheen. Ang kagandahan ng diskarteng ito ay gumagana ang parehong mga keyframe para sa paglo-load ng mga spinner, umiikot na icon, wiggle effect, at kahit na kumplikadong multi-turn animation. Ang Pulse Paradox Ang mga animation ng pulso ay mas nakakalito dahil maaari nilang "pulse" ang iba't ibang katangian. Ang ilan ay nagpi-pulso sa sukat, ang iba ay nagpi-pulso ng opacity, at ang ilang mga katangian ng kulay ng pulso tulad ng liwanag o saturation. Sa halip na gumawa ng magkakahiwalay na keyframe para sa bawat property, makakagawa kami ng mga keyframe na gumagana sa anumang CSS property. Narito ang isang halimbawa ng pulse keyframe na may mga opsyon sa sukat at opacity:
/* * Pulse - pulsing animation * Gamitin ang --kf-pulse-scale-from at --kf-pulse-scale-to upang kontrolin ang saklaw ng sukat * Gamitin ang --kf-pulse-opacity-from at --kf-pulse-opacity-to upang kontrolin ang hanay ng opacity * Default: walang pulso (lahat ng value 1) * Paggamit: * animation: kf-pulse 2s ease-in-out infinite na kahalili; * --kf-pulse-scale-mula sa: 0.95; --kf-pulse-scale-sa: 1.05; // scale pulse * --kf-pulse-opacity-mula sa: 0.7; --kf-pulse-opacity-to: 1; // opacity pulse */
@keyframes kf-pulse { mula kay { sukat: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } sa { sukat: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Lumilikha ito ng nababaluktot na pulso na maaaring magbigay-buhay sa maraming katangian: .call-to-action { animation: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-mula sa: 0.5; /* opacity pulse */ }
.notification-dot { animation: kf-pulse 0.6s ease-in-out na walang katapusan na kahalili; --kf-pulse-scale-mula sa: 0.9; --kf-pulse-scale-to: 1.1; /* scale pulse */ }
.text-highlight { animation: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-mula sa: 0.8; --kf-pulse-opacity-mula sa: 0.2; /* scale at opacity pulse */ }
Tingnan ang Pen Keyframes Token - Demo 6 [na-forked] ni Amit Sheen. Kakayanin ng solong kf-pulse keyframe na ito ang lahat mula sa banayad na pag-agaw ng atensyon hanggang sa mga dramatikong highlight, lahat habang madaling i-customize. Advanced Easing Ang isa sa mga magagandang bagay tungkol sa paggamit ng mga keyframe token ay kung gaano kadali palawakin ang aming library ng animation at magbigay ng mga epekto na hindi abalahin ng karamihan sa mga developer na magsulat mula sa simula, tulad ng elastic o bounce. Narito ang isang halimbawa ng isang simpleng "bounce" keyframes token na gumagamit ng --kf-bounce-from custom na property upang kontrolin ang taas ng jump. /* * Bounce - tumatalbog na entrance animation * Gamitin ang --kf-bounce-from para kontrolin ang taas ng pagtalon * Default: tumalon mula sa 100vh (off screen) * Paggamit: * animation: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // tumalon mula sa taas na 200px */
@keyframes kf-bounce { 0% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { isalin: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { isalin: 0 0; animation-timing-function: ease-out; } }
Ang mga animation tulad ng "elastic" ay medyo nakakalito dahil sa mga kalkulasyon sa loob ng mga keyframe. Kailangan nating tukuyin ang --kf-elastic-from-X at --kf-elastic-from-Y nang hiwalay (parehong opsyonal), at sabay-sabay nilang hinahayaan kaming lumikha ng elastic na pasukan mula sa anumang punto sa screen.
/* * Elastic In - nababanat na entrance animation * Gamitin ang --kf-elastic-from-X at --kf-elastic-from-Y para kontrolin ang panimulang posisyon * Default: pumapasok mula sa itaas na gitna (0, -100vh) * Paggamit: * animation: kf-elastic-in 2s ease-in-out pareho; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // pumasok mula sa (-50px, -200px) */
@keyframes kf-elastic-in { 0% { isalin: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { isalin: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { isalin: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { isalin: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { isalin: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { isalin: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { isalin: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { isalin: 0 0; } }
Pinapadali ng diskarteng ito ang muling paggamit at pag-customize ng mga advanced na keyframe sa aming proyekto, sa pamamagitan lamang ng pagbabago ng isang custom na property.
.bounce-and-zoom { animation: kf-bounce 3s ease-in, kf-zoom 3s linear; --kf-zoom-mula sa: 0; }
.bounce-and-slide { animation-composition: magdagdag; /* Ang parehong mga animation ay gumagamit ng pagsasalin */ animation: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-mula sa: -200px; }
.elastic-in { animation: kf-elastic-in 2s ease-in-out pareho; }
Tingnan ang Pen Keyframes Token - Demo 7 [na-forked] ni Amit Sheen. Hanggang sa puntong ito, nakita namin kung paano namin mapagsasama-sama ang mga keyframe sa matalino at mahusay na paraan. Siyempre, maaaring gusto mong i-tweak ang mga bagay upang mas umangkop sa mga pangangailangan ng iyong proyekto, ngunit sinaklaw namin ang mga halimbawa ng ilang karaniwang mga animation at pang-araw-araw na mga kaso ng paggamit. At kasama ang mga keyframe na token na ito, mayroon na kaming makapangyarihang mga bloke para sa paglikha ng pare-pareho, napapanatiling mga animation sa buong proyekto. Wala nang mga dobleng keyframe, wala nang mga salungatan sa pandaigdigang saklaw. Isang malinis at maginhawang paraan lamang upang mahawakan ang lahat ng aming pangangailangan sa animation. Ngunit ang totoong tanong ay: Paano natin binubuo ang mga bloke ng gusali na ito nang magkasama? Pinagsasama-sama ang Lahat Nakita namin na ang pagsasama-sama ng mga pangunahing keyframe token ay simple. Hindi namin kailangan ng anumang espesyal ngunit upang tukuyin ang unang animation, tukuyin ang pangalawa, itakda ang mga variable kung kinakailangan, at iyon na. /* Fade in + slide in */ .toast { animation: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-mula sa: 0 40px; }
/* Mag-zoom in + fade in */ .modal { animation: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-mula sa: 0.7; --kf-zoom-to: 1; }
/* Slide in + pulse */ .notification { animation: kf-slide-in 0.5s, kf-pulse 1.2s ease-in-out na walang katapusan na kahalili; --kf-slide-mula sa: -100px 0; --kf-pulse-scale-mula sa: 0.95; --kf-pulse-scale-sa: 1.05; }
Ang mga kumbinasyong ito ay gumagana nang maganda dahil ang bawat animation ay nagta-target ng ibang property: opacity, transform (translate/scale), atbp. Ngunit minsan may mga salungatan, at kailangan nating malaman kung bakit at paano haharapin ang mga ito. Kapag sinubukan ng dalawang animation na i-animate ang parehong property — halimbawa, parehong animating scale o parehong animating opacity — ang resulta ay hindi ang inaasahan mo. Bilang default, isa lang sa mga animation ang aktwal na inilalapat sa property na iyon, na siyang huli sa listahan ng animation. Ito ay isang limitasyon kung paano pinangangasiwaan ng CSS ang maraming animation sa parehong property. Halimbawa, hindi ito gagana ayon sa nilalayon dahil ang kf-pulse animation lang ang ilalapat. .bad-combo { animation: kf-zoom 0.5s pasulong, kf-pulse 1.2s infinite alternate; --kf-zoom-mula sa: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-mula sa: 0.8; --kf-pulse-scale-to: 1.1; }
Pagdaragdag ng Animasyon Ang pinakasimple at pinakadirektang paraan upang pangasiwaan ang maraming animation na nakakaapekto sa parehong property ay ang paggamit ng animation-composition property. Sa huling halimbawa sa itaas, pinapalitan ng kf-pulse animation ang kf-zoom animation, kaya hindi namin makikita ang paunang zoom at hindi makukuha ang inaasahang sukat sa 1.2. Sa pamamagitan ng pagtatakda ng animation-composition upang idagdag, sinasabi namin sa browser na pagsamahin ang parehong mga animation. Nagbibigay ito sa amin ng resulta na gusto namin. .component-two { animation-composition: magdagdag; }
Tingnan ang Pen Keyframes Token - Demo 8 [na-forked] ni Amit Sheen. Ang diskarte na ito ay mahusay na gumagana para sa karamihan ng mga kaso kung saan gusto naming pagsamahin ang mga epekto sa parehong property. Kapaki-pakinabang din ito kapag kailangan nating pagsamahin ang mga animation sa mga static na value ng property. Halimbawa, kung mayroon kaming isang elemento na gumagamit ng pag-aari ng pagsasalin upang iposisyon ito nang eksakto kung saan namin gusto, at pagkatapos ay gusto naming i-animate ito gamit ang mga kf-slide-in na keyframe, nakakakuha kami ng isang hindi magandang nakikitang pagtalon nang walang animation-composition. Tingnan ang Pen Keyframes Token - Demo 9 [na-forked] ni Amit Sheen. Sa animation-composition na nakatakdang idagdag, ang animation ay maayos na pinagsama sa umiiral natransform, kaya ang elemento ay mananatili sa lugar at nagbibigay-buhay gaya ng inaasahan. Animation Stagger Ang isa pang paraan ng paghawak ng maraming animation ay ang "pagsuray-suray" sa kanila — ibig sabihin, simulan ang pangalawang animation nang bahagya pagkatapos ng una. Ito ay hindi isang solusyon na gumagana para sa bawat kaso, ngunit ito ay kapaki-pakinabang kapag mayroon kaming isang entrance animation na sinusundan ng isang tuloy-tuloy na animation. /* fade in + opacity pulse */ .notification { animation: kf-fade-in 2s ease-out, kf-pulse 0.5s 2s ease-in-out na walang katapusan na kahalili; --kf-pulse-opacity-to: 0.5; }
Tingnan ang Pen Keyframes Token - Demo 10 [na-forked] ni Amit Sheen. Mahalaga ang Order Ang malaking bahagi ng mga animation na pinagtatrabahuhan namin ay gumagamit ng transform property. Sa karamihan ng mga kaso, ito ay mas maginhawa. Mayroon din itong kalamangan sa pagganap dahil ang mga transform animation ay maaaring mapabilis ng GPU. Ngunit kung gagamit tayo ng mga pagbabago, kailangan nating tanggapin na mahalaga ang pagkakasunud-sunod ng ating mga pagbabago. marami. Sa aming mga keyframe sa ngayon, gumamit kami ng mga indibidwal na pagbabago. Ayon sa mga spec, ang mga ito ay palaging inilalapat sa isang nakapirming pagkakasunud-sunod: una, ang elemento ay makakakuha ng pagsasalin, pagkatapos ay paikutin, pagkatapos ay i-scale. Makatuwiran ito at ito ang inaasahan ng karamihan sa atin. Gayunpaman, kung gagamitin natin ang transform property, ang pagkakasunud-sunod kung saan isinulat ang mga function ay ang pagkakasunud-sunod kung saan inilalapat ang mga ito. Sa kasong ito, kung ililipat natin ang isang bagay na 100 pixels sa X-axis at pagkatapos ay paikutin ito ng 45 degrees, hindi ito katulad ng unang pag-ikot nito ng 45 degrees at pagkatapos ay ililipat ito ng 100 pixels. /* Pink square: Isalin muna, pagkatapos ay i-rotate */ .example-one { transform: translateX(100px) rotate(45deg); }
/* Green square: I-rotate muna, pagkatapos ay i-translate */ .example-two { transform: rotate(45deg) translateX(100px); }
Tingnan ang Pen Keyframes Token - Demo 11 [na-forked] ni Amit Sheen. Ngunit ayon sa pagkakasunud-sunod ng pagbabago, lahat ng indibidwal na pagbabago — lahat ng ginamit namin para sa mga token ng keyframe — ay nangyayari bago ang mga function ng pagbabago. Ibig sabihin, ang anumang itinakda mo sa transform property ay mangyayari pagkatapos ng mga animation. Ngunit kung itinakda mo, halimbawa, ang pagsasalin kasama ang mga kf-spin keyframe, ang pagsasalin ay mangyayari bago ang animation. Nalilito pa?! Ito ay humahantong sa mga sitwasyon kung saan ang mga static na halaga ay maaaring magdulot ng magkakaibang mga resulta para sa parehong animation, tulad ng sa sumusunod na kaso:
/* Karaniwang animation para sa parehong mga spinner */ .spinner { animation: kf-spin 1s linear infinite; }
/* Pink spinner: isalin bago paikutin (indibidwal na pagbabago) */ .spinner-pink { isalin: 100% 50%; }
/* Green spinner: paikutin pagkatapos ay isalin (function order) */ .spinner-green { ibahin ang anyo: isalin(100%, 50%); }
Tingnan ang Pen Keyframes Token - Demo 12 [na-forked] ni Amit Sheen. Makikita mo na ang unang spinner (pink) ay nakakakuha ng translate na nangyayari bago ang pag-ikot ng kf-spin, kaya lumipat muna ito sa lugar nito at pagkatapos ay umiikot. Ang pangalawang spinner (berde) ay nakakakuha ng translate() function na nangyayari pagkatapos ng indibidwal na pagbabago, kaya umiikot muna ang elemento, pagkatapos ay gumagalaw ayon sa kasalukuyang anggulo nito, at nakuha namin ang malawak na orbit na epekto. Hindi, hindi ito isang bug. Isa lamang ito sa mga bagay na kailangan nating malaman tungkol sa CSS at tandaan kapag nagtatrabaho sa maraming animation o maraming pagbabago. Kung kinakailangan, maaari ka ring gumawa ng karagdagang hanay ng mga kf-spin-alt keyframe na nagpapaikot ng mga elemento gamit ang rotate() function. Nabawasang Paggalaw At habang pinag-uusapan natin ang mga alternatibong keyframe, hindi natin maaaring balewalain ang opsyong "walang animation". Isa sa mga pinakamalaking bentahe ng paggamit ng mga keyframe token ay ang pagiging naa-access ay maaaring i-bake in, at ito ay talagang napakadaling gawin. Sa pamamagitan ng pagdidisenyo ng aming mga keyframe na nasa isip ang pagiging naa-access, matitiyak namin na ang mga user na mas gusto ang pinababang paggalaw ay makakakuha ng mas maayos, hindi gaanong nakakagambalang karanasan, nang walang karagdagang trabaho o pagdoble ng code. Ang eksaktong kahulugan ng "Reduced Motion" ay maaaring magbago nang kaunti mula sa isang animation patungo sa isa pa, at mula sa proyekto hanggang sa proyekto, ngunit narito ang ilang mahahalagang punto na dapat tandaan: Pag-mute ng mga Keyframe Habang ang ilang mga animation ay maaaring pinalambot o pinabagal, may iba pa na dapat na ganap na mawala kapag hiniling ang pinababang paggalaw. Ang mga animation ng pulso ay isang magandang halimbawa. Upang matiyak na ang mga animation na ito ay hindi tatakbo sa reduced motion mode, maaari lang naming ibalot ang mga ito sa naaangkop na media query.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { mula kay { sukat: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } sa { sukat: var(--kf-pulse-scale-to, 1); opacity:var(--kf-pulse-opacity-to, 1); } } }
Tinitiyak nito na ang mga user na nagtakda ng prefers-reduced-motion na bawasan ay hindi makikita ang animation at makakakuha ng karanasang tumutugma sa kanilang kagustuhan. Instant In Mayroong ilang mga keyframe na hindi natin basta-basta maaalis, gaya ng mga animation sa pasukan. Ang halaga ay dapat magbago, dapat mag-animate; kung hindi, ang elemento ay hindi magkakaroon ng mga tamang halaga. Ngunit sa pinababang paggalaw, ang paglipat na ito mula sa paunang halaga ay dapat na instant. Upang makamit ito, tutukuyin namin ang isang karagdagang hanay ng mga keyframe kung saan tumalon kaagad ang halaga sa katayuan ng pagtatapos. Nagiging default na mga keyframe ang mga ito. Pagkatapos, idaragdag namin ang mga regular na keyframe sa loob ng isang query sa media para sa prefers-reduced-motion na nakatakda sa no-preference, tulad ng sa nakaraang halimbawa. /* pop in agad para sa pinababang galaw */ @keyframes kf-zoom { mula sa, hanggang { sukat: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Mga orihinal na zoom keyframe */ @keyframes kf-zoom { mula kay { sukat: var(--kf-zoom-mula sa, 0.8); } sa { sukat: var(--kf-zoom-to, 1); } } }
Sa ganitong paraan, makikita ng mga user na mas gusto ang pinababang galaw na lalabas kaagad ang elemento sa huling katayuan nito, habang ang iba ay nakakakuha ng animated na paglipat. Ang Malambot na Diskarte May mga kaso kung saan gusto nating panatilihin ang ilang paggalaw, ngunit mas malambot at mas kalmado kaysa sa orihinal na animation. Halimbawa, maaari naming palitan ang bounce entrance ng banayad na fade-in.
@keyframes kf-bounce { /* Soft fade-in para sa pinababang paggalaw */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Mga orihinal na bounce keyframe */ } }
Ngayon, ang mga user na may reduced motion na pinagana ay nakakakuha pa rin ng pakiramdam ng hitsura, ngunit walang matinding paggalaw ng bounce o elastic na animation. Sa pagkakaroon ng mga bloke ng gusali, ang susunod na tanong ay kung paano gawin ang mga ito na bahagi ng aktwal na daloy ng trabaho. Ang pagsusulat ng mga flexible na keyframe ay isang bagay, ngunit ang paggawa ng mga ito na maaasahan sa isang malaking proyekto ay nangangailangan ng ilang mga diskarte na kailangan kong matutunan sa mahirap na paraan. Mga Istratehiya sa Pagpapatupad at Pinakamahuhusay na Kasanayan Kapag mayroon na tayong solidong library ng mga keyframe token, ang tunay na hamon ay kung paano dalhin ang mga ito sa pang-araw-araw na gawain.
Ang tukso ay ihulog ang lahat ng mga keyframe nang sabay-sabay at ideklarang nalutas na ang problema, ngunit sa pagsasagawa nalaman ko na ang pinakamahusay na mga resulta ay nagmumula sa unti-unting pag-aampon. Magsimula sa mga pinakakaraniwang animation, tulad ng fade o slide. Ito ay mga madaling panalo na nagpapakita ng agarang halaga nang hindi nangangailangan ng malalaking muling pagsulat. Ang pagbibigay ng pangalan ay isa pang punto na nararapat pansinin. Ang isang pare-parehong prefix o namespace ay ginagawang malinaw kung aling mga animation ang mga token at kung alin ang mga lokal na one-off. Pinipigilan din nito ang mga aksidenteng banggaan at tinutulungan ang mga bagong miyembro ng koponan na makilala ang nakabahaging sistema sa isang sulyap. Ang dokumentasyon ay kasinghalaga ng code mismo. Kahit na ang isang maikling komento sa itaas ng bawat keyframe token ay makakapagtipid ng mga oras ng paghula sa ibang pagkakataon. Ang isang developer ay dapat na mabuksan ang mga token file, mag-scan para sa epekto na kailangan nila, at kopyahin ang pattern ng paggamit nang diretso sa kanilang bahagi. Ang kakayahang umangkop ang dahilan kung bakit ang diskarte na ito ay nagkakahalaga ng pagsisikap. Sa pamamagitan ng paglalantad ng mga mahuhusay na custom na katangian, binibigyan namin ang mga koponan ng puwang upang iakma ang animation nang hindi sinisira ang system. Kasabay nito, subukang huwag mag-overcomplicate. Ibigay ang mga knobs na mahalaga at panatilihin ang iba pang opinyon. Panghuli, tandaan ang pagiging naa-access. Hindi lahat ng animation ay nangangailangan ng alternatibong pinababang paggalaw, ngunit marami ang nangangailangan. Ang pag-bake sa mga pagsasaayos na ito nang maaga ay nangangahulugan na hindi na namin kailangang i-retrofit ang mga ito sa ibang pagkakataon, at nagpapakita ito ng antas ng pangangalaga na mapapansin ng aming mga user kahit na hindi nila ito binanggit.
Sa aking karanasan, ang pagtrato sa mga token ng keyframe bilang bahagi ng aming daloy ng trabaho ng mga token ng disenyo ang dahilan kung bakit nananatili ang mga ito. Kapag nasa lugar na sila, huminto sila sa pakiramdam na parang mga espesyal na epekto at naging bahagi ng wika ng disenyo, isang natural na extension ng kung paano gumagalaw at tumutugon ang produkto. Pagbabalot Ang mga animation ay maaaring maging isa sa pinakamasayang bahagi ng pagbuo ng mga interface, ngunit kung walang istraktura, maaari rin silang maging isa sa mga pinakamalaking pinagmumulan ng pagkabigo. Sa pamamagitan ng pagtrato sa mga keyframe bilang mga token, kinukuha mo ang isang bagay na kadalasang magulo at mahirap pangasiwaan at gagawin itong malinaw at mahuhulaan na sistema. Ang tunay na halaga ay hindi lamang sa pag-save ng ilang linya ng code. Nasa kumpiyansa na kapag gumamit ka ng fade, slide, zoom, o spin, alam mo nang eksakto kung paano ito kikilos sa buong proyekto. Ito ay nasa flexibility na nagmumula sa mga custom na pag-aari nang walang kaguluhan ng walang katapusang mga pagkakaiba-iba. At ito ay nasa accessibility na binuo sa pundasyon sa halip na idinagdag bilangisang nahuling pag-iisip. Nakita kong gumagana ang mga ideyang ito sa iba't ibang team at magkakaibang codebase, at palaging pareho ang pattern. Kapag ang mga token ay nasa lugar na, ang mga keyframe ay hihinto sa pagiging isang nakakalat na koleksyon ng mga trick at magiging bahagi ng wika ng disenyo. Pinaparamdam nila ang produkto na mas sinadya, mas pare-pareho, at mas buhay. Kung kukuha ka ng isang bagay mula sa artikulong ito, hayaan ito: ang mga animation ay nararapat sa parehong pangangalaga at istraktura na ibinibigay na namin sa mga kulay, palalimbagan, at espasyo. Ang isang maliit na pamumuhunan sa mga token ng keyframe ay nagbabayad sa tuwing gumagalaw ang iyong interface.
