CSS Keyframe animáció generátor
Valódi @keyframes animációkat készíthet egy többsávos idővonalon – transzformáció, átlátszatlanság és háttérszín megállók sávonként – egy húzható lejátszófejjel, amely a pontos interpolált középső animáció állapotát mutatja.
Eredmény
A CSS @keyframes szabály valójában egy kis idővonal: százalékos ellenőrzőpontok halmaza, amelyek mindegyike deklarálja, hogyan kell kinéznie egy tulajdonságnak abban a pillanatban, miközben a böngésző mindent interpolál a kettő között. Egyet kézzel építeni azt jelenti, hogy több ilyen százalékos ellenőrzőpontot egyszerre több ingatlanon keresztül tart a fejében – ez a generátor az idővonalat olyasvalamivé alakítja, amelyet valóban láthat és húzhat: ingatlanonként egy vízszintes sáv, minden ellenőrzőponton megállójelzővel.
A központi elem a súroló lejátszófej. Húzza el a 0% és 100% közötti tetszőleges pontra, és az előnézeti mező az adott pillanatban a pontos kombinált állapotba ugrik – nem a legközelebbi kulcskockára, hanem egy valódi lineárisan interpolált értékre, amelyet minden aktív sávon a lejátszófejet körülvevő két pont között számítanak ki. A numerikus tulajdonságok, mint például a pozíció, az elforgatás és a lépték, sima számokként interpolálódnak; A háttérszín külön-külön interpolálja az egyes piros, zöld és kék csatornákat, így a színsávok simán elhalványulnak a közbenső árnyalatokon, ahelyett, hogy a ténylegesen beállított színek között ugrálnának.
Több sáv automatikusan egyesül egyetlen koherens animációba: minden transzformációs alapú tulajdonság (mozgatás, elforgatás, méretezés) egyetlen transzformációs deklarációba egyesül minden kulcsképkocka-százaléknál, miközben az átlátszatlanság és a háttérszín a saját vonalakon marad, pontosan úgy, ahogy a valódi, kézzel írott CSS kinézne. Azok a százalékos arányok, ahol egy adott sávnak nincs kifejezett megállása, egyszerűen kimaradnak az adott tulajdonság deklarációiból – a böngésző saját kulcsképkocka-interpolációja kitölti az űrt a létező megállók között, ugyanúgy, ahogyan azt bármely @keyframes-szabály esetén tenné, ha kézzel írt be.
Öt előre beállított érték – ugrálás, rázkódás, pulzálás, elhalványulás és becsúsztatás – egy teljes, módosításra kész idővonalat tölt be egyetlen kattintással. Bármikor nyomja meg a Lejátszás gombot, hogy megtekinthesse a valódi CSS-animációt az előnézeti elemen, amely menet közben jön létre egy dinamikusan beszúrt stíluslapon keresztül, majd másolja be a teljes @keyframes blokkot és az .animated-element { animation: ... } rövidítést közvetlenül a saját projektjébe. Mint minden eszköz ezen a webhelyen, ez is helyileg fut a böngészőben, és nincs feltöltve.
A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.
Elfogadott formátumok és szabályok
- Többsávos idővonal az átalakításhoz (translateX, translateY, forgatás, méretezés), az átlátszatlansághoz és a háttérszínhez, mindegyik saját húzható megállóval.
- Valódi lineáris interpoláció – numerikus tulajdonságok és csatornánkénti RGB a színekhez – a súrolási előnézetet a sáv bármely két pontja között hajtja végre.
- A Lejátszás gomb a ténylegesen generált @keyframes CSS-t alkalmazza az előnézetre egy dinamikusan beillesztett stíluslapon, valamint egy másolható teljes @keyframes + animációs rövidített kimeneten keresztül.
Főbb előnyök
Felhasználási területek
- • Húzza a scrub lejátszófejet egy ugráló- vagy impulzusanimáció tetszőleges pontjára, hogy megtekinthesse a pontos valós interpolált középső animáció állapotát a CSS szállítása előtt.
- • Rétegezz egy translateX sávot és egy átlátszatlanság sávot, hogy valódi becsúsztatható bemeneti animációt készíts, majd másold ki a teljes @keyframes + animáció rövidítést.
- • Adjon hozzá egy háttérszín sávot egy léptékű sáv mellé, hogy egy gomb színét és méretét együtt animálja, és nézze, ahogy az RGB csatornák élőben keverednek, miközben súrol.
Értékelje ezt az eszközt
