CSS Keyframe Animation Studio

Kuzalisha animations laini CSS kwa kuelea, msukumo, bounce, kutetemeka, na spin na udhibiti wa muda na keyframes.

Hufanya kazi kwenye kivinjari chako. Faili zako hazitoki kamwe kwenye kifaa. Tazama jinsi ya kuthibitisha

…

Jinsi ya kufanya

  1. 1
    Hatua ya 1: fungua CSS Keyframe Animation Studio na uweke taarifa zako

    Andika namba au maandishi yako, ongeza faili, au chagua chaguo unazohitaji. Hakuna kinachopakiwa: kila kitu kinabaki kwenye kivinjari chako.

  2. 2
    Hatua ya 2: CSS Keyframe Animation Studio hufanya nini

    Kuzalisha animations laini CSS kwa kuelea, msukumo, bounce, kutetemeka, na spin na udhibiti wa muda na keyframes.

  3. 3
    Hatua ya 3: soma matokeo na ulinganishe

    Matokeo huonekana mara moja. Badilisha thamani moja uone jinsi jibu linavyobadilika, kisha ubaki na namba inayofaa kesi yako.

  4. 4
    Hatua ya 4: nakili au hifadhi

    Nakili matokeo au yapakue. Kwa uamuzi muhimu, yathibitishe kwa chanzo rasmi au mshauri.

Kuhusu zana hii

Pumzika maisha katika vifungo, nembo shujaa, icons taarifa, na kuagiza viashiria. Chagua kutoka maarufu UI uhuishaji presets ikiwa ni pamoja na Gentle Float, Attention Pulse, Playful Bounce, Kosa Shake, na Infinite Spin. Kurekebisha urefu wa uchezaji kwa sekunde na nakala uzalishaji-tayari CSS keyframe code.

Vidokezo vya matokeo bora

Kabla ya kuanza, tumia muda kidogo kusoma chaguo na ujaribu zana kwa mfano mdogo kwanza. Kila kitu hufanya kazi kwenye kivinjari kwenye kifaa chako mwenyewe; hakuna unachoandika au kuongeza kinachopakiwa na kufunga kichupo hufuta kila kitu. Ikiwa kitu hakionekani sawa, pakia upya ukurasa na ujaribu tena au tumia kiungo cha kuripoti kwenye ukurasa huu kutuambia kilichoharibika. Ikiwa matokeo bado yanaonekana vibaya, badilisha thamani moja kwa wakati ili uone kisanduku gani kinaathiri zaidi. Weka alama ya ukurasa huu ikiwa utaitumia tena.

Kwa ufupi

Maswali yanayoulizwa mara kwa mara

Je, hizi CSS uhuishaji vifaa kasi?

Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.

Je, naweza kurekebisha kasi ya uhuishaji?

Ndiyo. Muda slider utapata kasi au kupunguza kasi ya uhuishaji kutoka sekunde 0.5 kwa sekunde 4.0 katika muda halisi.

Jinsi gani mimi kuchochea uhuishaji tu juu ya hover?

In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).

Je, hii inahitaji maktaba yoyote JavaScript?

Hapana, michoro ni 100% CSS safi, inahitaji sifuri JavaScript overhead.

Kitengeneza picha ya pasipotiPicha za ukubwa sahihi kwa pasipoti, viza na maombi ya kazi, na karatasi tayari kuchapishwa.
JPG kwenda PNGGeuza picha za JPG kuwa PNG.
PNG kwenda JPGGeuza picha za PNG kuwa faili ndogo za JPG.
Badilisha ukubwa na bana pichaBadilisha ukubwa wa picha hadi pikseli kamili, au ipunguze hadi KB 50, KB 100 au ukubwa wowote. Bila malipo, kwenye kivinjari chako.
Picha kwenda maandishi (OCR)Geuza maandishi ya Kibengali au Kiingereza kwenye picha au skani kuwa maandishi unayoweza kunakili.
HEIC kwenda JPGGeuza picha za HEIC za iPhone kuwa JPG inayofunguka kila mahali.
WebP kwenda JPGGeuza picha za WebP zilizohifadhiwa kutoka tovuti kuwa JPG inayofanya kazi kila mahali.
Kibadilishaji cha pichaBadilisha picha kati ya WebP, JPG na PNG, nyingi kwa wakati mmoja.
Picha kwenda Base64Geuza picha kuwa maandishi ya Base64, au Base64 kurudi kuwa picha.
Kichagua rangi kutoka pichaChagua rangi yoyote kutoka picha na upate misimbo ya HEX, RGB na HSL.
Kitengeneza faviconTengeneza favicon.ico na ukubwa wote wa aikoni za programu kutoka picha moja.
Ongeza maandishi kwenye pichaAndika maandishi kwenye picha ya mtindo wa mimi na uipakue.
Bila malipo kabisaHakuna ada, hakuna usajili
Faili hubaki za faraghaKila kitu hufanya kazi kwenye kivinjari chako
Rahisi katika lugha yakoInapatikana kwa lugha nyingi