⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS Keyframe animacijų generatorius

Kurkite tikras @keyframes animacijas kelių takelių laiko juostoje – transformacijos, skaidrumo ir fono spalvos sustojimo taškai kiekviename takelyje – su tempiamu laiko žymekliu, rodančiu tikslią interpoliuotą tarpinę būseną.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

Spustelėkite bet kurioje takelio vietoje, kad pridėtumėte sustojimo tašką. Vilkite tašką, kad jį perkeltumėte, arba redaguokite jo % ir reikšmės laukus po takeliu. Dukart spustelėkite tašką, kad jį pašalintumėte (mažiausiai 2 takelyje).

Apdorojama... 0%

Rezultatas

CSS @keyframes taisyklė iš esmės yra maža laiko juosta: procentais išdėstyti kontroliniai taškai, kurių kiekvienas nurodo, kaip savybė turi atrodyti tą akimirką, o naršyklė interpoliuoja tarpines reikšmes. Kuriant ranka reikia vienu metu mintyse laikyti kelis tokius kontrolinius taškus kelioms savybėms – šis generatorius paverčia tą laiko juostą kažkuo, ką galima iš tikrųjų matyti ir tempti: po vieną horizontalų takelį kiekvienai savybei su sustojimo žymekliu kiekviename kontroliniame taške.

Pagrindinis įrankis yra slenkamas laiko žymeklis. Nuvilkite jį į bet kurį tašką tarp 0% ir 100%, ir peržiūros langas iš karto parodys tikslią bendrą būseną tą akimirką – ne artimiausią kadrą, o tikrą tiesiškai interpoliuotą reikšmę, apskaičiuotą tarp dviejų žymeklį supančių sustojimo taškų kiekviename aktyviame takelyje. Skaitinės savybės, tokios kaip padėtis, pasukimas ir mastelis, interpoliuojamos kaip paprasti skaičiai; fono spalva interpoliuojama atskirai kiekvienam raudonam, žaliam ir mėlynam kanalui, todėl spalvos takelis sklandžiai blėsta per tarpinius atspalvius, užuot šokinėjęs tarp nustatytų spalvų.

Keli takeliai automatiškai sujungiami į vieną vientisą animaciją: visos transformacijos savybės (perkėlimas, pasukimas, mastelis) kiekviename kadro procentiniame taške sujungiamos į vieną transform deklaraciją, o skaidrumas ir fono spalva lieka atskirose eilutėse, tiksliai taip, kaip atrodytų ranka rašytame CSS. Procentai, kuriuose tam tikras takelis neturi aiškaus sustojimo taško, yra sąmoningai praleidžiami tos savybės deklaracijose – naršyklės pačios interpoliuoja tarp esamų sustojimo taškų, kaip ir bet kurioje ranka rašytoje @keyframes taisyklėje.

Penki šablonai – šuolis, drebėjimas, pulsavimas, išnykimas ir įslenkimas – vienu spustelėjimu įkelia visą, redaguoti paruoštą laiko juostą (įskaitant protingą trukmę, laiko funkciją ir kartojimų skaičių). Bet kada spustelėkite „Paleisti“, kad pamatytumėte tikrą CSS animaciją peržiūros elemente, sugeneruotą dinamiškai per įterptą stilių lentelę, tada nukopijuokite visą @keyframes bloką kartu su .animated-element { animation: ... } sutrumpinimu tiesiai į savo projektą. Kaip ir visi šios svetainės įrankiai, viskas veikia lokaliai naršyklėje ir niekur neįkeliama.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Kelių takelių laiko juosta transformacijai (translateX, translateY, rotate, scale), skaidrumui ir fono spalvai – kiekvienas su savo tempiamais sustojimo taškais.
  • Tikra tiesinė interpoliacija – skaitinėms reikšmėms ir kanalų RGB spalvoms – valdo peržiūrą tempiant žymeklį tarp bet kurių dviejų takelio sustojimo taškų.
  • Mygtukas „Paleisti“ peržiūros elementui pritaiko sugeneruotą @keyframes CSS per dinamiškai įterptą stilių lentelę, taip pat pateikiama kopijuojama išvestis: visas @keyframes blokas ir animation sutrumpinimas.

Pagrindiniai privalumai

✓ Tempiamas laiko žymeklis rodo tikrą interpoliuotą tarpinę animacijos būseną – ne šuolį tarp kadrų – tiksliai taip, kaip ją atvaizduos naršyklė.
✓ Kiekviena savybė turi atskirą takelį su savo sustojimo taškais, todėl tam pačiam elementui galima vienu metu pritaikyti šuolį, spalvos keitimą ir skaidrumą – jie vienas kitam netrukdo.
✓ Penki paruošti šablonai (šuolis, drebėjimas, pulsavimas, išnykimas, įslenkimas) vienu spustelėjimu suteikia veikiantį pradžios tašką, o vėliau kiekvieną sustojimo tašką galima laisvai redaguoti.

Naudojimo atvejai

  • • Nuvilkite peržiūros slankiklį į bet kurį atšokimo ar pulsavimo animacijos tašką ir pamatykite tikslų, realiuoju laiku interpoliuotą tarpinę animacijos būseną prieš pateikdami CSS.
  • • Sudėkite translateX takelį ir permatomumo takelį kartu, kad sukurtumėte tikrą įslinkimo ir išnykimo įėjimo animaciją, tada nukopijuokite visą @keyframes + animation sutrumpintą užrašą.
  • • Pridėkite fono spalvos takelį greta mastelio takelio, kad animuotumėte mygtuko spalvą ir dydį kartu, stebėdami, kaip RGB kanalai gyvai maišosi slenkant slankikliu.