⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Generator animacij CSS Keyframe

Zgradite prave @keyframes animacije na večprogovnem časovnem traku — s postanki za transformacije, prosojnost in barvo ozadja na vsaki progi — z vlečnim drsnikom, ki prikazuje natančno interpolirano vmesno stanje animacije.

🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.

Kliknite kamor koli na progo, da tam dodate postanek. Povlecite postanek, da ga premaknete, ali uredite njegove vrednosti % in vrednost v poljih pod progo. Dvokliknite postanek, da ga odstranite (najmanj 2 na progo).

Obdelava ... 0%

Rezultat

Pravilo CSS @keyframes je v resnici majhen časovni trak: niz odstotkovnih mejnikov, od katerih vsak določa, kako naj bo lastnost videti v tistem trenutku, brskalnik pa vse vmes interpolira. Ročno ustvarjanje pomeni, da si morate več teh mejnikov hkrati zapomniti za več lastnosti — ta generator ta časovni trak spremeni v nekaj, kar dejansko vidite in kar lahko povlečete: ena vodoravna proga na lastnost, z označevalcem postanka na vsakem mejniku.

Osrednji element je vlečni drsnik za predogled. Povlecite ga na katero koli točko med 0 % in 100 % in okence za predogled skoči na točno tisto sestavljeno stanje v tem trenutku — ne na najbližjo ključno sličico, temveč na dejansko linearno interpolirano vrednost, izračunano med tistima postankoma, ki na vsaki aktivni progi obdajata drsnik. Številske lastnosti, kot so položaj, vrtenje in merilo, se interpolirajo kot navadna števila; barva ozadja interpolira vsak rdeči, zeleni in modri kanal neodvisno, kar poskrbi, da barvna proga gladko zbledi skozi vmesne odtenke in ne skoči med dejansko nastavljenimi barvami.

Več prog se samodejno združi v eno skladno animacijo: vse lastnosti, ki temeljijo na transformaciji (premik, vrtenje, merilo), se pri vsakem odstotku ključne sličice zlijejo v enoten zapis transform, medtem ko prosojnost in barva ozadja ostaneta v svojih vrsticah, natanko tako, kot bi izgledal pravi ročno napisan CSS. Odstotki, pri katerih določena proga nima izrecnega postanka, so v deklaracijah te lastnosti namenoma izpuščeni — brskalnikova lastna interpolacija ključnih sličic zapolni vrzel med obstoječimi postanki, enako kot bi to storil pri katerem koli pravilu @keyframes, ki bi ga napisali ročno.

Pet prednastavitev — poskok, tresenje, utripanje, pojemanje in drsenje noter — z enim klikom naloži celoten, pripravljen časovni trak (vključno s smiselnim trajanjem, časovno funkcijo in številom ponovitev). Kadar koli pritisnite Predvajaj, da vidite, kako prava CSS-animacija teče na elementu za predogled, ustvarjena sproti prek dinamično vstavljene stilske predloge, nato pa kopirajte celoten blok @keyframes in skrajšani zapis .animated-element { animation: ... } neposredno v svoj projekt. Kot vsa orodja na tem spletnem mestu tudi to v celoti teče krajevno v brskalniku in ničesar ne nalaga na strežnik.

Uživate v tem orodju? Se vam zdi izdelek uporaben? Vidite v njem potencial in ga želite podpreti?

🛡️
Izvaja se v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka povsem brez povezave. 100-odstotno varno.

Sprejeti formati in pravila

  • Večprogovni časovni trak za transformacije (premik X, premik Y, vrtenje, merilo), prosojnost in barvo ozadja, vsaka s svojimi vlečnimi postanki.
  • Prava linearna interpolacija — številske lastnosti in barvni kanali RGB — poganja vmesni predogled med poljubnima postankoma na progi.
  • Gumb Predvajaj uporabi dejansko ustvarjen @keyframes CSS na predogledu prek dinamično vstavljene stilske predloge, na voljo pa je tudi celoten izpis @keyframes in skrajšanega zapisa animation.

Ključne prednosti

✓ Vlečni drsnik prikaže realno interpolirano stanje sredi animacije — ne skok med ključnimi sličicami — natanko tako, kot ga bo dejansko izrisal brskalnik.
✓ Vsaka lastnost ima svojo progo z lastnimi postanki, tako da lahko poskok, sprememba barve in pojemanje hkrati tečejo na istem elementu, ne da bi si bili v navzkrižju.
✓ Pet pripravljenih prednastavitev (poskok, tresenje, utripanje, pojemanje, drsenje noter) omogoči delovno izhodišče z enim klikom, nato pa vsak postanek ostane v celoti urejljiv.

Primeri uporabe

  • • Povlecite drsnik za predvajanje na poljubno točko v animaciji odboja ali pulziranja in si oglejte natančno interpolirano stanje sredi animacije, še preden pošljete CSS v produkcijo.
  • • Plastite sled translateX in sled prosojnosti, da ustvarite realistično animacijo vstopa z drsenjem in pojavljanjem, nato pa kopirajte celoten @keyframes in okrajšavo animation.
  • • Poleg sledi za povečavo dodajte še sled background-color, da skupaj animirate barvo in velikost gumba, medtem ko s premikanjem drsnika v živo opazujete mešanje RGB-kanalov.