Tangoganizirani izi: mwalowa nawo pulojekiti yatsopano, kulowa mu codebase, ndipo mkati mwa maola angapo oyambirira, mudzapeza chinachake chokhumudwitsa. Mumwazikana pamasitayilo, mumapeza matanthauzidwe angapo a @keyframes pamakanema oyambira omwewo. Zotsatira zitatu zosiyana zozimitsira, mitundu iwiri kapena itatu ya masiladi, makanema ojambula pamanja ochepa, komanso makanema ojambula osachepera awiri osiyana chifukwa, bwanji osatero? @keyframes kugunda { kuchokera ku { sikelo: 1; } ku { sikelo: 1.1; } }
@keyframes kugunda kwakukulu { 0%, 20%, 100% { sikelo: 1; } 10%, 40% { sikelo: 1.2; } }
Ngati izi zikumveka ngati zodziwika bwino, simuli nokha. Mwachidziwitso changa m'mapulojekiti osiyanasiyana, chimodzi mwazopambana zofulumira zomwe ndimatha kupereka ndikuphatikiza ndikusintha ma keyframes. Zakhala chitsanzo chodalirika kotero kuti tsopano ndikuyembekezera kuyeretsa uku ngati imodzi mwa ntchito zanga zoyamba pa codebase yatsopano. The Logic Behind The Chaos Kubwerezabwereza uku kumamveka bwino mukaganizira za izi. Tonse timagwiritsa ntchito makanema ojambula pawokha pa ntchito zathu zatsiku ndi tsiku: zozilala, ma slide, makulitsidwe, ma spins, ndi zina zomwe zimachitika nthawi zambiri. Makanema awa ndiwowongoka bwino, ndipo ndikosavuta kumasulira mwachangu @keyframes kuti ntchitoyo ithe. Popanda makina opanga makanema apakatikati, opanga mwachibadwa amalemba mafungulowa kuyambira pachiyambi, osadziwa kuti makanema ojambula ofananawo alipo kale kwina mu codebase. Izi ndizofala makamaka pogwira ntchito zomanga zotengera zigawo (zomwe ambiri aife timachita masiku ano), popeza magulu nthawi zambiri amagwira ntchito limodzi m'magawo osiyanasiyana a pulogalamuyo. Chotsatira? Makanema chipwirikiti. Vuto Laling'ono Nkhani zodziwikiratu ndi kubwereza kwa keyframes ndikuwononga nthawi yachitukuko komanso kubisala kosayenera. Matanthauzidwe angapo a keyframe amatanthauza malo angapo oti asinthe pakafunika kusintha. Mukufuna kusintha nthawi ya makanema ojambula pazithunzi zanu? Muyenera kusaka nthawi iliyonse pa codebase yanu. Mukufuna kulinganiza ntchito zochepetsera? Zabwino zonse kupeza zosiyanasiyana. Kuchulukitsa kwa malo okonzerako kumapangitsa kuti makanema ojambula pawongoleredwe asinthe ntchito yomwe imatenga nthawi. Vuto Lokulirapo Kubwereza kwa makiyi achinsinsiku kumabweretsa vuto lobisika kwambiri: msampha wapadziko lonse lapansi. Ngakhale pogwira ntchito ndi zomangamanga zokhazikitsidwa ndi zigawo, ma keyframe a CSS nthawi zonse amafotokozedwa padziko lonse lapansi. Izi zikutanthauza kuti ma keyframes onse amagwira ntchito pazigawo zonse. Nthawizonse. Inde, makanema ojambula anu sagwiritsa ntchito makiyi omwe mwawafotokozera muchigawo chanu. Imagwiritsa ntchito makiyi omaliza omwe amafanana ndi dzina lomwelo lomwe adakwezedwa padziko lonse lapansi. Malingana ngati makiyi anu onse ali ofanana, izi zitha kuwoneka ngati zazing'ono. Koma mukangofuna kusintha makanema kuti agwiritse ntchito mwanjira inayake, muli pamavuto, kapena choyipitsitsa, ndi omwe mukuwayambitsa. Mwina makanema ojambula anu sangagwire ntchito chifukwa chigawo china chokwezedwa pambuyo panu, kulembanso makiyi anu, kapena chigawo chanu chimatha ndipo mwangozi chimasintha machitidwe a makanema ojambula pagawo lina lililonse pogwiritsa ntchito dzina la keyframe, ndipo mwina simungazindikire. Nachi chitsanzo chosavuta chomwe chikuwonetsa vutoli: .chigawo chimodzi { /* chigawo masitaelo */ makanema ojambula: kugunda kwa 1s kumasuka-mkati-kunja kopanda malire; }
/* tanthauzo ili la @keyframes siligwira ntchito */ @keyframes kugunda { kuchokera ku { sikelo: 1; } ku { sikelo: 1.1; } }
/* kenako mu code... */
.gawo lachiwiri { /* chigawo masitaelo */ makanema ojambula: kugunda kwa 1s kumasuka-kunja kosatha; }
/* makiyi achinsinsiwa adzagwira ntchito pazigawo zonse ziwiri */ @keyframes kugunda { 0%, 20%, 100% { sikelo: 1; } 10%, 40% { sikelo: 1.2; } }
Magawo onsewa amagwiritsa ntchito dzina lofananira, koma tanthauzo lachiwiri @keyframes limalemba loyamba. Tsopano onse chigawo chimodzi ndi chigawo chimodzi-awiri adzagwiritsa ntchito keyframes yachiwiri, mosasamala kanthu kuti ndi gawo liti lomwe limafotokoza ma keyframes. Onani Zizindikiro za Pen Keyframes - Demo 1 [yopangidwa ndi Amit Sheen. Mbali yoyipa kwambiri? Izi nthawi zambiri zimagwira ntchito bwino pakutukuka kwanuko koma zimasokonekera pakupanga pomwe njira zomangira zikusintha dongosolo lotsitsa lamasamba anu. Mutha kukhala ndi makanema ojambula omwe amachita mosiyana kutengera zigawo zomwe zakwezedwa komanso motsatana. Yankho: Ogwirizana Keyframes Yankho la chipwirikiti ichi ndi losavuta modabwitsa: mafungulo achinsinsi omwe amafotokozedwatu omwe amasungidwa mumasamba ogawana nawo. M'malo molola kuti gawo lililonse lifotokoze makanema ake, timapanga ma keyframes apakati omwe ali olembedwa bwino, osavutakugwiritsa ntchito, kusamalidwa, ndi kukonzedwa molingana ndi zosowa za polojekiti yanu. Ganizirani za izo ngati zizindikiro za keyframes. Monga momwe timagwiritsira ntchito ma tokeni amitundu ndi masitayilo, ndipo ambiri aife timagwiritsa ntchito kale ma tokeni pazinthu zamakanema, monga kutalika kwa nthawi ndi ntchito zochepetsera, bwanji osagwiritsanso ntchito ma tokeni a ma keyframes? Njirayi imatha kuphatikizira mwachilengedwe ndi mawonekedwe aliwonse amakono omwe mukugwiritsa ntchito, ndikuthetsa vuto laling'ono (kubwereza khodi) ndi vuto lalikulu (kusamvana kwapadziko lonse lapansi) nthawi imodzi. Lingaliro ndi lolunjika: pangani gwero limodzi la chowonadi pa makanema athu onse omwe timafanana. Dongosolo logawana ili lili ndi mafungulo opangidwa mosamala omwe amaphimba makanema ojambula pama projekiti athu. Osangoganiziranso ngati makanema ojambula alipo kale kwinakwake mu codebase yathu. Osalembanso mwangozi makanema ojambula kuchokera kuzinthu zina. Koma nayi mfungulo: awa sikuti amangokhala makanema ojambula pamanja. Amapangidwa kuti azikhala osunthika komanso osinthika kudzera muzokonda za CSS, zomwe zimatilola kukhala osasinthasintha pomwe tili ndi kuthekera kosinthira makanema ojambula kuti agwirizane ndi zochitika zinazake, monga ngati mukufuna makanema okulirapo pang'ono a "pulse" pamalo amodzi. Kupanga Chizindikiro Choyamba cha Keyframes Chimodzi mwa zipatso zoyamba zolendewera zomwe tiyenera kuthana nazo ndi makanema ojambula "fade-in". Mu imodzi mwamapulojekiti anga aposachedwa, ndidapeza matanthauzidwe opitilira khumi ndi awiri osiyana, ndipo inde, onse adangowonetsa kuwala kuchokera ku 0 mpaka 1. Chifukwa chake, tiyeni tipange pepala latsopano, titchule kf-tokens.css, lowetsani mu projekiti yathu, ndikuyika makiyi athu okhala ndi ndemanga zoyenera mkati mwake. /* keyframes-tokens.css */
/* * Fade In - zimitsani makanema ojambula olowera * Kugwiritsa ntchito: makanema ojambula: kf-fade-in 0.3s kumasuka; */ @keyframes kf-fade-in { kuchokera ku { kuwala: 0; } ku { kuwala: 1; } }
Chilengezo ichi cha @keyframes chimalowa m'malo mwa makanema onse amwazikana mu codebase yathu. Zoyera, zosavuta, komanso zothandiza padziko lonse lapansi. Ndipo tsopano popeza tafotokozera chizindikirochi, titha kuchigwiritsa ntchito kuchokera pagawo lililonse la polojekiti yathu: .modali { makanema ojambula: kf-fade-mu 0.3s kumasuka; }
.tip { makanema ojambula: kf-fade-mu 0.2s kumasuka-kutuluka; }
.chidziwitso { makanema ojambula: kf-fade-mu 0.5s kumasuka; }
Onani Zizindikiro za Pen Keyframes - Demo 2 [yopangidwa ndi Amit Sheen. Chidziwitso: Tikugwiritsa ntchito kf- m'mayina athu onse @keyframes. Chiyambi ichi chimagwira ntchito ngati malo omwe amalepheretsa kutchula mikangano ndi makanema omwe alipo mu pulojekitiyi ndipo akuwonetseratu nthawi yomweyo kuti ma keyframes awa amachokera ku fayilo yathu ya ma keyframes. Kupanga A Dynamic Slide Ma keyframes a kf-fade-in amagwira ntchito bwino chifukwa ndi osavuta ndipo pali malo ochepa oti asokoneze zinthu. M'makanema ena, komabe, tifunika kukhala amphamvu kwambiri, ndipo apa titha kukulitsa mphamvu yayikulu yazinthu za CSS. Apa ndipamene ma keyframes tokeni amawala kwenikweni poyerekeza ndi makanema amwazikana osasunthika. Tiyeni titengere zochitika wamba: makanema ojambula "slide-in". Koma lowetsani kuchokera kuti? 100px kuchokera kumanja? 50% kuchokera kumanzere? Kodi iyenera kulowa kuchokera pamwamba pazenera? Kapena kuyandama kuchokera pansi? Kuthekera kochuluka, koma m'malo mopanga makiyi achinsinsi kumbali iliyonse ndikusintha kulikonse, titha kupanga chizindikiro chimodzi chosinthika chomwe chimagwirizana ndi zochitika zonse: /* * Slide In - makanema ojambula owongolera * Gwiritsani ntchito --kf-slide-kuchokera kuti muwongolere mayendedwe * Zosasintha: slide kuchokera kumanzere (-100%) * Kugwiritsa: * makanema ojambula: kf-slide-mu 0.3s kumasuka; * --kf-slide-kuchokera: -100px 0; // slide kuchokera kumanzere * --kf-slide-kuchokera: 100px 0; // yenda kuchokera kumanja * --kf-slide-kuchokera: 0 -50px; // slide kuchokera pamwamba */
@keyframes kf-slide-mu { kuchokera ku { kumasulira: var(--kf-slide-from, -100% 0); } ku { kumasulira: 0 0; } }
Tsopano titha kugwiritsa ntchito chizindikiro ichi cha @keyframes panjira iliyonse posintha --kf-slide-kuchokera pachikhalidwe: .mbali { makanema ojambula: kf-slide-mu 0.3s kumasuka; /* Imagwiritsa ntchito mtengo wokhazikika: zithunzi kuchokera kumanzere */ }
.chidziwitso { makanema ojambula: kf-slide-mu 0.4s kumasuka; --kf-slide-kuchokera: 0 -50px; /* slide kuchokera pamwamba */ }
.modali { makanema: kf-fade-mu 0.5s, kf-slide-mu 0.5s kiyubiki-bezier(0.34, 1.56, 0.64, 1); --kf-slide-kuchokera: 50px 50px; /* slide kuchokera pansi-kumanja */ }
Njirayi imatipatsa kusinthasintha kodabwitsa ndikusunga kusasinthika. Kulengeza kwa keyframe imodzi, zotheka zopanda malire. Onani Zizindikiro za Pen Keyframes - Demo 3 [yopangidwa ndi Amit Sheen. Ndipo ngati tikufuna kupanga makanema athu kukhala osinthika, kulola kuti "slide-out" nawonso awoneke, tithaingowonjezerani --kf-slide-ku katundu wamba, zofanana ndi zomwe tiwona mu gawo lotsatira. Bidirectional Zoom Keyframes Makanema ena odziwika omwe amabwerezedwa pama projekiti onse ndi "zoom" zotsatira. Kaya ndikusintha kwachinsinsi kwa mauthenga a toast, kuwonera mochititsa chidwi kwa ma modals, kapena kutsika pang'ono kwa mitu, makanema ojambula pamanja ali paliponse. M'malo mopanga makiyi achinsinsi pamtengo uliwonse, tiyeni tipange seti imodzi yosinthika ya kf-zoom keyframes:
/* * Zoom - makanema ojambula pamlingo * Gwiritsani ntchito --kf-zoom-fr ndi --kf-zoom-to kuwongolera masikelo * Zosasintha: zoom kuchokera 80% mpaka 100% (0.8 mpaka 1) * Kugwiritsa: * makanema ojambula: kf-zoom 0.2s kumasuka; * --kf-zoom-kuchokera: 0.5; --kf-kulitsa-ku: 1; // Onetsani kuchokera 50% mpaka 100% * --kf-kulitsa-kuchokera: 1; --kf-kulitsa-ku: 0; // makulitsidwe kuchokera 100% mpaka 0% * --kf-kulitsa-kuchokera: 1; --kf-kulitsa-ku: 1.1; // kuwona kuchokera 100% mpaka 110% */
@keyframes kf-zoom { kuchokera ku { sikelo: var(--kf-zoom-kuchokera, 0.8); } ku { sikelo: var(--kf-zoom-to, 1); } }
Ndi tanthauzo limodzi, titha kukwaniritsa kusiyanasiyana kulikonse komwe tingafune: .chakudya { makanema: kf-slide-mu 0.2s, kf-zoom 0.4s kumasuka; --kf-slide-kuchokera: 0 100%; /* slide kuchokera pamwamba */ /* Imagwiritsa ntchito makulitsidwe osasintha: masikelo kuyambira 80% mpaka 100% */ }
.modali { makanema ojambula: kf-zoom 0.3s kiyubiki-bezier(0.34, 1.56, 0.64, 1); --kf-kulitsa-kuchokera: 0; /* makulitsidwe mochititsa chidwi kuchokera 0% mpaka 100% */ }
.mutu { makanema: kf-fade-mu 2s, kf-zoom 2s mosavuta; --kf-kulitsa-kuchokera: 1.2; --kf-kulitsa-ku: 0.8; /* chepetsa pang'ono */ }
Zosasintha za 0.8 (80%) zimagwira ntchito bwino pazinthu zambiri za UI, monga mauthenga otsekemera ndi makadi, pomwe zimakhala zosavuta kusintha zochitika zapadera. Onani Zizindikiro za Pen Keyframes - Demo 4 [yopangidwa ndi Amit Sheen. Mwina mwawonapo chosangalatsa m'zitsanzo zaposachedwa: takhala tikuphatikiza makanema ojambula pamanja. Chimodzi mwazabwino zazikulu zogwirira ntchito ndi @keyframes tokeni ndikuti adapangidwa kuti aziphatikizana mosagwirizana. Kapangidwe kosalala kameneka n’kwadala, osati mwangozi. Tidzakambirana mwatsatanetsatane za makanema ojambula pambuyo pake, kuphatikiza pomwe atha kukhala ovuta, koma kuphatikiza zambiri kumakhala kosavuta komanso kosavuta kukhazikitsa. Chidziwitso: Ndikulemba nkhaniyi, ndipo mwina chifukwa choyilemba, ndidapeza ndikuganiziranso lingaliro lonse la makanema ojambula panjira. Ndi kupita patsogolo kwaposachedwa mu CSS, kodi tikuzifunabe? Mwamwayi, Adam Argyle adafufuzanso mafunso omwewo ndikuwafotokozera momveka bwino mubulogu yake. Izi sizikutsutsana ndi zomwe zalembedwa apa, koma zimapereka njira yoyenera kuiganizira, makamaka ngati mapulojekiti anu amadalira kwambiri makanema olowera. Makanema Osalekeza Ngakhale makanema ojambula polowera, monga "zimiririka", "slide", ndi "kuwonera" zimachitika kamodzi kenaka kuyimitsa, makanema ojambula mosalekeza amazungulira nthawi zonse kuti akope chidwi kapena kuwonetsa zomwe zikuchitika. Makanema awiri opitilira muyeso omwe ndimakumana nawo ndi "spin" (pazowonetsa) ndi "pulse" (powunikira zinthu zofunika). Makanema awa amapereka zovuta zapadera zikafika pakupanga ma keyframe tokeni. Mosiyana ndi makanema apakhomo omwe nthawi zambiri amachoka kudera lina kupita ku lina, makanema ojambula mosalekeza amayenera kusinthidwa makonda pamachitidwe awo. Dokotala wa Spin Pulojekiti iliyonse ikuwoneka kuti imagwiritsa ntchito makanema ojambula pamanja angapo. Ena amazungulira mozungulira, ena mopingasa. Ena amachita kasinthasintha kamodzi ka 360-degree, ena amatembenuza kangapo kuti agwire mwachangu. M'malo mopanga makiyi achinsinsi pakusintha kulikonse, tiyeni tipange zosinthika zomwe zimagwira zochitika zonse:
/* * Spin - makanema ojambula mozungulira * Gwiritsani ntchito --kf-spin-from ndi --kf-spin-to kuwongolera kasinthasintha * Gwiritsani ntchito --kf-spin-turns kuwongolera kuchuluka kwa kasinthasintha * Zosasintha: zimazungulira kuchokera ku 0deg kupita ku 360deg (kuzungulira kwathunthu) * Kugwiritsa: * makanema ojambula: kf-spin 1s mzere wopandamalire; * --kf-spin-turns: 2; // 2 kuzungulira kwathunthu * --kf-spin-kuchokera: 0deg; --kf-spin-ku: 180deg; // hafu kuzungulira * --kf-spin-kuchokera: 0deg; --kf-spin-ku: -360deg; // kubwereza */
@keyframes kf-spin { kuchokera ku { tembenuzani: var(--kf-spin-kuchokera, 0deg); } ku { tembenuza: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Tsopano titha kupanga ma spin osiyanasiyana omwe timakonda:
.loading-spinner { makanema ojambula: kf-spin 1s mzere wopandamalire; / * Imagwiritsa ntchito kusakhazikika: imazungulira kuchokera ku 0deg kupita ku 360deg */ }
.mofulumira { makanema ojambula: kf-spin 1.2s omasuka-in-out infinite alternate; --kf-spin-turns: 3; /* 3 kuzungulira kwathunthu kwa njira iliyonse mozungulira*/ }
.pang'onopang'ono { makanema ojambula: kf-spin 1.5s masitepe(8) wopandamalire; --kf-spin-ku: -360deg; /* kubwereza koloko */ }
.wochenjera { makanema ojambula: kf-spin 2s omasuka-in-out infinite alternate; --kf-spin-kuchokera: -16deg; --kf-spin-ku: 32deg; /* wiggle 36 deg: pakati -18deg ndi +18deg */ }
Onani Zizindikiro za Pen Keyframes - Demo 5 [yopangidwa ndi Amit Sheen. Kukongola kwa njira iyi ndikuti ma keyframes omwewo amagwira ntchito potsitsa masipina, zithunzi zozungulira, zotsatira za mawigi, komanso makanema ojambula pamitundu yambiri. The Pulse Paradox Makanema a pulse ndi ovuta chifukwa amatha "kugunda" zinthu zosiyanasiyana. Ena amagunda sikelo, ena amasinthasintha mawonekedwe, ndi mawonekedwe amtundu wamtundu ngati kuwala kapena machulukitsidwe. M'malo mopanga makiyi achinsinsi amtundu uliwonse, titha kupanga makiyi achinsinsi omwe amagwira ntchito ndi katundu aliyense wa CSS. Nachi chitsanzo cha pulse keyframe yokhala ndi sikelo ndi opacity options:
/* * Pulse - makanema ojambula * Gwiritsani ntchito --kf-pulse-scale-from ndi --kf-pulse-scale-kuwongolera masikelo * Gwiritsani ntchito --kf-pulse-opacity-from ndi --kf-pulse-opacity-to kuwongolera mawonekedwe * Zosasintha: palibe kugunda (zonse 1) * Kugwiritsa: * makanema ojambula: kf-pulse 2s omasuka-in-out infinite alternate; * --kf-pulse-scale-kuchokera: 0.95; --kf-pulse-scale-to: 1.05; // kugunda kwamphamvu * --kf-pulse-opacity-kuchokera: 0.7; --kf-pulse-opacity-to: 1; // kugunda kwa mtima */
@keyframes kf-pulse { kuchokera ku { sikelo: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ku { sikelo: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Izi zimapanga kugunda kosinthika komwe kungathe kutulutsa zinthu zingapo: .kuyitanira kuchitapo kanthu { makanema ojambula: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-kuchokera: 0,5; /* kugunda kwa mtima */ }
.chidziwitso-dont { makanema ojambula: kf-pulse 0.6s omasuka-in-out infinite alternate; --kf-pulse-scale-kuchokera: 0.9; --kf-pulse-scale-to: 1.1; /* kugunda kwamphamvu */ }
.unikirani mawu { makanema ojambula: kf-pulse 1.5s kumasuka wopandamalire; --kf-pulse-scale-kuchokera: 0,8; --kf-pulse-opacity-kuchokera: 0.2; /* sikelo ndi pulse opacity */ }
Onani Zizindikiro za Pen Keyframes - Demo 6 [yopangidwa ndi Amit Sheen. Keyframe imodzi yokha ya kf-pulse imatha kuthana ndi chilichonse kuyambira kukopa chidwi mpaka pazithunzi zazikulu, zonse zimakhala zosavuta kusintha. Kuchepetsa Kwambiri Chimodzi mwazinthu zabwino zogwiritsira ntchito ma keyframes tokens ndi momwe zimakhalira zosavuta kukulitsa laibulale yathu ya makanema ojambula ndikupereka zotsatira zomwe opanga ambiri sangavutike kuzilemba kuyambira poyambira, monga zotanuka kapena kudumpha. Nachi chitsanzo cha chizindikiro cha "bounce" keyframes token chomwe chimagwiritsa ntchito --kf-bounce-from custom property kuwongolera kutalika kwa kulumpha. /* * Bounce - makanema ojambula olowera * Gwiritsani ntchito --kf-bounce-kuchokera kuti muzitha kulumpha kutalika * Zosasintha: kudumpha kuchokera ku 100vh (kuchoka pa skrini) * Kugwiritsa: * makanema ojambula: kf-bounce 3s mosavuta; * --kf-bounce-kuchokera: 200px; // kulumpha kuchokera ku 200px kutalika */
@keyframes kf-bounce { 0% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { kumasulira: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { kumasulira: 0 0; makanema ojambula-nthawi-ntchito: kumasuka; } }
Makanema ngati "elastic" ndi ovuta pang'ono chifukwa cha mawerengedwe mkati mwa keyframes. Tiyenera kutanthauzira --kf-elastic-from-X ndi --kf-elastic-from-Y padera (zonse ndizosankha), ndipo palimodzi amatilola kuti tipange khomo lotanuka kuchokera pamalo aliwonse pazenera.
/* * Elastic In - makanema ojambula olowera * Gwiritsani ntchito --kf-elastic-from-X ndi --kf-elastic-from-Y kuwongolera poyambira * Zosasintha: zimalowa kuchokera pamwamba (0, -100vh) * Kugwiritsa: * makanema ojambula: kf-elastic-in 2s kumasuka-kutuluka onse; * --kf-elastic-kuchokera-X: -50px; * --kf-elastic-kuchokera-Y: -200px; // lowetsani kuchokera ku (-50px, -200px) */
@keyframes kf-elastic-mu { 0% { masulira: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { masulira: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { masulira: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-kuchokera-Y, 0px) * 0.1312); }
44% { masulira: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { kumasulira: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { kumasulira: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { kumasulira: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { kumasulira: 0 0; } }
Njirayi imapangitsa kuti zikhale zosavuta kugwiritsanso ntchito ndikusintha makiyi apamwamba kwambiri pantchito yathu yonse, pongosintha malo amodzi okha.
.bounce-and-zoom { makanema: kf-bounce 3s mosavuta, kf-zoom 3s mzere; --kf-kulitsa-kuchokera: 0; }
.dumphani-ndi-slide { makanema ojambula-kupanga: onjezani; /* Makanema onsewa amagwiritsa ntchito kumasulira */ makanema: kf-bounce 3s mosavuta, kf-slide-in 3s kumasuka; --kf-slide-kuchokera: -200px; }
.zoyala mu { makanema ojambula: kf-elastic-mu 2s kumasuka-kutuluka onse; }
Onani Zizindikiro za Pen Keyframes - Demo 7 [yopangidwa ndi Amit Sheen. Mpaka pano, tawona momwe tingaphatikizire makiyi achinsinsi mwanzeru komanso moyenera. Zachidziwikire, mungafune kusintha zinthu kuti zigwirizane ndi zosowa za projekiti yanu, koma tafotokozapo zitsanzo zamakanema angapo wamba komanso zochitika zatsiku ndi tsiku. Ndipo ndi ma tokeni a keyframe awa omwe ali m'malo mwake, tili ndi zomangira zamphamvu zopangira makanema ojambula osasinthika, osasunthika pantchito yonseyi. Palibenso makiyi obwerezabwereza, sipadzakhalanso mikangano yapadziko lonse lapansi. Njira yaukhondo, yosavuta yochitira zosowa zathu zonse zamakanema. Koma funso lenileni ndilakuti: Kodi timapanga bwanji midadada iyi pamodzi? Kuziyika Zonse Pamodzi Tawona kuti kuphatikiza ma keyframe tokeni ndikosavuta. Sitikusowa chilichonse chapadera koma kufotokozera zojambula zoyamba, kutanthauzira chachiwiri, kuyika zosinthika momwe zikufunikira, ndipo ndizomwezo. /* Zimira mu + slide mu */ .chakudya { makanema: kf-fade-mu 0.4s, kf-slide-mu 0.4s kiyubiki-bezier(0.34, 1.56, 0.64, 1); --kf-slide-kuchokera: 0 40px; }
/* Onerani pafupi + kuzimitsa mu */ .modali { makanema: kf-fade-mu 0.3s, kf-zoom 0.3s kiyubiki-bezier(0.34, 1.56, 0.64, 1); --kf-kukulitsa-kuchokera: 0.7; --kf-kulitsa-ku: 1; }
/* Yendani mu + pulse */ .chidziwitso { makanema: kf-slide-mu 0.5s, kf-pulse 1.2s omasuka-in-out infinite alternate; --kf-slide-kuchokera: -100px 0; --kf-pulse-scale-kuchokera: 0,95; --kf-pulse-scale-to: 1.05; }
Kuphatikiza uku kumagwira ntchito bwino chifukwa makanema ojambula amayang'ana malo osiyanasiyana: kusawoneka bwino, kusintha (kumasulira / masikelo), ndi zina zambiri. Koma nthawi zina pamakhala mikangano, ndipo tiyenera kudziwa chifukwa chake komanso momwe tingathanirane nazo. Makanema awiri akamayesa kutulutsa zinthu zomwezo - mwachitsanzo, sikelo yowonetsera kapena mawonekedwe owoneka bwino - zotsatira zake sizikhala zomwe mukuyembekezera. Mwachisawawa, chimodzi chokha mwa makanema ojambula chimagwiritsidwa ntchito kuzinthuzo, zomwe ndi zomaliza pamndandanda wa makanema ojambula. Uku ndikuchepetsa momwe CSS imagwirira ntchito makanema ojambula pamtundu womwewo. Mwachitsanzo, izi sizigwira ntchito monga momwe adafunira chifukwa makanema ojambula a kf-pulse okha ndi omwe angagwire ntchito. .bad-combo { makanema: kf-kulimba 0.5s kutsogolo, kf-pulse 1.2s infinite alternate; --kf-zoom-kuchokera: 0.5; --kf-kulitsa-ku: 1.2; --kf-pulse-scale-kuchokera: 0,8; --kf-pulse-scale-to: 1.1; }
Makanema Kuwonjezera Njira yosavuta komanso yachindunji yogwiritsira ntchito makanema ojambula angapo omwe amakhudza katundu yemweyo ndikugwiritsa ntchito makanema ojambula pamanja. Muchitsanzo chomaliza pamwambapa, makanema ojambula a kf-pulse alowa m'malo mwa makanema ojambula pa kf-zoom, kotero sitiwona makulitsidwe koyambirira ndipo sitipeza sikelo yoyembekezeredwa kufika pa 1.2. Pokhazikitsa makanema ojambula kuti awonjezere, timauza osatsegula kuti aphatikize makanema onse awiri. Izi zimatipatsa zotsatira zomwe tikufuna. .gawo lachiwiri { makanema ojambula-kupanga: onjezani; }
Onani Zizindikiro za Pen Keyframes - Demo 8 [yopangidwa ndi Amit Sheen. Njirayi imagwira ntchito bwino nthawi zambiri zomwe tikufuna kuphatikiza zotsatira pa katundu womwewo. Zimathandizanso tikafunika kuphatikiza makanema ojambula ndi ma static properties. Mwachitsanzo, ngati tili ndi chinthu chomwe chimagwiritsa ntchito zomasulira kuti zikhazikike pomwe tikufuna, ndiyeno tikufuna kuziwonetsa ndi kf-slide-in keyframes, timapeza kulumpha koyipa kowoneka popanda kupanga makanema ojambula. Onani Zizindikiro za Pen Keyframes - Demo 9 [yopangidwa ndi Amit Sheen. Ndi makanema ojambula akhazikitsidwa kuti awonjezere, makanema amalumikizana bwino ndi omwe aliposinthani, kuti chinthucho chizikhalabe m'malo mwake ndikusintha momwe zimayembekezeredwa. Makanema Stagger Njira inanso yothanirana ndi makanema ojambula angapo ndi "kuwagwedeza" - ndiye kuti, yambani makanema achiwiri pang'ono woyamba akamaliza. Si yankho lomwe limagwira ntchito pazochitika zilizonse, koma ndizothandiza tikakhala ndi makanema ojambula otsatiridwa ndi makanema opitilira. /* kuzimiririka mu + kugunda kwa kuwala */ .chidziwitso { makanema: kf-fade-in 2s kumasuka, kf-pulse 0.5s 2s kumasuka-kutuluka mopanda malire mosinthana; --kf-pulse-opacity-to: 0.5; }
Onani Zizindikiro za Pen Keyframes - Demo 10 [yafoloko] yolemba Amit Sheen. Kulamula Zinthu Gawo lalikulu la makanema ojambula omwe timagwira nawo ntchito amagwiritsa ntchito kusintha. Nthawi zambiri, izi ndizosavuta. Ilinso ndi mwayi wochita bwino chifukwa makanema ojambula amatha kufulumizitsa GPU. Koma ngati tigwiritsa ntchito masinthidwe, tiyenera kuvomereza kuti dongosolo limene timachita kusintha n’lofunika. Zambiri. M'mafelemu athu ofunikira mpaka pano, tagwiritsa ntchito kusintha kwamunthu payekha. Malinga ndi mafotokozedwe, izi zimagwiritsidwa ntchito nthawi zonse mokhazikika: choyamba, chinthucho chimamasuliridwa, kenako chizungulire, kenako makulitsidwe. Izi ndizomveka ndipo ndi zomwe ambiri aife timayembekezera. Komabe, ngati tigwiritsa ntchito katundu wosinthika, dongosolo lomwe ntchitozo zimalembedwera ndi momwe zimagwiritsidwira ntchito. Pamenepa, ngati tisuntha china chake ma pixel 100 pa X-axis ndiyeno nkuchitembenuza ndi madigiri 45, sizofanana ndikuyamba kutembenuza ndi madigiri 45 ndikusuntha ma pixel 100. /* Pinki lalikulu: Choyamba masulirani, kenako tembenuzani */ .chitsanzo chimodzi { sinthani: translateX(100px) tembenuzani(45deg); }
/* Malo obiriwira: Choyamba tembenuzani, kenako masulirani */ .chitsanzo-zawiri { sinthani: tembenuzani(45deg) translateX(100px); }
Onani Zizindikiro za Pen Keyframes - Demo 11 [yopangidwa ndi Amit Sheen. Koma molingana ndi dongosolo losinthira, aliyense amasintha - chilichonse chomwe tidagwiritsa ntchito pamakina ofunikira - zimachitika zisanachitike. Izi zikutanthauza kuti chilichonse chomwe mwakhazikitsa muzosintha zidzachitika pambuyo pa makanema ojambula. Koma ngati mutakhazikitsa, mwachitsanzo, kumasulira pamodzi ndi kf-spin keyframes, kumasulira kudzachitika pamaso pa makanema ojambula. Kusokonezeka koma?! Izi zimabweretsa mikhalidwe yomwe ma static values angayambitse zotsatira zosiyana pa makanema omwewo, monga izi:
/* Makanema wamba a ma spinner onse */ .spinner { makanema ojambula: kf-spin 1s mzere wopandamalire; }
/* Pinki spinner: masulirani musanazungulire (kusintha kwamunthu payekha) */ .pinki-pinki { kumasulira: 100% 50%; }
/* Green spinner: tembenuzani ndiye kumasulira (dongosolo lantchito) */ .spinner-green { sinthani: masulirani (100%, 50%); }
Onani Zizindikiro za Pen Keyframes - Demo 12 [yafoloko] yolemba Amit Sheen. Mutha kuwona kuti spinner woyamba (pinki) amapeza kumasulira komwe kumachitika Kf-spin isanatembenuzidwe, kotero imasunthira kumalo ake kenako ndikuzungulira. Wachiwiri spinner (wobiriwira) amapeza ntchito yomasulira () yomwe imachitika munthu akasintha, ndiye kuti chinthucho chimayamba kuzungulira, kenako chimayenda molingana ndi ngodya yake yamakono, ndipo timapeza zotsatira zake. Ayi, ichi si cholakwika. Ndi chimodzi mwazinthu zomwe tiyenera kudziwa za CSS ndikukumbukira tikamagwira ntchito ndi makanema ojambula angapo kapena masinthidwe angapo. Ngati pakufunika, mutha kupanganso ma keyframes a kf-spin-alt omwe amazungulira zinthu pogwiritsa ntchito rotate() ntchito. Kuyenda Kwachepetsedwa Ndipo pamene tikukamba za ma keyframes ena, sitinganyalanyaze njira ya "palibe makanema". Chimodzi mwazabwino zazikulu zogwiritsira ntchito zizindikiro za keyframes ndikuti kupezeka kumatha kuwotchedwa, ndipo ndikosavuta kuchita. Popanga makiyi athu ofunikira kuti athe kufikika m'maganizo, titha kuwonetsetsa kuti ogwiritsa ntchito omwe amakonda kuyenda pang'onopang'ono amapeza njira yabwino, yosadodometsa, popanda ntchito yowonjezera kapena kubwereza ma code. Tanthauzo lenileni la "Kusuntha Kwachepetsedwa" chitha kusintha pang'ono kuchokera pa makanema ojambula kupita ku ena, komanso kuchokera ku projekiti kupita ku projekiti, koma apa pali mfundo zingapo zofunika kukumbukira: Kuletsa Mafulemu Ofunika Ngakhale makanema ojambula amatha kuchepetsedwa kapena kuchedwetsedwa, pali ena omwe amayenera kutha kwathunthu ngati kuchepetsedwa kufunsidwa. Makanema a pulse ndi chitsanzo chabwino. Kuonetsetsa kuti makanema ojambulawa sakuyenda mocheperako, titha kungowakulunga mufunso loyenera lazakanema.
@media (zokonda-zochepetsa-kuyenda: osakonda) { @keyfrmaes kf-pulse { kuchokera ku { sikelo: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ku { sikelo: var(--kf-pulse-scale-to, 1); kuwala:var(--kf-pulse-opacity-to, 1); } } }
Izi zimatsimikizira kuti ogwiritsa ntchito omwe akhazikitsa zokonda-zochepetsa-kuyenda kuti achepetse sadzawona makanema ojambula ndipo adzapeza zomwe zikugwirizana ndi zomwe amakonda. Instant In Pali makiyi achinsinsi omwe sitingathe kuwachotsa, monga makanema ojambula panjira. Mtengo uyenera kusintha, uyenera kukhala wamoyo; apo ayi, chinthucho sichikhala ndi zikhalidwe zolondola. Koma mukuyenda kocheperako, kusinthaku kuchokera pamtengo woyambira kuyenera kuchitika nthawi yomweyo. Kuti tikwaniritse izi, tifotokozeranso mafungulo owonjezera pomwe mtengo umalumphira nthawi yomweyo mpaka kumapeto. Awa amakhala mafungulo athu osakhazikika. Kenako, tidzawonjezera makiyi anthawi zonse mkati mwafunso lawayilesi la zokonda-zocheperako zomwe sizimakonda, monga momwe zinalili kale. /* lowetsani nthawi yomweyo kuti muchepetse kuyenda */ @keyframes kf-zoom { kuchokera, kupita ku { sikelo: var(--kf-zoom-to, 1); } }
@media (zokonda-zochepetsa-kuyenda: osakonda) { /* Mafungulo oyambira owonera */ @keyframes kf-zoom { kuchokera ku { sikelo: var(--kf-zoom-kuchokera, 0.8); } ku { sikelo: var(--kf-zoom-to, 1); } } }
Mwanjira iyi, ogwiritsa ntchito omwe amakonda kusuntha kocheperako adzawona chinthucho chikuwonekera nthawi yomweyo, pomwe wina aliyense adzalandira kusintha kosinthika. Njira Yofewa Pali nthawi zina pomwe timafuna kusuntha pang'ono, koma mofewa komanso modekha kuposa makanema oyambira. Mwachitsanzo, titha kusintha khomo lodumphira ndikulowa mofatsa.
@keyframes kf-bounce { /* Kuzimiririka kofewa kuti muchepetse kuyenda */ }
@media (zokonda-zochepetsa-kuyenda: osakonda) { @keyframes kf-bounce { /* Mafungulo oyambira amawu */ } }
Tsopano, ogwiritsa ntchito omwe ali ndi mphamvu zocheperako amapezabe mawonekedwe, koma osasunthika kwambiri kapena makanema ojambula pamanja. Ndi midadada yomangirayo, funso lotsatira ndi momwe mungawapangire kukhala gawo la ntchito yeniyeni. Kulemba ma keyframes osinthika ndi chinthu chimodzi, koma kuwapanga kukhala odalirika pantchito yayikulu kumafuna njira zingapo zomwe ndimayenera kuphunzira movutikira. Kukhazikitsa Njira & Njira Zabwino Kwambiri Tikakhala ndi laibulale yolimba ya ma keyframes tokens, vuto lenileni ndi momwe tingawabweretsere kuntchito ya tsiku ndi tsiku.
Chiyeso ndikugwetsa ma keyframes onse nthawi imodzi ndikulengeza kuti vutoli lathetsedwa, koma pochita ndapeza kuti zotsatira zabwino zimachokera kutengera pang'onopang'ono. Yambani ndi makanema ojambula odziwika kwambiri, monga kutha kapena slide. Izi ndi zopambana zosavuta zomwe zikuwonetsa phindu laposachedwa popanda kufunikira kulembedwanso kwakukulu. Kutchula dzina ndi mfundo ina yofunika kuiganizira. Chiyambi chofanana kapena malo a mayina chimapangitsa kuti zidziwike kuti makanema ojambula pamanja ndi ma tokeni ndi omwe ali m'malo amodzi. Zimalepheretsanso kugundana mwangozi ndikuthandizira mamembala atsopano kuzindikira dongosolo lomwe amagawana nawo pang'onopang'ono. Zolemba ndizofunikanso ngati code yokhayo. Ngakhale ndemanga yaying'ono pamwamba pa chizindikiro chilichonse cha keyframes imatha kusunga maola ambiri mukungoganiza pambuyo pake. Wopanga mapulogalamu akuyenera kutsegula fayilo ya ma tokeni, kuyang'ana momwe akufunira, ndikukopera mawonekedwe ogwiritsira ntchito molunjika mugawo lawo. Kusinthasintha ndizomwe zimapangitsa kuti njirayi ikhale yopindulitsa. Powonetsa machitidwe anzeru, timapatsa magulu mwayi woti azitha kusintha makanema popanda kuphwanya dongosolo. Pa nthawi yomweyo, yesetsani kuti overcomplicate. Perekani mfundo zofunika ndi kusunga maganizo ena onse. Pomaliza, kumbukirani kupezeka. Sikuti makanema ojambula onse amafunikira njira yochepetsera, koma ambiri amatero. Kuphika muzosinthazi koyambirira kumatanthauza kuti sitidzawabwezeranso pambuyo pake, ndipo zikuwonetsa chisamaliro chomwe ogwiritsa ntchito athu angazindikire ngakhale sanatchulepo.
M'chidziwitso changa, kuchitira ma tokeni a keyframes ngati gawo la mapangidwe athu a ma tokeni ndizomwe zimawapangitsa kumamatira. Akakhala m'malo, amasiya kumverera ngati zotsatira zapadera ndikukhala mbali ya chinenero chojambula, chowonjezera chachilengedwe cha momwe mankhwalawo amayendera ndikuyankhira. Kumaliza Makanema amatha kukhala amodzi mwamagawo osangalatsa kwambiri pamapangidwe omangira, koma popanda mawonekedwe, amathanso kukhala amodzi mwazinthu zomwe zimakhumudwitsa kwambiri. Pochita ma keyframes ngati zizindikiro, mumatenga chinthu chomwe nthawi zambiri chimakhala chosokoneza komanso chovuta kuchiwongolera ndikuchisintha kukhala dongosolo lomveka bwino, lodziwikiratu. Phindu lenileni silimangosunga mizere ingapo yamakhodi. Ndili ndi chidaliro kuti mukamagwiritsa ntchito fade, slide, zoom, kapena spin, mumadziwa bwino momwe zidzakhalira pa polojekiti yonse. Zili mu kusinthasintha komwe kumachokera ku katundu wachizolowezi popanda chisokonezo cha kusiyana kosatha. Ndipo zili mu kupezeka komangidwa mu maziko osati kuwonjezeredwa ngatipambuyo pake. Ndawonapo malingalirowa akugwira ntchito m'magulu osiyanasiyana ndi ma codebases osiyanasiyana, ndipo chitsanzocho chimakhala chofanana nthawi zonse. Zizindikiro zikakhazikika, ma keyframes amasiya kukhala gulu lomwazika lazamisala ndikukhala gawo la chilankhulo chojambula. Amapangitsa kuti chinthucho chizimva mwadala, chokhazikika, komanso chamoyo. Ngati mutenga chinthu chimodzi m'nkhaniyi, chikhale ichi: makanema ojambula amayenera kusamalidwa komweko komanso kapangidwe kake komwe timapereka kale kumitundu, kalembedwe, ndi masitayilo. Ndalama yaying'ono mu ma keyframe tokens imalipira nthawi iliyonse mawonekedwe anu akuyenda.
