Generator CSS prehodov in pospeška
Ustvari CSS prechodne pravilo iz vnaprej nastavljene krivulje ali prilagođenih cubic-bezier točk, s tekstualnim grafikonom gibanja.
Generator CSS prehodov in pospeška
Izberi lastnosti, ki jih želiš animirati, nastavi trajanje in zakasnitev, in to orodje ti bo napisalo prehodne pravilo — kot čist CSS ali kot Tailwind config blok, ki ga lahko vstaviš v tailwind.config.js. Zajema pogoste poimenovane krivulje (linear, ease, ease-in, ease-out, ease-in-out) ter ease-out-back, krivuljo, ki prebega svoj cilj pred umiritvijo, kar ni vgrajeno CSS ključno besedo in se mora vedno napisati kot cubic-bezier().
Pod generiranim pravilom besedilni grafikon prikazuje napredek krivulje v vsakem trenutku — od 0 na začetku animacije do 1 na koncu, s črto za vsak vzorec, da vidiš pospešek in morebitno prebitje brez odpiranja razvojnih orodij. Preklopi na "Prilagođeni cubic-bezier()" in vnesi svoje štiri kontrolne točke, da predvidiš krivuljo, ki ti jo je nekdo dal, ali eno, ki si jo kopiral iz oblikovalskega orodja; prva in tretja točka morata biti v razponu 0–1 na časovni osi (to je zahteva CSS), vendar lahko y vrednosti izstopijo iz 0–1, kar je prav to, kako delujejo preskakujoče in povratne easing funkcije.
Polje lastnosti sprejme seznam, ločen z vejicami — transform, opacity, background-color, ali CSS spremenljivko kot --panel-width — in orodje piše eno vrstico na lastnost, da pravilo ostane enostavno za branje. Trajanje in zakasnitev sta v milisekundah; število vrstic v grafikonu je prilagodljivo od 2 do 41 za bolj grobo ali podrobno razumevanje krivulje.
Vse teče lokalno v tvojem spletnem brskalniku: nič, kar napišeš, se ne pošlje nikamor. Kopiraj rezultat, ga preuzmem kot .txt datoteko, ali pošlji rezultat neposredno nazaj v vnos, da nadaljuješ s prilagajanjem.