⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

CSS Keyframe Animáció Generátor

Valódi @keyframes animációk építése többsávos idővonalon – transform, opacity és background-color megállókkal sávonként –, húzható lejátszófejjel, amely a pontos interpolált köztes állapotot mutatja.

🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.

Kattintson bárhová a sávon megálló hozzáadásához. Húzza a megállót mozgatáshoz, vagy szerkessze a % és érték mezőket a sáv alatt. Dupla kattintás a megálló eltávolításához (minimum 2 sávonként).

Feldolgozás... 0%

Eredmény

Egy CSS @keyframes szabály valójában egy kis idővonal: százalékos ellenőrző pontok halmaza, mindegyik megadja, hogy egy tulajdonságnak hogyan kell kinéznie abban a pillanatban, a böngésző pedig interpolálja a köztes értékeket. Kézzel építve egyszerre több ilyen százalékos ellenőrző pontot kell fejben tartani több tulajdonsághoz – ez a generátor láthatóvá és húzhatóvá teszi az idővonalat: tulajdonságonként egy vízszintes sáv, minden ellenőrző pontnál egy megálló jelölővel.

A központi elem a tekerhető lejátszófej. Húzza bárhová 0% és 100% között, és az előnézeti doboz azonnal a pontos egyesített állapotba ugrik abban a pillanatban – nem a legközelebbi kulcskockába, hanem egy valódi lineárisan interpolált értékbe, amelyet a lejátszófej két oldalán lévő két megálló alapján számít ki minden aktív sávon. A numerikus tulajdonságok, mint a pozíció, forgatás és méret, sima számokként interpolálódnak; a background-color minden piros, zöld és kék csatornát függetlenül interpolál, így a színsáv egyenletesen vált át a köztes árnyalatokon, ahelyett hogy a beállított színek között ugrálna.

Több sáv automatikusan egy koherens animációvá áll össze: minden transform-alapú tulajdonság (mozgatás, forgatás, méret) egyetlen transform deklarációba olvad össze minden kulcskocka százaléknál, míg az opacity és background-color saját sorukon maradnak, pontosan úgy, ahogy egy kézzel írt valódi CSS kinézne. Azoknál a százalékoknál, ahol egy sávnak nincs explicit megállója, a rendszer szándékosan kihagyja az adott tulajdonság deklarációit – a böngésző saját kulcskocka-interpolációja tölti ki a hézagot a létező megállók között, ugyanúgy, mint bármely kézzel gépelt @keyframes szabálynál.

Öt előbeállítás – pattanás, remegés, pulzálás, áttűnés és becsúszás – egy kattintással betölt egy teljes, azonnal testreszabható idővonalat (beleértve az ésszerű időtartamot, időzítési függvényt és ismétlésszámot). Bármikor nyomja meg a Lejátszás gombot, hogy a valódi CSS animáció fusson az előnézeti elemen, amelyet a rendszer dinamikusan beszúrt stíluslap segítségével állít elő, majd másolja ki a teljes @keyframes blokkot plusz az .animated-element { animation: ... } shorthand-ot egyenesen a saját projektjébe. Mint az oldal összes eszköze, ez is teljesen helyben, böngészőben fut, semmi nem kerül feltöltésre.

Élvezed ezt az eszközt? Hasznosnak találod ezt a terméket? Látsz benne lehetőséget, és szeretnéd támogatni?

🛡️
Böngészőben futtatva

A fájljaid és beviteleid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline történik. 100%-ban biztonságos.

Elfogadott formátumok és szabályok

  • Többsávos idővonal transform (translateX, translateY, rotate, scale), opacity és background-color tulajdonságokhoz, mindegyik saját húzható megállókkal.
  • Valódi lineáris interpoláció – numerikus tulajdonságok és csatornánkénti RGB színek esetén – vezérli a tekerhető előnézetet bármely két megálló között egy sávon.
  • A Lejátszás gomb a ténylegesen legenerált @keyframes CSS-t alkalmazza az előnézetre egy dinamikusan beszúrt stíluslapon keresztül, plusz másolható teljes @keyframes + animation shorthand kimenet.

Fő előnyök

✓ A húzható lejátszófej valós interpolált köztes animációs állapotot mutat – nem ugrik a kulcskockák között –, pontosan úgy, ahogy a böngésző rendereli.
✓ Minden tulajdonság saját sávon, saját megállókkal fut, így egy pattanás, egy színváltás és egy áttűnés egyszerre, zavar nélkül futhat ugyanazon az elemen.
✓ Öt kész előbeállítás (pattanás, remegés, pulzálás, áttűnés, becsúszás) egy kattintással működő kiindulópontot ad, és onnantól minden megálló teljesen szerkeszthető.

Felhasználási esetek

  • • Húzza a lejátszófejet egy pattogó vagy lüktető animáció bármely pontjára, hogy a CSS kiadása előtt pontosan lássa a valós, interpolált köztes animációs állapotot.
  • • Rétegezzen egymásra egy translateX és egy opacity sávot, hogy valódi becsúszó és elhalványuló belépő animációt hozzon létre, majd másolja ki a teljes @keyframes + animation rövidítést.
  • • Adjon egy background-color sávot egy scale sáv mellé, hogy egy gomb színét és méretét együtt animálja, és figyelje élőben az RGB csatornák keveredését, ahogy húzza a lejátszófejet.