Whakaarohia tenei: ka uru atu koe ki tetahi kaupapa hou, ruku ki te turanga waehere, a i roto i nga haora tuatahi, ka kitea e koe tetahi mea tino pouri. Ka marara puta noa i nga pepa ahua, ka kitea e koe he whakamaarama @keyframes maha mo nga whakakorikori taketake. E toru nga ahuatanga memenge-i rereke, e rua, e toru nga rereketanga kiriata, he kutanga o nga pakiwaituhi topa, me te neke atu i te rua o nga huringa hurihuri rereke na te mea, he aha? @keyframes pulse { mai i { tauine: 1; } ki { tauine: 1.1; } }
@keyframes nui-tere { 0%, 20%, 100% { tauine: 1; } 10%, 40% { tauine: 1.2; } }
Mena he ahua mohio tenei ahuatanga, ehara i te mea ko koe anake. I roto i aku wheako puta noa i nga kaupapa rereke, ko tetahi o nga toa tere e rite tonu ana ka taea e au te tuku ko te whakakotahi me te whakataurite i nga anga matua. Kua noho hei tauira pono e tatari ana ahau ki tenei horoi hei mahi tuatahi mo tetahi turanga waehere hou. Te Arorau Kei muri i Te Hurumaru He tino tika tenei taapiri ina whakaarohia e koe. Ka whakamahi tatou katoa i nga mea whakakorikori taketake i roto i a tatou mahi o ia ra: ka memenge, te kiriata, te topa, te hurihuri, me etahi atu paanga noa. He tino maamaa enei pakiwaituhi, a he ngawari ki te wepu i te whakamaramatanga @keyframes tere kia oti ai te mahi. Ki te kore he punaha hākoritanga matua, ka tuhia e nga kaiwhakawhanake enei anga matua mai i te timatanga, me te kore e mohio kei te noho kee nga pakiwaituhi i etahi atu waahi o te turanga waehere. He mea noa tenei i te wa e mahi ana i nga hoahoanga-a-waahanga (e mahi ana te nuinga o tatou i enei ra), i te mea he mahi whakarara nga roopu puta noa i nga waahanga rereke o te tono. Ko te hua? Hurorirori kau. Te Raruraru Iti Ko nga take e tino kitea ana me te taaruatanga o nga papamahi matua he moumou te wa whanaketanga me te pupuhi waehere kore. Ko nga whakamaramatanga anga matua maha he maha nga waahi hei whakahou ina huri nga whakaritenga. Me whakatika i te wa o to hākoritanga memeha? Ka hiahia koe ki te whai i nga ahuatanga katoa puta noa i to turanga waehere. Kei te hiahia koe ki te whakataurite i nga mahi whakangawari? He waimarie ki te rapu i nga rereketanga katoa. Ma tenei whakareatanga o nga tohu tiaki, he mea whakapau kaha te whakahōu hākoritanga ngawari. Te Raruraru Nui Ko tenei taaruatanga anga matua ka puta he raru nanakia e huna ana i raro i te mata: ko te mahanga whanui o te ao. Ahakoa ka mahi tahi me nga hoahoanga-a-waahanga, ka tautuhia nga anga matua CSS i nga wa katoa ki te whanui o te ao. Ko te tikanga ka pa nga anga matua katoa ki nga waahanga katoa. I nga wa katoa. Ae, kaore e whakamahia e to hākoritanga nga anga matua i tautuhia e koe i roto i to waahanga. Ka whakamahia e ia nga anga matua whakamutunga e rite ana ki taua ingoa rite tonu i utaina ki te whanuitanga o te ao. I te mea he rite katoa o angamahi matua, he take iti tenei. Engari i te wa e hiahia ana koe ki te whakarite i tetahi hākoritanga mo tetahi keehi whakamahi motuhake, kei te raru koe, he kino ake ranei, ko koe te mea nana. Karekau ranei to hākoritanga e mahi na te mea ka utaina tetahi atu waahanga i muri i a koe, te tuhirua i o anga matua, ka utaina ranei to waahanga ka mutu ka huri ohorere i te whanonga hākoritanga mo ia atu waahanga e whakamahi ana i te ingoa o taua anga matua, a kare pea koe e mohio. Anei tetahi tauira ngawari e whakaatu ana i te raru: .wahanga-one { /* momo waahanga */ hākoritanga: pulse 1s whakangāwari ki roto-waho mutunga kore; }
/* e kore e mahi tenei whakamaramatanga @keyframes */ @keyframes pulse { mai i { tauine: 1; } ki { tauine: 1.1; } }
/* i muri mai i te waehere... */
.wahanga-rua { /* momo waahanga */ hākoritanga: pulse 1s ngawari ki roto-waho mutunga kore; }
/* ka pa enei anga matua ki nga waahanga e rua */ @keyframes pulse { 0%, 20%, 100% { tauine: 1; } 10%, 40% { tauine: 1.2; } }
He rite tonu te ingoa hākoritanga o nga wahanga e rua, engari ko te whakamaramatanga tuarua @keyframes ka tuhirua i te tuatahi. Inaianei ka whakamahi te waahanga-kotahi me te waahanga-rua i nga anga matua tuarua, ahakoa ko tehea waahanga i tautuhia ko wai nga papa matua. Tirohia te Pen Keyframes Tokens - Demo 1 [forked] na Amit Sheen. Ko te waahanga kino rawa atu? He tino pai tenei mahi i roto i te whanaketanga o te rohe engari ka pakaru ngaro i roto i te hanga ina huri nga tukanga hanga i te raupapa uta o o pepa ahua. Ka mutu koe me nga pakiwaituhi he rereke te ahua i runga i nga waahanga ka utaina me te aha te raupapa. Ko te Otinga: Nga Papamatua Whakakotahi Ko te whakautu ki tenei hepohepo he maamaa noa: ko nga papamahi hihiko kua tautuhia i mua i te rongoa i roto i te pepa ahua tiritahi. Engari i te tuku i nga waahanga katoa ki te tautuhi i ona ake pakiwaituhi, ka hangaia e matou nga papa matua matua kua tuhia pai, ngawari ki tete whakamahi, te tiaki, me te whakangao ki nga hiahia motuhake o to kaupapa. Whakaarohia hei tohu tohu matua. Ka rite ki te whakamahi tohu mo nga tae me te mokowhiti, he maha o tatou kei te whakamahi i nga tohu mo nga ahuatanga hākoritanga, penei i te roanga me nga mahi whakangawari, he aha e kore ai e whakamahi tohu mo nga anga matua? Ka taea e tenei huarahi te whakauru maori ki nga rerengamahi tohu hoahoa o naianei e whakamahia ana e koe, i te whakaoti rapanga iti (te taarua waehere) me te raru nui atu (nga taupatupatu whanui o te ao) i te wa kotahi. He maamaa te whakaaro: hanga he puna pono kotahi mo o tatou pakiwaituhi noa. Kei roto i tenei pepa ahua tiritahi nga anga matua i ata mahia e hipoki ana i nga tauira hākoritanga e whakamahia ana e to maatau kaupapa. Kare e whakaaro ake mena kei te noho kee he hākoritanga memeha i tetahi waahi kei roto i to maatau turanga. Karekau he tuhi i nga pakiwaituhi mai i etahi atu waahanga. Engari koinei te mea nui: ehara i te mea ko nga pakiwaituhi kape-whakapiri noa. I hangaia kia hihiko me te whakarite na roto i nga taonga ritenga CSS, ka taea e maatau te pupuri i te rite tonu i te wa e waatea tonu ana ki te urutau i nga pakiwaituhi ki nga keehi whakamahi motuhake, penei me te hiahia koe ki te whakakorikori "pupuhi" nui ake i te waahi kotahi. Hangaia te Tohu Anga Matua Tuatahi Ko tetahi o nga hua iti-iri tuatahi hei tarai i a tatou ko te hākoritanga "moe-mai". I roto i tetahi o aku kaupapa tata nei, i kitea e au neke atu i te tekau ma rua nga whakamaramatanga memeha-i roto, aee, he mea whakakorikori katoa i te opacity mai i te 0 ki te 1. Na, me hanga he pepa ahua hou, karangahia kf-tokens.css, kawemai ki roto i ta maatau kaupapa, ka tuu i o maatau papa matua me nga korero tika ki roto. /* keyframes-tokens.css */
/* * Muhani I roto - memeha hākoritanga tomokanga * Whakamahinga: hākoritanga: kf-fade-in 0.3s ngawari-waho; */ @keyframes kf-fade-in { mai i { opacity: 0; } ki { opacity: 1; } }
Ko tenei whakapuakanga @keyframes kotahi e whakakapi ana i aua whakakorikoritanga memeha-i marara puta noa i to maatau turanga. Ma, ngawari, me te whai waahi ki te ao. Inaianei kua tautuhia tenei tohu, ka taea e taatau te whakamahi mai i tetahi waahanga puta noa i ta maatau kaupapa: .modal { hākoritanga: kf-fade-i roto i te 0.3s ngawari ki waho; }
.taputapu { hākoritanga: kf-fade-in 0.2s ngawari-roto-waho; }
.whakamōhiotanga { hākoritanga: kf-fade-i roto i te 0.5s ngawari ki waho; }
Tirohia te Pen Keyframes Tohu - Demo 2 [marau] na Amit Sheen. Tuhipoka: Kei te whakamahi matou i te kf- prefix ki o matou ingoa @keyframes katoa. He mokowāingoa tēnei prefix hei aukati i te whakaingoa i nga taupatupatu me nga hākoritanga o mua i roto i te kaupapa, me te whakaatu tonu mai ko enei anga matua i ahu mai i a maatau tohu tohu anga matua. Te Hanga Kiriata Hihiko He pai te mahi a te kf-fade-in keyframes na te mea he ngawari, he iti noa te waahi hei whakararu i nga mea. I etahi atu pakiwaituhi, heoi, me kaha ake taatau, a i konei ka taea e taatau te whakamahi i te mana nui o nga taonga ritenga CSS. I konei ka tino whiti nga tohu tohu matua ka whakaritea ki nga pakiwaituhi pateko marara. Me tango i tetahi ahuatanga noa: "kiriata-i roto" pakiwaituhi. Engari paheke mai i hea? 100px mai i te taha matau? 50% mai i te taha maui? Me uru mai i runga o te mata? Ka rewa ranei mai i raro? He maha nga mea ka taea, engari hei utu mo te hanga anga matua motuhake mo ia ahunga me ia rereketanga, ka taea e tatou te hanga i tetahi tohu ngawari e urutau ana ki nga ahuatanga katoa: /* * Kiriata ki roto - hākoritanga kiriata aronga * Whakamahia --kf-slide-mai ki te whakahaere i te ahunga * Taunoa: kiriata mai i te taha maui (-100%) * Whakamahinga: * hākoritanga: kf-kiriata-i roto i te 0.3s ngawari ki waho; * --kf-kiriata-mai: -100px 0; // kiriata mai i te taha maui * --kf-kiriata-mai: 100px 0; // kiriata mai i te taha matau * --kf-kiriata-mai: 0 -50px; // kiriata mai i runga */
@keyframes kf-kiriata-mai { mai i { whakamaori: var(--kf-kiriata-mai, -100% 0); } ki { whakamaori: 0 0; } }
Inaianei ka taea e tatou te whakamahi i tenei tohu kotahi @keyframes mo tetahi ahunga kiriata ma te huri noa i te --kf-slide-mai i nga taonga ritenga: .paetaha { hākoritanga: kf-kiriata-i roto i te 0.3s ngawari ki waho; /* Whakamahi uara taunoa: kiriata mai i te maui */ }
.whakamōhiotanga { hākoritanga: kf-kiriata-i roto i te 0.4s ngawari ki waho; --kf-kiriata-mai: 0 -50px; /* kiriata mai i runga */ }
.modal { hākoritanga: kf-moe-i roto i te 0.5s, kf-kiriata-i roto i te 0.5s pūtoru-bezier(0.34, 1.56, 0.64, 1); --kf-kiriata-mai: 50px 50px; /* kiriata mai i raro-matau */ }
Ko tenei huarahi ka whakawhiwhia ki a maatau te ngawari i te wa e mau tonu ana. Kotahi te whakapuakanga anga matua, nga huarahi mutunga kore. Tirohia te Pen Keyframes Tokens - Demo 3 [forked] na Amit Sheen. A, ki te pirangi tatou ki te whakangawari ake i a tatou pakiwaituhi, ka taea hoki nga paanga "kiriata-waho", ka taeataapiri noa he --kf-slide-ki nga taonga ritenga, he rite ki ta maatau e kite i te waahanga e whai ake nei. Takirua Topa Papamatua Ko tetahi atu hākoritanga noa e taritea ana puta noa i nga kaupapa ko nga hua "topa". Ahakoa he tauine iti mo nga karere topa, he topa nui mo nga tikanga, he awe whakaheke ngawari ranei mo nga pane, kei nga waahi katoa nga pakiwaituhi topa. Engari ki te hanga anga matua motuhake mo ia uara tauine, me hanga e tatou tetahi huinga hangore o nga anga matua kf-zoom:
/* * Topa - hākoritanga tauine * Whakamahia --kf-zoom-from me --kf-zoom-ki ki te whakahaere i nga uara tauine * Taunoa: topa mai i te 80% ki te 100% (0.8 ki te 1) * Whakamahinga: * hākoritanga: kf-zoom 0.2s ngawari ki waho; * --kf-zoom-mai: 0.5; --kf-zoom-ki: 1; // topa mai i te 50% ki te 100% * --kf-zoom-mai: 1; --kf-zoom-ki: 0; // topa mai i te 100% ki te 0% * --kf-zoom-mai: 1; --kf-zoom-ki: 1.1; // topa mai i te 100% ki te 110% */
@keyframes kf-zoom { mai i { tauine: var(--kf-zoom-mai, 0.8); } ki { tauine: var(--kf-zoom-ki, 1); } }
Ma te whakamaramatanga kotahi, ka taea e tatou te whakatutuki i nga rereketanga topa e hiahiatia ana: .toast { hākoritanga: kf-kiriata-i roto i te 0.2s, kf-zoom 0.4s ngawari-waho; --kf-kiriata-mai: 0 100%; /* kiriata mai i runga */ /* Ka whakamahi topa taunoa: tauine mai i te 80% ki te 100% */ }
.modal { hākoritanga: kf-zoom 0.3s pūtoru-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-mai: 0; /* topa nui mai i te 0% ki te 100% */ }
.heading { hākoritanga: kf-moe-i roto i te 2s, kf-zoom 2s ngawari ki roto; --kf-zoom-mai: 1.2; --kf-zoom-ki: 0.8; /* tauine ngawari ki raro */ }
Ko te taunoa o te 0.8 (80%) e mahi pai ana mo te nuinga o nga huānga UI, penei i nga karere toast me nga kaari, i te mea he ngawari tonu te whakarite mo nga keehi motuhake. Tirohia te Pen Keyframes Tokens - Demo 4 [forked] na Amit Sheen. Kua kite pea koe i tetahi mea whakamere i roto i nga tauira tata nei: kua whakakotahi matou i nga mahi pakiwaituhi. Ko tetahi o nga painga nui o te mahi tahi me nga tohu @keyframes ko te mea i hangaia kia pai te whakakotahi ki a raatau ano. Ko tenei hanganga maeneene he mea whakaaro, ehara i te mea ohorere. Ka matapakihia e matou te hanganga hākoritanga i muri mai, tae atu ki te waahi ka raru pea, engari ko te nuinga o nga huinga he maamaa me te ngawari ki te whakatinana. Tuhipoka: I a au e tuhi ana i tenei tuhinga, na te mea pea i tuhia e au, ka whakaaro ano ahau ki te whakaaro katoa mo nga pakiwaituhi urunga. Me nga ahunga whakamua katoa i roto i te CSS, kei te hiahia tonu tatou ki a raatau? Waimarie, i tirotirohia e Adam Argyle nga patai ano, me te whakaatu marama i roto i tana blog. Kaore tenei i te whakahē ki nga mea kua tuhia ki konei, engari he huarahi e tika ana kia whakaarohia, ina koa ka whakawhirinaki nui o kaupapa ki nga whakakorikori urunga. Whakakorikori Tonu Ahakoa ko nga pakiwaituhi urunga, penei i te "muhanu", "kiriata", me te "topa" ka puta kotahi, ka mutu, ka huri haere tonu nga hākoritanga hei kukume i te aro, hei tohu ranei i nga mahi e haere tonu ana. Ko nga pakiwaituhi e rua e pa ana ki a au ko te "mio" (mo nga tohu uta) me te "pure" (mo te whakaatu i nga waahanga nui). Ko enei pakiwaituhi he wero ahurei ina tae mai ki te hanga tohu tohu matua. Kaore i rite ki nga pakiwaituhi urunga e haere ana mai i tetahi kawanatanga ki tetahi atu, me tino whakarite nga mahi hākoritanga ki o raatau tauira whanonga. Te Takuta Spin Ko ia kaupapa te ahua he maha nga mahi whakatangitangi. Ko etahi ka huri karaka, ko etahi atu karaka. Ko etahi ka mahi i te hurihanga 360-tohu kotahi, ko etahi ka maha nga huringa mo te tere ake. Engari ki te hanga anga matua motuhake mo ia rereketanga, me hanga e tatou tetahi miro ngawari hei whakahaere i nga ahuatanga katoa:
/* * Miro - hākoritanga hurihanga * Whakamahia te --kf-spin-from me te --kf-spin-to ki te whakahaere i te awhe hurihuri * Whakamahia te --kf-spin-turns ki te whakahaere i te nui o te hurihanga * Taunoa: ka huri mai i te 0deg ki te 360deg (1 te hurihanga katoa) * Whakamahinga: * hākoritanga: kf-spin 1s linear infinite; * --kf-huri-huri: 2; // 2 hurihanga katoa * --kf-huri-mai: 0deg; --kf-huri-ki: 180deg; // hurihanga haurua * --kf-huri-mai: 0deg; --kf-huri-ki: -360deg; // karakakaraka */
@keyframes kf-huri { mai i { takahuri: var(--kf-spin-mai, 0deg); } ki { takahuri: calc(var(--kf-spin-mai, 0deg) + var(--kf-spin-ki, 360deg) * var(--kf-spin-turns, 1)); } }
Inaianei ka taea e tatou te hanga i nga momo rereke e pai ana ki a tatou:
.loading-spinner { hākoritanga: kf-spin 1s linear infinite; /* Ka whakamahi taunoa: ka huri mai i te 0deg ki te 360deg */ }
.fast-loader { hākoritanga: kf-spin 1.2s whakangāwari ki roto ki waho mutunga kore; --kf-huri-huri: 3; /* 3 katoa nga hurihanga mo ia ahunga mo ia huringa*/ }
.whakamuri-whakamuri { hākoritanga: kf-spin 1.5s kaupae(8) mutunga; --kf-huri-ki: -360deg; /* takakaraka */ }
.wiggle-wiggle { hākoritanga: kf-spin 2s whakangāwari ki roto-waho karekau he mutunga; --kf-huri-mai: -16deg; --kf-huri-ki: 32deg; /* wiri 36 nekehanga: i waenganui i te -18 nekehanga me te +18 nekehanga */ }
Tirohia te Pen Keyframes Tohu - Demo 5 [marau] na Amit Sheen. Ko te ataahua o tenei huarahi he rite tonu te mahi a nga anga matua mo te uta i nga kaihurihuri, nga tohu hurihuri, nga hua wiri, tae atu ki nga pakiwaituhi hurihuri maha. Te Pulse Paradox He uaua ake nga pakiwaituhi o te Pulse na te mea ka taea e ratou te "pupuhi" nga ahuatanga rereke. Ko etahi e pupuhi ana i te tauine, ko etahi e pupuhi ana i te opacity, me etahi o nga ahuatanga tae o te tae penei i te kanapa me te waatea. Engari i te hanga anga matua motuhake mo ia rawa, ka taea e tatou te hanga anga matua e mahi ana me tetahi taonga CSS. Anei tetahi tauira o te anga matua puhoi me nga whiringa tauine me te puatakore:
/* * Pulse - hākoritanga pulsing * Whakamahia te --kf-purse-scale-mai me te --kf-pulse-scale-ki ki te whakahaere awhe tauine * Whakamahia te --kf-pulse-opacity-mai me te --kf-pulse-opacity-ki ki te whakahaere awhe opacity * Taunoa: karekau he patere (nga uara 1 katoa) * Whakamahinga: * hākoritanga: kf-pulse 2s whakangawari-roto-waho karekau he mutunga; * --kf-pupuhi-tauine-mai: 0.95; --kf-purse-tauine-ki: 1.05; // tauine patere * --kf-pulse-opacity-mai: 0.7; --kf-pulse-opacity-ki: 1; // te opacity pulse */
@keyframes kf-pure { mai i { tauine: var(--kf-pulse-scale-mai, 1); opacity: var(--kf-pulse-opacity-mai, 1); } ki { tauine: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-ki, 1); } }
Ma tenei ka hanga he putere ngawari ka taea te whakakorikori i nga ahuatanga maha: .karanga-ki-mahi { hākoritanga: kf-purse 0.6s mutunga kore; --kf-pulse-opacity-mai: 0.5; /* te opacity pulse */ }
.ira-whakamōhiotanga { hākoritanga: kf-pulse 0.6s whakangāwari ki roto ki waho mutunga kore; --kf-purse-tauine-mai: 0.9; --kf-purse-scale-ki: 1.1; /* tauine patere */ }
.kuputuhi-miramira { hākoritanga: kf-pulse 1.5s ngawari-waho mutunga kore; --kf-pupuhi-tauine-mai: 0.8; --kf-pulse-opacity-mai: 0.2; /* tauine me te opacity pulse */ }
Tirohia te Pen Keyframes Tokens - Demo 6 [forked] na Amit Sheen. Ka taea e tenei anga matua kf-pulse kotahi te hapai i nga mea katoa mai i te kapo aro ki nga mea whakahirahira, ahakoa he ngawari ki te whakarite. Whakangāwari Arā Ko tetahi o nga mea pai mo te whakamahi i nga tohu anga matua ko te ngawari ki te whakawhanui i to maatau whare pukapuka pakiwaituhi me te whakarato i nga paanga e kore te nuinga o nga kaiwhakawhanake e whakararuraru ki te tuhi mai i te wahanga, penei i te rapa, te tawhana ranei. Anei he tauira o te tohu angamahi "pupuhi" ngawari e whakamahi ana i te taonga --kf-bounce-from ki te whakahaere i te teitei peke. /* * Rua - rutua hākoritanga tomokanga * Whakamahia te --kf-bounce-from ki te whakahaere i te teitei peke * Taunoa: peke mai i te 100vh (atu i te mata) * Whakamahinga: * hākoritanga: kf-bounce 3s ngawari ki roto; * --kf-bounce-mai: 200px; // peke mai i te 200px teitei */
@keyframes kf-bounce { 0% { whakamaori: 0 calc(var(--kf-bounce-mai, 100vh) * -1); }
34% { whakamaori: 0 calc(var(--kf-bounce-mai, 100vh) * -0.4); }
55% { whakamaori: 0 calc(var(--kf-bounce-mai, 100vh) * -0.2); }
72% { whakamaoritia: 0 calc(var(--kf-bounce-mai, 100vh) * -0.1); }
85% { whakamaori: 0 calc(var(--kf-bounce-mai, 100vh) * -0.05); }
94% { whakamaori: 0 calc(var(--kf-bounce-mai, 100vh) * -0.025); }
99% { whakamaoritia: 0 calc(var(--kf-bounce-mai, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { whakamaori: 0 0; hākoritanga-wā-mahi: ngawari-waho; } }
Ko nga haahi penei i te "elastic" he uaua ake na te tatauranga i roto i nga anga matua. Me tautuhi motuhake --kf-elastic-from-X me --kf-elastic-from-Y (he mea kowhiringa nga mea e rua), ka tuku tahi tatou ki te hanga i tetahi tomokanga rapa mai i tetahi waahi o te mata.
/* * Elastic In - elastic entrance animation * Whakamahia te --kf-elastic-from-X me te --kf-elastic-from-Y hei whakahaere i te turanga tiimata * Taunoa: ka uru mai i te pokapū runga (0, -100vh) * Whakamahinga: * hākoritanga: kf-elastic-i roto i te 2s ngawari ki roto-waho e rua; * --kf-elastic-mai-X: -50px; * --kf-elastic-mai-Y: -200px; // tomo mai i (-50px, -200px) */
@keyframes kf-elastic-in { 0% { whakamaori: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-mai-Y, 0px) * 1); }
16% { whakamaori: calc(var(--kf-elastic-mai-X, -50vw) * -0.3227) calc(var(--kf-elastic-mai-Y, 0px) * -0.3227); }
28% { whakamaori: calc(var(--kf-elastic-mai-X, -50vw) * 0.1312)calc(var(--kf-elastic-mai-Y, 0px) * 0.1312); }
44% { whakamaori: calc(var(--kf-elastic-mai-X, -50vw) * -0.0463) calc(var(--kf-elastic-mai-Y, 0px) * -0.0463); }
59% { whakamaori: calc(var(--kf-elastic-mai-X, -50vw) * 0.0164) calc(var(--kf-elastic-mai-Y, 0px) * 0.0164); }
73% { whakamaori: calc(var(--kf-elastic-mai-X, -50vw) * -0.0058) calc(var(--kf-elastic-mai-Y, 0px) * -0.0058); }
88% { whakamaori: calc(var(--kf-elastic-mai-X, -50vw) * 0.0020) calc(var(--kf-elastic-mai-Y, 0px) * 0.0020); }
100% { whakamaori: 0 0; } }
Ma tenei huarahi ka ngawari ki te whakamahi ano me te whakarite i nga anga matua matatau puta noa i to maatau kaupapa, ma te huri noa i te rawa ritenga kotahi.
.bounce-and-zoom { hākoritanga: kf-bounce 3s ngawari ki roto, kf-zoom 3s rārangi; --kf-zoom-mai: 0; }
.bounce-and-slide { hākoritanga-tito: tāpiri; /* Ko nga pakiwaituhi e rua e whakamahi ana i te whakamaori */ hākoritanga: kf-bounce 3s ngawari ki roto, kf-kiriata-i roto i te 3s ngawari-waho; --kf-kiriata-mai: -200px; }
.elastic-in { hākoritanga: kf-elastic-i roto i te 2s ngawari ki roto-waho e rua; }
Tirohia te Pen Keyframes Tohu - Demo 7 [marau] na Amit Sheen. Tae noa ki tenei wa, kua kite matou me pehea e taea ai e matou te whakakotahi i nga papamahi ma te maamaa me te whai hua. Ae ra, ka hiahia pea koe ki te takawiri i nga mea kia pai ake ai nga hiahia o to kaupapa, engari kua hipokina e matou nga tauira o te maha o nga pakiwaituhi noa me nga keehi o ia ra. A, i runga i enei tohu anga matua kei te waahi, kei a maatau nga paraka hanga kaha mo te hanga pakiwaituhi riterite, ka taea te pupuri puta noa i te kaupapa katoa. Karekau he anga matua taarua, karekau he taupatupatu whanui mo te ao. He huarahi ma, watea ki te hapai i o tatou hiahia hākoritanga katoa. Engari ko te tino patai: Me pehea e tito tahi ai enei poraka hanga? Whakakotahitia Katoa Kua kite matou he ngawari te whakakotahi i nga tohu anga matua matua. Kaore e hiahiatia he mea motuhake engari ki te tautuhi i te hākoritanga tuatahi, te tautuhi i te tuarua, te tautuhi i nga taurangi ka hiahiatia, ka mutu. /* Muhani ki roto + kiriata ki roto */ .toast { hākoritanga: kf-moe-i roto i te 0.4s, kf-kiriata-i roto i te 0.4s pūtoru-bezier(0.34, 1.56, 0.64, 1); --kf-kiriata-mai: 0 40px; }
/* Topa roto + memeha ki roto */ .modal { hākoritanga: kf-moe-i roto i te 0.3s, kf-zoom 0.3s pūtoru-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-mai: 0.7; --kf-zoom-ki: 1; }
/* Kiriata ki roto + patere */ .whakamōhiotanga { hākoritanga: kf-kiriata-i roto i te 0.5s, kf-purse 1.2s ngawari ki roto-waho, katahi ano ka huri; --kf-kiriata-mai: -100px 0; --kf-pupuhi-tauine-mai: 0.95; --kf-purse-tauine-ki: 1.05; }
He pai te mahi o enei huinga na te mea he rereke nga taonga e whaaia ana e ia hākoritanga: te opacity, te huri (whakamaori/tauine), me era atu. Engari i etahi wa ka puta nga taupatupatu, me mohio tatou he aha me pehea te mahi ki a raatau. Ina ngana ana nga pakiwaituhi e rua ki te whakakorikori i te taonga kotahi — hei tauira, te tauine whakakorikori, te opacity whakakori ranei e rua — kare te hua e rite ki taau e tumanako ana. Ma te taunoa, kotahi anake o nga pakiwaituhi e mau ana ki taua rawa, koinei te mea whakamutunga i roto i te rarangi whakakorikori. He herenga tenei mo te whakahaere a CSS i nga pakiwaituhi maha i runga i te taonga kotahi. Hei tauira, kaore tenei e mahi i runga i te whakaaro na te mea ko te hākoritanga kf-pulse anake ka tono. .kino-combo { hākoritanga: kf-zoom 0.5s whakamua, kf-purse 1.2s mutunga kore; --kf-zoom-mai: 0.5; --kf-zoom-ki: 1.2; --kf-pupuhi-tauine-mai: 0.8; --kf-purse-scale-ki: 1.1; }
Tāpiritanga Hākoritanga Ko te huarahi tino ngawari me te tino tika ki te hapai i nga pakiwaituhi maha e pa ana ki te taonga kotahi ko te whakamahi i te taonga hanga-waituhi. I te tauira whakamutunga i runga ake nei, ka whakakapihia e te kf-pulse hākoritanga te hākoritanga kf-zoom, no reira kare tatou e kite i te topa tuatahi ka kore e eke ki te tauine e tumanakohia ana ki te 1.2. Ma te whakarite i te tito hākoritanga hei taapiri, ka kii atu matou ki te kaitirotiro kia whakakotahi nga pakiwaituhi e rua. Ma tenei e homai te hua e hiahia ana matou. .wahanga-rua { hākoritanga-tito: tāpiri; }
Tirohia te Pen Keyframes Tokens - Demo 8 [forked] na Amit Sheen. He pai tenei huarahi mo te nuinga o nga keehi e hiahia ana matou ki te whakakotahi i nga paanga ki runga i te taonga kotahi. He pai hoki ina hiahia tatou ki te whakakotahi i nga pakiwaituhi me nga uara taonga pateko. Hei tauira, ki te whai tatou i tetahi huānga e whakamahi ana i te taonga whakamaori ki te tuunga ki te waahi e hiahia ana tatou, katahi ka pirangi tatou ki te whakakorikori ki roto ki nga papamahi kf-kiriata-i roto, ka kitea he peke kino kaore he hanga hākoritanga. Tirohia te Pen Keyframes Tohu - Demo 9 [marau] na Amit Sheen. Na te whakakorikori-tito i whakatakotoria hei taapiri, he pai te whakakotahitanga o te hākoritanga me te mea o muahuri, no reira ka noho tonu te huānga me te whakakorikori kia rite ki te tumanako. Animation Stagger Ko tetahi atu huarahi ki te whakahaere i nga pakiwaituhi maha ko te "whakaheke" - ara, me timata te tuarua o nga pakiwaituhi i muri i te mutunga o te tuatahi. Ehara i te otinga e whai hua ana mo ia keehi, engari he mea whai hua ina he whakakorikori urunga ka whai muri i te hākoritanga tonu. /* ka memeha ki roto + te pupuhi opacity */ .whakamōhiotanga { hākoritanga: kf-fade-in 2s ngawari-waho, kf-purse 0.5s 2s whakangawari ki roto ki waho mutunga kore; --kf-pulse-opacity-ki: 0.5; }
Tirohia te Pen Keyframes Tokens - Demo 10 [forked] na Amit Sheen. Nga Take Whakatau Ko tetahi waahanga nui o nga pakiwaituhi e mahi tahi ana matou me te whakamahi i te taonga huri. I te nuinga o nga wa, he pai ake tenei. He painga ano mo te mahi na te mea ka taea e te huringa huringa te whakakorikori GPU. Engari ki te whakamahi tatou i nga huringa, me whakaae tatou he mea nui te raupapa e mahi ai tatou i a tatou huringa. He nui. I roto i o maatau papamahi i tenei wa, kua whakamahia e matou nga huringa takitahi. E ai ki nga tohu, ka whakamahia enei i nga wa katoa i roto i te raupapa pumau: tuatahi, ka whakamaoritia te huānga, ka huri, ka tauine. He tika tenei, a, ko ta te nuinga o tatou e tumanako ana. Heoi, ki te whakamahi tatou i te taonga huri, ko te raupapa e tuhia ai nga mahi ko te raupapa e whakamahia ana. I roto i tenei take, ki te neke tatou i te tahi mea 100 pika i runga i te X-tuaka ka huri i te reira i te 45 nekehanga, e kore e rite ki te huri tuatahi i te reira i te 45 nekehanga ka neke i te reira 100 pika. /* Tapawhā māwhero: Whakamāori tuatahi, kātahi ka huri */ .tauira-tetahi { huri: translateX(100px) takahuri(45deg); }
/* Tapawhā kākāriki: Tītaka tuatahi, kātahi ka whakamāori */ .tauira-rua { huri: huri(45deg) translateX(100px); }
Tirohia te Pen Keyframes Tokens - Demo 11 [forked] na Amit Sheen. Engari e ai ki te raupapa whakarereke, ka huri nga tangata katoa - nga mea katoa i whakamahia e matou mo nga tohu tohu matua - ka tupu i mua i nga mahi whakarereke. Ko te tikanga ko nga mea katoa i whakatakotoria e koe i roto i te taonga huri ka puta i muri i nga pakiwaituhi. Engari ki te whakatauhia e koe, hei tauira, te whakamaori me nga anga matua kf-spin, ka puta te whakamaori i mua i te hākoritanga. Poauau tonu?! Ka puta tenei ki nga ahuatanga ka taea e nga uara pateko te whakaputa hua rereke mo te hākoritanga rite, penei i te keehi e whai ake nei:
/* Hākoritanga noa mo nga kaihurihuri e rua */ .kaihuri { hākoritanga: kf-spin 1s linear infinite; }
/* Kaihuri mawhero: whakamaori i mua i te hurihanga (whakaahua takitahi) */ .spinner-mawhero { whakamaori: 100% 50%; }
/* Kaihuri kakariki: takahuri ka whakamaoritia (te raupapa mahi) */ .kaihuri-matomato { huri: whakamaori(100%, 50%); }
Tirohia te Pen Keyframes Tokens - Demo 12 [forked] na Amit Sheen. Ka kite koe ka whiwhi te kaitahuri tuatahi (mawhero) he whakamaori ka puta i mua i te hurihanga o te kf-spin, no reira ka neke tuatahi ki tona waahi ka huri. Ka whiwhi te kaitahuri tuarua (matomato) he mahi whakamaori() ka puta i muri i te huringa takitahi, no reira ka huri tuatahi te huānga, ka neke whakahoa ki tona koki o naianei, a ka whiwhi tatou i taua paanga orbit. Kao, ehara tenei i te pepeha. Koinei anake tetahi o nga mea e tika ana kia mohio tatou mo te CSS me te maumahara i te wa e mahi ana me te maha o nga pakiwaituhi me nga huringa maha. Ki te hiahiatia, ka taea hoki e koe te hanga i tetahi huinga taapiri o nga papamahi kf-spin-alt hei huri i nga huānga ma te whakamahi i te mahi hurihuri(). Motini Whakaheke A, i a maatau e korero ana mo etahi atu angamahi matua, kaore e taea e taatau te wareware i te whiringa "kaore he hākoritanga". Ko tetahi o nga painga nui o te whakamahi i nga tohu anga matua ko te urunga ka taea te tunu, a he tino ngawari te mahi. Ma te hoahoa i o maatau papa matua me te whai waahi ki te whakaaro, ka taea e matou te whakarite ko nga kaiwhakamahi e hiahia ana ki te whakaheke i te nekehanga ka whiwhi i te wheako ngawari, iti ake te whakararu, kaore he mahi taapiri, he taapiri waehere ranei. Ko te tino tikanga o te "Motion Whakaiti" ka taea te whakarereke i tetahi waahi mai i tetahi hākoritanga ki tetahi atu, mai i tetahi kaupapa ki tetahi kaupapa, engari koinei etahi mea nui hei maumahara: Wahangu ana i nga anga matua Ahakoa ka taea te whakamarumaru, te whakaroa ranei i etahi o nga pakiwaituhi, tera ano etahi ka ngaro katoa ina tonohia kia iti ake te nekehanga. He tauira pai nga mahi pakiwaituhi. Kia kore ai enei pakiwaituhi e rere i roto i te aratau nekehanga iti, ka taea noa e tatou te takai ki roto i te patai pāpāho e tika ana.
@media (he pai-whakaiti-nekehanga: kore-manakohia) { @keyfrmaes kf-purse { mai i { tauine: var(--kf-pulse-scale-mai, 1); opacity: var(--kf-pulse-opacity-mai, 1); } ki { tauine: var(--kf-pulse-scale-to, 1); opacity:var(--kf-pulse-opacity-ki, 1); } } }
Ma tenei ka whakarite ko nga kaiwhakamahi kua whakatauhia nga nekehanga-whakaiti-whakaiti kia kore e kite i te hākoritanga ka whiwhi wheako e rite ana ki o raatau hiahia. Inamata ki roto Ko etahi anga matua e kore e taea e tatou te tango noa, penei i nga pakiwaituhi tomokanga. Me huri te uara, me whakaohooho; ki te kore, karekau nga uara tika o te huānga. Engari i roto i te nekehanga iti, me tere tonu tenei whakawhitinga mai i te uara tuatahi. Hei whakatutuki i tenei, ka tautuhia e matou he huinga taapiri o nga anga matua ka peke tonu te uara ki te ahua mutunga. Ka noho enei hei papa matua taunoa. Na, ka taapirihia e matou nga anga matua i roto i te patai pāpāho mo nga nekehanga-whakaiti-whakaitihia ki te kore e pai, pera i te tauira o mua. /* pahū tonu mo te nekehanga iti */ @keyframes kf-zoom { mai, ki { tauine: var(--kf-zoom-ki, 1); } }
@media (he pai-whakaiti-nekehanga: kore-manakohia) { /* Nga anga matua topa taketake */ @keyframes kf-zoom { mai i { tauine: var(--kf-zoom-mai, 0.8); } ki { tauine: var(--kf-zoom-ki, 1); } } }
Ma tenei ara, ko nga kaiwhakamahi e pai ake ana ki te whakaheke i te nekehanga ka kite i te huānga ka puta tonu i tona ahuatanga whakamutunga, i te mea ka riro i nga tangata katoa te whakawhiti pakiwaituhi. Te Huarahi ngawari He take e hiahia ana matou ki te pupuri i etahi nekehanga, engari he ngawari ake, he marino atu i te pakiwaituhi taketake. Hei tauira, ka taea e tatou te whakakapi i te tomokanga tāwhana ki te memeha ngawari.
@keyframes kf-bounce { /* Muhani-ngohengohe mo te nekehanga iti */ }
@media (he pai-whakaiti-nekehanga: kore-manakohia) { @keyframes kf-bounce { /* Nga anga matua tāwhana taketake */ } }
Inaianei, ka mau tonu te ahua o nga kaiwhakamahi me te nekehanga iti, engari me te kore e kaha te neke o te pupuhi, te hākoritanga rapa ranei. I runga i nga poraka hangahanga, ko te patai e whai ake nei me pehea e uru ai ki roto i te rerenga mahi. Ko te tuhi i nga anga matua ngawari he mea kotahi, engari kia pono i roto i tetahi kaupapa nui, me whai etahi rautaki hei ako i te huarahi uaua. Nga Rautaki Whakatinana me nga Mahi Pai Ina he whare pukapuka totika o nga tohu anga matua, ko te tino wero me pehea te kawe mai ki nga mahi o ia ra.
Ko te whakawai ko te tuku i nga anga matua katoa ki roto i te wa kotahi ka kii kua whakatauhia te rapanga, engari i roto i nga mahi kua kitea e au ko nga hua pai ka ahu mai i te whakatamarikitanga. Tīmata ki ngā hākoritanga noa, pērā i te memeha, te kiriata rānei. He toa ngawari enei e whakaatu ana i te uara tonu me te kore e hiahia tuhi ano. Ko te whakaingoatanga tetahi atu take e tika ana kia arohia. Ma te whakamuamua, mokowāingoa rite tonu ka kitea ko ēhea ngā hākoritanga he tohu, ā, ko ēhea ngā mahi o te rohe. Ka aukati hoki i nga tukinga ohorere me te awhina i nga mema hou o te roopu ki te mohio ki te punaha tiritahi. He mea nui te tuhinga ki te waehere ake. Ahakoa he korero poto kei runga ake o ia tohu anga matua ka taea te whakaora i nga haora o te matapae. Ka taea e te kaiwhakawhanake te whakatuwhera i te konae tohu, te matawai mo te paanga e hiahiatia ana, me te kape tika i te tauira whakamahi ki roto i o raatau waahanga. Ko te ngawari te mea e whai hua ai tenei huarahi. Ma te whakakitenga i nga ahuatanga mohio, ka hoatu e matou he waahi ki nga roopu ki te urutau i te hākoritanga me te kore e pakaru te punaha. I te wa ano, ngana kia kaua e tino uaua. Whakaratohia nga puku e whai kiko ana me te pupuri i te toenga. Hei whakamutunga, maharatia te urunga. Ehara i te mea ko nga hākoritanga katoa e hiahia ana kia iti ake nga nekehanga, engari he maha nga mahi. Ko te tunu i roto i enei whakatikatika moata te tikanga kaore rawa tatou e whakahoki i a raatau i muri mai, ka whakaatu i te taumata o te manaakitanga ka kitea e o maatau kaiwhakamahi ahakoa kaore i whakahuahia.
I roto i taku wheako, ko te mahi i nga tohu anga matua hei waahanga o a maatau rerengamahi tohu tohu hoahoa te mea e mau tonu ai. I te wa e noho ana, ka mutu te ahua o nga ahuatanga motuhake ka uru ki te reo hoahoa, he toronga taiao mo te neke me te whakautu o te hua. Te takai Ka taea e nga pakiwaituhi tetahi o nga waahanga tino koa o te hanga atanga, engari ki te kore he hanganga, ka taea ano e ratou tetahi o nga puna nui o te pouri. Ma te mahi i nga anga matua hei tohu, ka tango koe i tetahi mea he tino poauau, he uaua ki te whakahaere, ka huri hei punaha marama, matapae. Ko te tino uara ehara i te tiaki noa i etahi rarangi waehere. I runga i te maia ka whakamahi koe i te memeha, te kiriata, te topa, te miro ranei, ka tino mohio koe ka pehea te mahi puta noa i te kaupapa. Kei roto i te ngawari ka puta mai i nga taonga ritenga me te kore he raruraru o nga rereketanga kore mutunga. Na kei roto i te whakaurunga i hangaia ki te turanga, kaua ki te taapiri heihe whakaaro i muri. Kua kite ahau i enei whakaaro e mahi ana i roto i nga roopu rereke me nga turanga waehere rereke, a he rite tonu te tauira. Kia noho nga tohu, ka mutu nga papa matua hei kohinga marara o nga tinihanga, ka noho hei waahanga o te reo hoahoa. Ka kaha ake te whakaaro o te hua, ka rite tonu, ka ora ake. Mena ka tangohia e koe tetahi mea mai i tenei tuhinga, me penei: e tika ana kia rite te tiaki me te hanganga o nga pakiwaituhi kua hoatu e matou ki nga tae, te momotuhi, me te mokowā. Ko te haumi iti i roto i nga tohu tohu matua ka utua i nga wa katoa ka neke to atanga.
