Alaivo sary an-tsaina izao: manatevin-daharana tetikasa vaovao ianao, midira ao amin'ny codebase, ary ao anatin'ny ora vitsivitsy voalohany dia mahita zavatra mahasosotra anao ianao. Miparitaka manerana ny stylesheets, mahita famaritana @keyframes marobe ianao ho an'ny sary mihetsika fototra mitovy. Effet fade-in telo samy hafa, fiovaovan'ny slide roa na telo, animation zoom vitsivitsy, ary sary mihetsika roa farafahakeliny roa samy hafa satria, maninona? @keyframes pulse { avy amin'ny { ambaratonga: 1; } ho { ambaratonga: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { ambaratonga: 1; } 10%, 40% { ambaratonga: 1.2; } }
Raha toa mahazatra ity toe-javatra ity dia tsy irery ianao. Amin'ny traikefako amin'ny tetikasa isan-karazany, ny iray amin'ireo fandresena haingana indrindra azoko atolotra dia ny fanamafisana sy ny fanamafisana ny keyframes. Lasa modely azo ianteherana izany ka andrasako izao fanadiovana izao ho iray amin'ireo asako voalohany amin'ny codebase vaovao. Ny Lojika ao ambadiky ny Chaos Tena misy dikany tokoa io fihemorana io rehefa mieritreritra an'izany ianao. Isika rehetra dia mampiasa sary mihetsika fototra mitovy amin'ny asantsika isan'andro: fade, slides, zooms, spins, ary ny fiantraikany mahazatra hafa. Tena mahitsy ireto sary mihetsika ireto, ary mora ny manangana famaritana haingana @keyframes mba hamitana ny asa. Raha tsy misy rafitra sarimiaina afovoany, ny mpamorona dia manoratra ho azy ireo keyframes ireo hatrany am-piandohana, tsy fantany fa efa misy ny sary mihetsika mitovy amin'izany any amin'ny toerana hafa ao amin'ny codebase. Tena mahazatra izany rehefa miasa amin'ny rafitra mifototra amin'ny singa (izay ataon'ny ankamaroantsika ankehitriny), satria matetika ny ekipa dia miara-miasa amin'ny faritra samihafa amin'ny fampiharana. Ny vokany? Animation chaos. Ny olana kely Ny olana miharihary indrindra amin'ny dika mitovy amin'ny keyframes dia ny fotoana lany amin'ny fampandrosoana sy ny tsy fahampian'ny kaody tsy ilaina. Ny famaritana keyframe marobe dia midika toerana maro havaozina rehefa miova ny fepetra. Mila manitsy ny fotoanan'ny sarimiainao manjavona? Mila mikaroka ny tranga rehetra manerana ny codebase ianao. Te-hanara-penitra ny asa fanalefahana? Mirary soa hahita ny karazany rehetra. Ity fampitomboana teboka fikojakojana ity dia mahatonga ny fanavaozana animation tsotra ho asa mandany fotoana. Ny olana lehibe kokoa Ity dika mitovy amin'ny keyframe ity dia miteraka olana saro-pady kokoa miafina ao ambanin'ny tany: ny fandrika maneran-tany. Na dia miasa miaraka amin'ny rafitra mifototra amin'ny singa aza, ny CSS keyframes dia voafaritra hatrany amin'ny sehatra manerantany. Midika izany fa ny keyframes rehetra dia mihatra amin'ny singa rehetra. foana. Eny, tsy voatery mampiasa ny kisary nofaritanao ao amin'ny singanao ny animation anao. Izy io dia mampiasa ny kisary farany mifanandrify amin'io anarana io izay nampidirina tao amin'ny sehatra manerantany. Raha mbola mitovy avokoa ny keyframes rehetra, dia mety ho toa olana kely izany. Saingy amin'ny fotoana tianao hanitsiana sary mihetsika ho an'ny tranga fampiasana manokana, dia sahirana ianao, na ratsy kokoa, ianao no mahatonga azy ireo. Na tsy mandeha ny animation-nao satria singa iray hafa nopetahana taorian'ny anao, nasoloina ny keyframes anao, na ny enta-mavesatry ny singanao dia lasa farany ary nanova tsy nahy ny fihetsiky ny animation ho an'ny singa hafa rehetra mampiasa ny anaran'ny keyframe, ary mety tsy ho tsapanao akory izany. Ity misy ohatra tsotra mampiseho ny olana: .component-one { /* endrika singa */ sarimiaina: pulse 1s mora miditra tsy misy fetra mifandimby; }
/* ity famaritana @keyframes ity dia tsy mandeha */ @keyframes pulse { avy amin'ny { ambaratonga: 1; } ho { ambaratonga: 1.1; } }
/* any aoriana any amin'ny kaody... */
.component-roa { /* endrika singa */ animation: pulse 1s mora miditra tsy misy fetra; }
/* ity keyframes ity dia mihatra amin'ny singa roa */ @keyframes pulse { 0%, 20%, 100% { ambaratonga: 1; } 10%, 40% { ambaratonga: 1.2; } }
Mitovy ny anaran'ny sary mihetsika, fa ny famaritana faharoa @keyframes dia misolo ny voalohany. Amin'izao fotoana izao, ny singa iray sy ny singa roa dia samy hampiasa ny rafitra fototra faharoa, na inona na inona singa mamaritra izay keyframes. Jereo ny Pen Keyframes Tokens - Demo 1 [forked] nataon'i Amit Sheen. Ny ampahany ratsy indrindra? Matetika izany dia miasa tsara amin'ny fampandrosoana eo an-toerana fa mipoitra amin'ny fomba mistery amin'ny famokarana rehefa manova ny filaharan'ny fametahana ny stylesheet anao ny dingana fananganana. Miafara amin'ny sarimiaina izay fihetsika tsy mitovy ianao arakaraka ny singa entina entina sy ny filaharana. Ny vahaolana: Unified Keyframes Mahagaga fa tsotra ny valin'io korontana io: ireo keyframes mavitrika efa voafaritra mialoha dia voatahiry ao anaty stylesheet iombonana. Raha tokony hamela ny singa tsirairay hamaritra ny sariny manokana, dia mamorona keyframes afovoany izay voarakitra tsara, mora azo.ampiasaina, azo tazomina ary mifanaraka amin'ny filana manokana amin'ny tetikasanao. Eritrereto ho token'ny keyframes izy io. Tahaka ny ampiasantsika famantarana ho an'ny loko sy ny elanelana, ary maro amintsika no efa mampiasa famantarana ho an'ny fananana animation, toy ny faharetana sy ny fanalefahana, nahoana raha mampiasa famantarana ho an'ny keyframes ihany koa? Ity fomba fiasa ity dia afaka mitambatra ho azy amin'ny rindranasan'ny mari-pamantarana endrika ankehitriny ampiasainao, sady mamaha ny olana kely (fandikana kaody) sy ny olana lehibe kokoa (fifandirana maneran-tany) indray mandeha. Ny hevitra dia mahitsy: mamorona loharanon'ny fahamarinana tokana ho an'ny sarimiaina iraisanay rehetra. Ity stylesheet ifampizarana ity dia mirakitra kisary novolavolaina tamim-pitandremana izay mandrakotra ny lamin'ny animation izay tena ampiasain'ny tetikasanay. Tsy maminavina intsony raha efa misy ny animation fade any amin'ny toerana misy antsika. Tsy misy fanerena tsy nahy intsony ny sary mihetsika avy amin'ny singa hafa. Fa izao no lakile: tsy sary mihetsika mametaka static fotsiny ireo. Izy ireo dia natao ho mavitrika sy azo amboarina amin'ny alàlan'ny toetran'ny CSS, mamela antsika hihazona ny tsy fitoviana nefa mbola manana fahafahana mampifanaraka ny sary mihetsika amin'ny tranga fampiasa manokana, toy ny hoe mila sary mihetsika "pulse" lehibe kokoa amin'ny toerana iray ianao. Manangana ny Token Keyframes voalohany Ny iray amin'ireo voankazo mihantona voalohany tokony horaisintsika dia ny animation "fade-in". Ao amin'ny iray amin'ireo tetikasako vao haingana, dia nahita famaritana fade-in mihoatra ny am-polony aho, ary eny, izy rehetra dia samy nampihetsi-po fotsiny ny opacity avy amin'ny 0 ka hatramin'ny 1. Noho izany, andao hamorona takelaka vaovao, antsoy hoe kf-tokens.css, ampidiro ao amin'ny tetikasantsika, ary apetraho ao anatin'izany ny frame keyframes misy fanehoan-kevitra mety. /* keyframes-tokens.css */
/* * Fade In - fade entrance animation * Fampiasana: animation: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { avy amin'ny { opacity: 0; } ho { opacity: 1; } }
Ity fanambarana tokana @keyframes ity dia manolo ireo sary mihetsika fade-in miparitaka manerana ny codebase. Madio, tsotra ary azo ampiharina eran-tany. Ary ankehitriny rehefa manana ity marika ity isika dia afaka mampiasa azy avy amin'ny singa rehetra manerana ny tetikasantsika: .modal { animation: kf-fade-in 0.3s ease-out; }
.tooltip { animation: kf-fade-in 0.2s mora-in-out; }
.fampandrenesana { animation: kf-fade-in 0.5s ease-out; }
Jereo ny Pen Keyframes Token - Demo 2 [forked] nataon'i Amit Sheen. Fanamarihana: Mampiasa prefix kf izahay amin'ny anaranay @keyframes rehetra. Ity prefix ity dia toy ny toerana misy anarana izay manakana ny fifandirana amin'ireo sary mihetsika efa misy ao amin'ny tetikasa ary manazava avy hatrany fa avy amin'ny rakitra famantarana keyframes ireo keyframes ireo. Manao Slide Dynamic Ny kf-fade-in keyframes dia miasa tsara satria tsotra ary tsy misy toerana hanakorontanana. Amin'ny sarimiaina hafa anefa, mila mihetsiketsika kokoa isika, ary eto isika dia afaka mampiasa ny herin'ny CSS manokana. Eto no tena mamiratra ny token'ny keyframes raha oharina amin'ny sary mihetsika static miparitaka. Andeha isika haka scenario mahazatra: animation "slide-in". Fa avy aiza? 100px avy eo ankavanana? 50% avy any ankavia? Tokony hiditra avy any an-tampon'ny efijery ve izy io? Sa mety mitsingevana avy any ambany? Be dia be ny fahafaha-manao, fa raha tokony hamorona keyframes misaraka ho an'ny tari-dalana tsirairay sy ny fiovaovana tsirairay, dia afaka manangana mari-pandrefesana iray izay mifanaraka amin'ny toe-javatra rehetra: /* * Slide In - animation slide directional * Ampiasao ny --kf-slide-from mba hifehezana ny tari-dalana * Default: miditra avy any ankavia (-100%) * Fampiasana: * Animation: kf-slide-in 0.3s ease-out; * --kf-slide-avy amin'ny: -100px 0; // misosa avy any ankavia * --kf-slide-avy amin'ny: 100px 0; // misosa avy eo ankavanana * --kf-slide-avy amin'ny: 0 -50px; // mitsambikina avy any ambony */
@keyframes kf-slide-in { avy amin'ny { adika: var(--kf-slide-from, -100% 0); } ho { adika: 0 0; } }
Amin'izao fotoana izao dia afaka mampiasa an'ity marika @keyframes tokana ity isika ho an'ny torolalana amin'ny alàlan'ny fanovana fotsiny ny --kf-slide-avy amin'ny fananana manokana: .sidebar { animation: kf-slide-in 0.3s mora mivoaka; /* Mampiasa sanda mahazatra: slids avy any ankavia */ }
.fampandrenesana { sary mihetsika: kf-slide-in 0.4s ease-out; --kf-slide-avy amin'ny: 0 -50px; /* mitsambikina avy any ambony */ }
.modal { animation: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-avy amin'ny: 50px 50px; /* mitsambikina avy any ambany havanana */ }
Ity fomba fiasa ity dia manome antsika flexibilité tsy mampino sady mitazona tsy miovaova. Fanambarana keyframe iray, fahafahana tsy manam-petra. Jereo ny Pen Keyframes Tokens - Demo 3 [forked] nataon'i Amit Sheen. Ary raha te-hanao moramora kokoa ny sarimiainay izahay, ahafahan'ny vokatra "miala" koa, dia afakaampio fotsiny --kf-slide-to fananana manokana, mitovy amin'izay ho hitantsika ao amin'ny fizarana manaraka. Bidirectional Zoom Keyframes Sarimihetsika mahazatra iray hafa azo adika amin'ny tetikasa dia ny vokatry ny "zoom". Na fanamafisam-peo manjavozavo ho an'ny hafatra toast, zoom-in manaitra ho an'ny modals, na fiantraikany midina malefaka ho an'ny lohateny, dia misy sary mihetsika zoom eny rehetra eny. Raha tokony hamorona keyframes misaraka ho an'ny sandan'ny mari-pamantarana tsirairay, dia andao isika hanangana andiana kf-zoom keyframes:
/* * Zoom - sary mihetsika * Mampiasà --kf-zoom-from sy --kf-zoom-to hifehezana ny soatoavina mizana * Default: miakatra hatramin'ny 80% ka hatramin'ny 100% (0.8 hatramin'ny 1) * Fampiasana: * sarimiaina: kf-zoom 0.2s; * --kf-zoom-avy amin'ny: 0.5; --kf-zoom-to: 1; // zoom manomboka amin'ny 50% ka hatramin'ny 100% * --kf-zoom-avy amin'ny: 1; --kf-zoom-to: 0; // zoom manomboka amin'ny 100% ka hatramin'ny 0% * --kf-zoom-avy amin'ny: 1; --kf-zoom-to: 1.1; // zoom avy amin'ny 100% ka hatramin'ny 110% */
@keyframes kf-zoom { avy amin'ny { maridrefy: var(--kf-zoom-avy amin'ny, 0.8); } ho { mizana: var(--kf-zoom-to, 1); } }
Amin'ny famaritana iray dia afaka mahatratra ny fiovaovan'ny zoom ilaintsika isika: .toast { animation: kf-slide-in 0.2s, kf-zoom 0.4s mora; --kf-slide-avy amin'ny: 0 100%; /* mitsambikina avy any ambony */ /* Mampiasa zoom mahazatra: mizana manomboka amin'ny 80% ka hatramin'ny 100% */ }
.modal { animation: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-avy amin'ny: 0; /* zoom manaitra manomboka amin'ny 0% ka hatramin'ny 100% */ }
.heading { animation: kf-fade-in 2s, kf-zoom 2s mora miditra; --kf-zoom-avy amin'ny: 1.2; --kf-zoom-to: 0.8; /* midina moramora */ }
Ny default amin'ny 0.8 (80%) dia miasa tsara ho an'ny ankamaroan'ny singa UI, toy ny hafatra sy karatra toast, nefa mbola mora amboarina amin'ny tranga manokana. Jereo ny Pen Keyframes Token - Demo 4 [forked] nataon'i Amit Sheen. Mety nahatsikaritra zavatra mahaliana ianao tamin'ireo ohatra vao haingana: nanambatra sary mihetsika izahay. Ny iray amin'ireo tombony lehibe amin'ny fiaraha-miasa amin'ny token'ny @keyframes dia ny hoe izy ireo dia natao mba hitambatra tsara amin'ny tsirairay. Natao fanahy iniana fa tsy kisendrasendra io fandrafetana malama io. Hifanakalozy hevitra amin'ny antsipiriany bebe kokoa isika any aoriana, ao anatin'izany ny toerana mety hahatonga azy ireo ho olana, fa ny ankamaroan'ny fitambarana dia tsotra sy mora ampiharina. Fanamarihana: Raha nanoratra ity lahatsoratra ity aho, ary angamba noho ny nanoratako azy, dia hitako fa nieritreritra indray ny hevitra manontolo momba ny sary mihetsika. Miaraka amin'ireo fandrosoana vao haingana rehetra amin'ny CSS, mbola mila azy ireo ve isika? Soa ihany fa nandinika ireo fanontaniana ireo i Adam Argyle ary naneho izany tamim-pahakingana tao amin'ny bilaoginy. Tsy mifanohitra amin'izay voasoratra eto izany, fa manolotra fomba fiasa mendrika hodinihina, indrindra raha miantehitra mafy amin'ny sarimiaina fidirana ny tetikasanao. Animation mitohy Raha mitranga indray mandeha ary mijanona ny sary mihetsika, toy ny "fade", "slide", ary "zoom", dia mihodinkodina mandritra ny fotoana tsy voafetra ny animation mitohy mba hisarihana ny saina na hanondro ny hetsika mitohy. Ny sarimiaina roa mitohy matetika hitako dia ny "spin" (ho an'ny tondro fandefasana entana) sy ny "pulse" (ho fanasongadinana singa manan-danja). Ireo sarimiaina ireo dia manolotra fanamby miavaka amin'ny famoronana token'ny keyframes. Tsy toy ny sarimiaina fidirana izay matetika mandeha amin'ny fanjakana iray mankany amin'ny iray hafa, ny sarimiaina mitohy dia mila amboarina be amin'ny fomba fihetsiny. Ny Dokotera Spin Ny tetikasa tsirairay dia toa mampiasa sary mihetsika maromaro. Ny sasany mihodina manaraka ny fihodin'ny famantaranandro, ny hafa mifanohitra amin'ny famantaranandro. Ny sasany manao fihodinana 360 degre tokana, ny hafa kosa manao fihodinana maromaro mba hahazoana vokatra haingana kokoa. Raha tokony hamorona keyframes misaraka ho an'ny fiovaovana tsirairay, dia andao isika hanorina fihodinana moramora iray izay mitantana ny toe-javatra rehetra:
/* * Animation fihodinana - fihodinana * Mampiasà --kf-spin-from sy --kf-spin-to mba hifehezana ny elanelana fihodinana * Mampiasà --kf-spin-turns hifehezana ny habetsahan'ny fihodinana * Default: mihodina manomboka amin'ny 0deg ka hatramin'ny 360deg (fihodinana 1 feno) * Fampiasana: * animation: kf-spin 1s linear infinite; * --kf-mihodina: 2; // 2 fihodinana feno * --kf-spin-avy amin'ny: 0deg; --kf-mihodina-hatramin'ny: 180deg; // fihodinana antsasaky * --kf-spin-avy amin'ny: 0deg; --kf-spin-ho: -360deg; // manohitra ny famantaranandro */
@keyframes kf-spin { avy amin'ny { ahodina: var(--kf-spin-avy, 0deg); } ho { rotate: calc(var(--kf-spin-avy, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Amin'izao fotoana izao dia afaka mamorona variation spin izay tiantsika isika:
.loading-spinner { animation: kf-spin 1s linear infinite; /* Mampiasa default: mihodina manomboka amin'ny 0deg ka hatramin'ny 360deg */ }
.fast-loader { sarimiaina: kf-spin 1.2s mifandimby tsy misy fetra; --kf-mihodina: 3; /* Fihodinana feno 3 isaky ny lalana isaky ny tsingerina*/ }
.step-reverse { animation: kf-spin 1.5s dingana (8) tsy manam-petra; --kf-spin-ho: -360deg; /* mifanohitra amin'ny famantaranandro */ }
.subtle-wiggle { sarimiaina: kf-spin 2s mifandimby manamora ny fidirana tsy manam-petra; --kf-spin-avy: -16deg; --kf-mihodina-hatramin'ny: 32deg; /* mihozongozona 36 degre: eo anelanelan'ny -18deg sy +18deg */ }
Jereo ny Pen Keyframes Tokens - Demo 5 [forked] nataon'i Amit Sheen. Ny hatsaran'ity fomba fiasa ity dia ny fiasan'ny keyframes mitovy amin'ny fametahana spinners, kisary mihodinkodina, vokatry ny wiggle, ary na dia sarimiaina maromaro mihodikodina aza. Ny Pulse Paradox Sarotra kokoa ny sarimiaina Pulse satria afaka "manodina" toetra samihafa izy ireo. Ny sasany manodina ny maridrefy, ny hafa mipoitra ny tsy fahampian-tsakafo, ary ny sasany amin'ny lokon'ny loko toy ny famirapiratana na ny saturation. Raha tokony hamorona keyframes misaraka ho an'ny fananana tsirairay isika, dia afaka mamorona keyframes izay miasa amin'ny fananana CSS rehetra. Ity misy ohatra iray amin'ny keyframe pulse miaraka amin'ny safidy mizana sy opacity:
/* * Pulse - sary mihetsika * Mampiasà --kf-pulse-scale-from sy --kf-pulse-scale-to hifehezana ny haavon'ny maridrefy * Mampiasà --kf-pulse-opacity-avy amin'ny sy --kf-pulse-opacity-to mba hifehezana ny isan'ny opacity * Default: tsy misy pulse (sanda rehetra 1) * Fampiasana: * sarimiaina: kf-pulse 2s mifandimby tsy misy fetra; * --kf-pulse-scale-avy amin'ny: 0.95; --kf-pulse-scale-to: 1.05; //Scale pulse * --kf-pulse-opacity-avy amin'ny: 0.7; --kf-pulse-opacity-to: 1; // opacity pulse */
@keyframes kf-pulse { avy amin'ny { mizana: var(--kf-pulse-scale-avy, 1); opacity: var(--kf-pulse-opacity-avy, 1); } ho { mizana: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Izany dia mamorona pulse mora azo izay afaka mamelona fananana maro: .call-to-action { animation: kf-pulse 0.6s mifandimby tsy manam-petra; --kf-pulse-opacity-avy amin'ny: 0.5; /* pulse opacity */ }
.notification-dot { sarimiaina: kf-pulse 0.6s mifandimby tsy misy fetra; --kf-pulse-scale-avy amin'ny: 0.9; --kf-pulse-scale-to: 1.1; /* pulse mizana */ }
.text-highlight { sarimiaina: kf-pulse 1.5s manamaivana tsy manam-petra; --kf-pulse-scale-avy amin'ny: 0.8; --kf-pulse-opacity-avy amin'ny: 0.2; /* maridrefy sy pulse opacity */ }
Jereo ny Pen Keyframes Tokens - Demo 6 [forked] nataon'i Amit Sheen. Ity kf-pulse keyframe tokana ity dia afaka mitantana ny zava-drehetra manomboka amin'ny fisarihana an-kolaka ka hatramin'ny fampisongadinana manaitra, nefa mora amboarina. Fanamaivanana mandroso Iray amin'ireo zava-dehibe amin'ny fampiasana mari-pamantarana keyframes ny fomba mora ny fanitarana ny tranomboky sarimiainay ary manome vokatra izay tsy hanahirana ny ankamaroan'ny mpamorona ny hanoratra hatramin'ny voalohany, toy ny elastika na ny bounce. Ity misy ohatra iray amin'ny mari-pamantarana keyframes "bounce" tsotra izay mampiasa --kf-bounce-from fananana manokana hifehezana ny haavon'ny hitsambikina. /* * Animation fidirana mitsambikina - mitsambikina * Mampiasà --kf-bounce-from mba hifehezana ny haavon'ny hitsambikina * Default: mitsambikina avy amin'ny 100vh (eo amin'ny efijery) * Fampiasana: * Animation: kf-bounce 3s mora; * --kf-bounce-avy amin'ny: 200px; // mitsambikina avy amin'ny haavon'ny 200px */
@keyframes kf-bounce { 0% { adika: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { adika: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { adika: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { adika: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { adika: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { adika: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { adika: 0 calc(var(--kf-bounce-avy, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { adika: 0 0; animation-time-function: ease-out; } }
Ny sary mihetsika toy ny "elastika" dia somary sarotra kokoa noho ny kajikajy ao anatin'ny keyframes. Mila mamaritra ny --kf-elastic-from-X sy --kf-elastic-from-Y isika (samy tsy voatery), ary miaraka izy ireo dia mamela antsika hamorona fidirana elastika avy amin'ny teboka rehetra eo amin'ny efijery.
/* * Elastic In - sary mihetsika fidirana elastika * Ampiasao ny --kf-elastic-from-X sy --kf-elastic-from-Y mba hifehezana ny toerana fanombohana * Default: miditra avy any ambony afovoany (0, -100vh) * Fampiasana: * Animation: kf-elastika-in 2s mora-in-out izy roa; * --kf-elastika-avy amin'ny-X: -50px; * --kf-elastika-avy amin'ny-Y: -200px; // miditra avy amin'ny (-50px, -200px) */
@keyframes kf-elastika-in { 0% { adika: calc(var(--kf-elastika-avy amin'ny-X, -50vw) * 1) calc(var(--kf-elastika-avy amin'ny-Y, 0px) * 1); }
16% { adika: calc(var(--kf-elastika-avy amin'ny-X, -50vw) * -0.3227) calc(var(--kf-elastika-avy amin'ny-Y, 0px) * -0.3227); }
28% { adika: calc(var(--kf-elastika-avy-X, -50vw) * 0.1312)calc(var(--kf-elastika-avy amin'ny-Y, 0px) * 0.1312); }
44% { adika: calc(var(--kf-elastika-avy amin'ny-X, -50vw) * -0.0463) calc(var(--kf-elastika-avy amin'ny-Y, 0px) * -0.0463); }
59% { adika: calc(var(--kf-elastika-avy amin'ny-X, -50vw) * 0.0164) calc(var(--kf-elastika-avy amin'ny-Y, 0px) * 0.0164); }
73% { adika: calc(var(--kf-elastika-avy amin'ny-X, -50vw) * -0.0058) calc(var(--kf-elastika-avy amin'ny-Y, 0px) * -0.0058); }
88% { adika: calc(var(--kf-elastika-avy amin'ny-X, -50vw) * 0.0020) calc(var(--kf-elastika-avy amin'ny-Y, 0px) * 0.0020); }
100% { adika: 0 0; } }
Ity fomba fiasa ity dia manamora ny fampiasana sy ny fanamboarana ireo keyframes efa mandroso manerana ny tetikasantsika, amin'ny alalan'ny fanovana fananana manokana tokana.
.bounce-and-zoom { animation: kf-bounce 3s mora miditra, kf-zoom 3s linear; --kf-zoom-avy amin'ny: 0; }
.bounce-and-slide { animation-composition: add; /* Samy mampiasa dikanteny */ animation: kf-bounce 3s mora miditra, kf-slide-in 3s mora mivoaka; --kf-slide-avy amin'ny: -200px; }
.elastic-in { animation: kf-elastika-in 2s mora-in-out izy roa; }
Jereo ny Pen Keyframes Tokens - Demo 7 [forked] nataon'i Amit Sheen. Hatramin'izao, hitantsika ny fomba ahafahantsika manambatra ny keyframes amin'ny fomba marani-tsaina sy mahomby. Mazava ho azy, mety te-hanova zavatra ianao mba hifanaraka kokoa amin'ny filan'ny tetikasanao, saingy nandrakotra ohatra momba ny sary mihetsika mahazatra sy tranga fampiasa andavanandro izahay. Ary miaraka amin'ireo mari-pamantarana keyframes ireo, manana rafitra matanjaka izahay ankehitriny mba hamoronana sary mihetsika tsy miovaova sy azo kolokoloina manerana ny tetikasa manontolo. Tsy misy rindran-damosina mitovitovy intsony, tsy misy fifandirana maneran-tany intsony. Fomba madio sy mety amin'ny fikarakarana ny filantsika rehetra amin'ny animation. Fa ny tena fanontaniana dia ny hoe: Ahoana no fomba handrafetana an'ireo singa fototra ireo? Mampiray izany rehetra izany Hitanay fa tsotra ny fampifangaroana ireo famantarana fototra fototra. Tsy mila zavatra manokana isika fa mamaritra ny animation voalohany, mamaritra ny faharoa, mametraka ny fari-piainana araka izay ilaina, ary dia izay. /* 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-avy amin'ny: 0 40px; }
/* 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-avy amin'ny: 0.7; --kf-zoom-to: 1; }
/* Midira ao + pulse */ .fampandrenesana { animation: kf-slide-in 0.5s, kf-pulse 1.2s mifandimby miditra tsy misy fetra; --kf-slide-avy amin'ny: -100px 0; --kf-pulse-scale-avy amin'ny: 0.95; --kf-pulse-scale-to: 1.05; }
Miasa tsara ireo fampifangaroana ireo satria ny sarimiaina tsirairay dia mikendry fananana samy hafa: ny opacity, ny fiovan'ny toetr'andro (dika / ny mari-pamantarana), sns. Saingy indraindray misy ny fifandirana, ary mila mahafantatra ny antony sy ny fomba hiatrehana izany isika. Rehefa misy sarimiaina roa manandrana mamelona ny fananana iray ihany — ohatra, na ny mari-pandrefesana na ny tsy fahita firy — ny vokatra dia tsy ho araka izay antenainao. Amin'ny alàlan'ny default, iray amin'ireo sary mihetsika ihany no tena ampiharina amin'io fananana io, izay ny farany amin'ny lisitry ny animation. Famerana ny fomba fitantanana ny sary mihetsika marobe amin'ny fananana iray ihany ny CSS. Ohatra, tsy mandeha araka ny tokony ho izy izany satria ny animation kf-pulse ihany no mihatra. .bad-combo { animation: kf-zoom 0.5s mandroso, kf-pulse 1.2s mifandimby tsy manam-petra; --kf-zoom-avy amin'ny: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-avy amin'ny: 0.8; --kf-pulse-scale-to: 1.1; }
Fanampiana animation Ny fomba tsotra indrindra sy mivantana indrindra hifehezana ireo sary mihetsika maro izay misy fiantraikany amin'ny fananana iray ihany dia ny fampiasana ny fananana animation-composition. Ao amin'ny ohatra farany etsy ambony, ny animation kf-pulse dia manolo ny animation kf-zoom, ka tsy ho hitantsika ny zoom voalohany ary tsy hahazo ny mari-pahaizana andrasana amin'ny 1.2. Amin'ny alalan'ny fametrahana ny animation-composition ho ampiana, dia miteny amin'ny navigateur izahay mba hanambatra ireo animation roa. Izany dia manome antsika ny vokatra tadiavintsika. .component-roa { animation-composition: add; }
Jereo ny Pen Keyframes Tokens - Demo 8 [forked] nataon'i Amit Sheen. Ity fomba fiasa ity dia miasa tsara amin'ny ankamaroan'ny tranga izay tiantsika hampiarahana ny fiantraikany amin'ny fananana iray ihany. Tena ilaina koa izany rehefa mila manambatra ny sary mihetsika miaraka amin'ny sandan'ny fananana static. Ohatra, raha manana singa mampiasa ny fananana fandikan-teny isika mba hametrahana azy amin'ny toerana tena tiantsika, ary avy eo dia tiantsika ny hamelona azy amin'ny kf-slide-in keyframes, dia mahazo mitsambikina tsy misy animation-composition. Jereo ny Pen Keyframes Token - Demo 9 [forked] nataon'i Amit Sheen. Miaraka amin'ny animation-composition napetraka mba hanampiana, ny animation dia mitambatra tsara amin'ny efa misymiova, noho izany dia mijanona eo amin'ny toerany ilay singa ary mihetsiketsika araka ny efa nampoizina. Animation Stagger Ny fomba iray hafa amin'ny fikarakarana sary mihetsika maro dia ny "mihozongozona" azy ireo - izany hoe, manomboka kely ny animation faharoa rehefa vita ny voalohany. Tsy vahaolana mahomby ho an'ny tranga rehetra izany, fa ilaina kosa rehefa misy animation fidirana arahin'ny animation mitohy. /* fade in + opacity pulse */ .fampandrenesana { animation: kf-fade-in 2s ease-out, kf-pulse 0,5s 2s mifandimby tsy misy fetra ny fampidiran-dresaka; --kf-pulse-opacity-to: 0.5; }
Jereo ny Pen Keyframes Tokens - Demo 10 [forked] nataon'i Amit Sheen. Laharam-pilaminana Ny ampahany betsaka amin'ny sary mihetsika iarahanay miasa dia mampiasa ny fananana transform. Amin'ny ankabeazan'ny toe-javatra dia mety kokoa fotsiny izany. Manana tombony amin'ny fampisehoana ihany koa izy io satria ny sary mihetsika manova dia azo atao amin'ny GPU. Fa raha mampiasa transforms isika dia mila manaiky fa ny filaharan'ny fanovana ataontsika no zava-dehibe. betsaka. Ao amin'ny keyframes hatramin'izao, dia nampiasa fanovana tsirairay izahay. Araka ny toromarika, ireo dia ampiharina amin'ny filaharana raikitra: voalohany, ny singa dia mahazo fandikana, avy eo ahodina, avy eo mizana. Misy dikany izany ary izany no andrasan'ny ankamaroantsika. Na izany aza, raha mampiasa ny fananana fanovana isika, ny filaharan'ny fanoratana ny asa dia ny filaharan'ny fampiharana azy. Amin'ity tranga ity, raha mamindra zavatra 100 teboka eo amin'ny X-axis isika ary manodina azy amin'ny 45 degre, dia tsy mitovy amin'ny voalohany manodina azy amin'ny 45 degre ary avy eo mamindra azy 100 pixels. /* Efamira mavokely: Adika aloha, avy eo ahodina */ .example-one { manova: translateX(100px) rotate(45deg); }
/* Efajoro maitso: Ahodina aloha, dia handika */ .ohatra-roa { manova: rotate(45deg) translateX(100px); }
Jereo ny Pen Keyframes Tokens - Demo 11 [forked] nataon'i Amit Sheen. Saingy araka ny filaharan'ny fanovana, ny fiovan'ny tsirairay — izay rehetra nampiasanay ho an'ny mari-pamantarana fototra — dia mitranga alohan'ny fiasan'ny fanovana. Midika izany fa izay rehetra apetrakao amin'ny fananana fanovana dia hitranga aorian'ny sary mihetsika. Fa raha mametraka, ohatra, ny fandikana miaraka amin'ny kf-spin keyframes, ny dikanteny dia hitranga alohan'ny animation. Mbola misavoritaka?! Izany dia mitarika amin'ny toe-javatra izay ahafahan'ny soatoavina static miteraka vokatra hafa ho an'ny sarimiaina iray ihany, toy ity tranga manaraka ity:
/* Animation mahazatra ho an'ny spinners roa */ .spinner { animation: kf-spin 1s linear infinite; }
/* Spinner mavokely: adika alohan'ny fihodinana (fiovan'ny tsirairay) */ .spinner-mavokely { fandikana: 100% 50%; }
/* Spinner maitso: ahodina avy eo adika (filaminana) */ .spinner-green { manova: mandika (100%, 50%); }
Jereo ny Pen Keyframes Tokens - Demo 12 [forked] nataon'i Amit Sheen. Azonao atao ny mahita fa ny spinner voalohany (mavokely) dia mahazo fandikan-teny izay mitranga alohan'ny fihodinan'ny kf-spin, ka mifindra amin'ny toerany aloha izy ary avy eo mihodina. Ny spinner faharoa (maitso) dia mahazo asa fandikan-teny () izay mitranga aorian'ny fiovan'ny tsirairay, ka mihodina aloha ilay singa, avy eo dia mihetsika mifanandrify amin'ny zorony ankehitriny, ary mahazo io fiantraikany midadasika io. Tsia, tsy bibikely ity. Iray amin'ireo zavatra tokony ho fantatsika momba ny CSS izany ary tadidio rehefa miasa miaraka amin'ny sary mihetsika na fanovana maro. Raha ilaina dia azonao atao koa ny mamorona andiana kf-spin-alt keyframes fanampiny izay manodina singa amin'ny fampiasana ny rotate(). Reduced Motion Ary raha miresaka momba ny keyframes hafa isika, dia tsy azontsika odian-tsy hita ny safidy "tsy misy animation". Ny iray amin'ireo tombony lehibe indrindra amin'ny fampiasana token'ny keyframes dia ny fahafahana miditra, ary tena mora ny manao izany. Amin'ny alalan'ny famolavolana ny keyframes miaraka amin'ny fahafahana miditra ao an-tsaina, dia afaka manome antoka izahay fa ireo mpampiasa izay tia mihetsika mihena dia mahazo traikefa malefaka sy tsy dia manelingelina, tsy misy asa fanampiny na dika mitovy. Ny tena dikan'ny hoe "Reduced Motion" dia mety miova kely avy amin'ny sarimiaina iray mankany amin'ny iray hafa, ary avy amin'ny tetikasa mankany amin'ny tetikasa, saingy ireto misy teboka manan-danja vitsivitsy tokony hotadidina: Mamono Keyframes Na dia mety ho malefaka na miadana aza ny sary mihetsika sasany, misy kosa ireo izay tokony hanjavona tanteraka rehefa angatahana ny hetsika mihena. Ohatra tsara ny animation pulse. Mba hahazoana antoka fa tsy mandeha amin'ny fomba mihetsika mihena ireo sary mihetsika ireo, dia azontsika atao ny mametaka azy ireo amin'ny fangatahana media mety.
@media (fihetseham-po-reduced: tsisy preference) { @keyfrmaes kf-pulse { avy amin'ny { mizana: var(--kf-pulse-scale-avy, 1); opacity: var(--kf-pulse-opacity-avy, 1); } ho { mizana: var(--kf-pulse-scale-to, 1); opacity:var(--kf-pulse-opacity-to, 1); } } }
Izany dia miantoka fa ireo mpampiasa izay nametraka prefers-reduced-motion mba hihena dia tsy hahita ny animation ary hahazo traikefa mifanaraka amin'ny safidiny. Instant In Misy kisary tsy azo esorina tsotra izao, toy ny sarimiaina fidirana. Tsy maintsy miova ny sandany, tsy maintsy mihetsiketsika; raha tsy izany dia tsy hanana ny sanda marina ilay singa. Saingy amin'ny hetsika mihena dia tokony ho eo noho eo io fifindrana avy amin'ny sanda voalohany io. Mba hanatratrarana izany, dia hamaritra andiana keyframes fanampiny izay mitsambikina avy hatrany ny sanda mankany amin'ny fanjakana farany. Ireo no lasa keyframes default ho antsika. Avy eo, ampianay ny keyframes mahazatra ao anatin'ny fangatahan'ny media ho an'ny hetsika midina kokoa napetraka ho tsy misy safidy, toy ny tamin'ny ohatra teo aloha. /* mipoitra avy hatrany mba hihena ny hetsika */ @keyframes kf-zoom { avy amin'ny { mizana: var(--kf-zoom-to, 1); } }
@media (fihetseham-po-reduced: tsisy preference) { /* Fandefasana keyframe zoom tany am-boalohany */ @keyframes kf-zoom { avy amin'ny { maridrefy: var(--kf-zoom-avy amin'ny, 0.8); } ho { mizana: var(--kf-zoom-to, 1); } } }
Amin'izany fomba izany, ireo mpampiasa izay tia mihetsika mihena dia hahita ilay singa hiseho eo no ho eo amin'ny endriny farany, raha ny olon-drehetra kosa dia mahazo ny fifindrana mihetsika. Ny fomba malefaka Misy toe-javatra izay tena tiantsika ny hihazona hetsika sasany, saingy malefaka sy tony kokoa noho ny sary mihetsika tany am-boalohany. Ohatra, afaka manolo ny fidirana mitsambikina amin'ny fade-in malefaka isika.
@keyframes kf-bounce { /* Fade-in malefaka ho an'ny hetsika mihena */ }
@media (fihetseham-po-reduced: tsisy preference) { @keyframes kf-bounce { /* Fitsipika fototra miboiboika */ } }
Amin'izao fotoana izao, ireo mpampiasa manana fihetsika mihen-danja dia mbola mahazo fahatsapana ny bika aman'endriny, saingy tsy misy hetsika mahery vaika amin'ny bitsika na elastika. Miaraka amin'ny trano fanorenana, ny fanontaniana manaraka dia ny fomba hahatonga azy ireo ho anisan'ny tena workflow. Ny fanoratana keyframes mora vidy dia zavatra iray, fa ny fanaovana azy ireo azo itokisana amin'ny tetikasa lehibe dia mitaky paikady vitsivitsy izay tsy maintsy nianarako tamin'ny fomba sarotra. Paikady fampiharana sy fomba fanao tsara indrindra Raha vantany vao manana tranomboky matanjaka misy marika keyframes isika, ny tena fanamby dia ny fomba hitondrana azy ireo amin'ny asa andavanandro.
Ny fakam-panahy dia ny manary ny keyframes rehetra indray mandeha ary manambara fa voavaha ny olana, saingy amin'ny fampiharana dia hitako fa ny vokatra tsara indrindra dia avy amin'ny fananganana tsikelikely. Atombohy amin'ny sary mihetsika mahazatra indrindra, toy ny fade na slide. Fandresena mora ireo izay mampiseho lanja eo noho eo nefa tsy mila fanoratana lehibe. Ny fanomezana anarana dia teboka iray hafa tokony hojerena. Ny prefix na namespace tsy miovaova dia mampiseho mazava tsara hoe iza amin'ireo sary mihetsika no famantarana ary iza avy eo an-toerana. Misoroka ny fifandonana tsy nahy ihany koa izy io ary manampy ireo mpikambana vaovao hamantatra ny rafitra ifampizarana indray mandeha. Ny antontan-taratasy dia manan-danja toy ny code. Na dia fanehoan-kevitra fohy eo ambonin'ny token'ny keyframes tsirairay aza dia afaka mamonjy ora maminavina any aoriana. Ny mpamorona dia tokony ho afaka manokatra ny rakitra famantarana, mijery ny vokatra ilainy, ary mandika mivantana ny lamina ampiasaina amin'ny singany. Ny flexibilité no mahatonga ity fomba fiasa ity ho mendrika ny ezaka. Amin'ny alàlan'ny fampiharihariana ireo toetra mahazatra mahazatra, dia manome efitrano ny ekipa izahay mba hampifanaraka ny sarimiaina nefa tsy handrava ny rafitra. Etsy ankilany, miezaha tsy hanasarotra be loatra. Omeo ny bokotra manan-danja ary tazony ny hevitra sisa. Farany, tadidio ny fahafahana miditra. Tsy ny sarimiaina rehetra no mila safidy mihetsika mihena, fa maro no manao izany. Ny fanaovana an'ireny fanitsiana ireny aloha dia midika fa tsy mila mamerina azy ireo intsony isika any aoriana, ary mampiseho ambaratongam-pitandremana ho hitan'ny mpampiasa antsika izany na dia tsy manonona izany mihitsy aza izy ireo.
Raha ny traikefako, ny fitondrana ny token'ny keyframes ho ampahany amin'ny rindran-tsarin'ny mari-pandrafetana no mahatonga azy ireo hifikitra. Rehefa tafapetraka izy ireo, dia mijanona ho toy ny vokatra manokana izy ireo ary lasa ampahany amin'ny fiteny famolavolana, fanitarana voajanahary amin'ny fomba mihetsika sy mamaly ny vokatra. Famaranana Ny animation dia mety ho iray amin'ireo ampahany mahafaly indrindra amin'ny fananganana fifandraisana, saingy raha tsy misy rafitra, dia mety ho lasa iray amin'ireo loharanon'ny fahasorenana lehibe indrindra. Amin'ny fandraisanao ny keyframes ho toy ny famantarana, dia maka zavatra izay matetika mikorontana sy sarotra ny mitantana ary mamadika azy ho rafitra mazava sy azo vinaniana. Ny tena sanda dia tsy amin'ny fitahirizana andalana vitsivitsy fotsiny. Amin'ny fahatokisana fa rehefa mampiasa fade, slide, zoom, na spin ianao, dia fantatrao tsara ny fitondran-tenany manerana ny tetikasa. Ao amin'ny flexibility izay avy amin'ny fananana manokana tsy misy korontana amin'ny fiovaovana tsy misy farany. Ary izany dia ao amin'ny fidirana naorina ao amin'ny fototra fa tsy nanampy hoeritreritra iray. Hitako fa miasa amin'ny ekipa samihafa sy codebase samihafa ireo hevitra ireo, ary mitovy foana ny lamina. Raha vao tafapetraka ny mari-pamantarana, ny keyframes dia mijanona ho fanangonana fika miparitaka ary lasa ampahany amin'ny fiteny famolavolana. Izy ireo dia mahatonga ny vokatra hahatsapa ho niniana kokoa, tsy miovaova ary velona kokoa. Raha maka zavatra iray amin'ity lahatsoratra ity ianao, dia aoka ho toy izao: mendrika ny fikarakarana sy ny rafitra efa omenay ny loko, ny typography ary ny elanelana ny sary mihetsika. Ny fampiasam-bola kely amin'ny token'ny keyframes dia mahazo tombony isaky ny mihetsika ny interface.
