Generator CSS prijelaza i ubrzanja
Stvori CSS prijelazno pravilo od unaprijed postavljene krivulje ili prilagođenih cubic-bezier točaka, s tekstualnim grafikonom gibanja.
Generator CSS prijelaza i ubrzanja
Odaberi svojstva koju želiš animirati, postavi trajanje i kašnjenje, i ovaj alat će ti napisati prijelazno pravilo — kao obični CSS ili kao Tailwind config blok koji možeš prebaciti u tailwind.config.js. Pokriva česte i pojmove krivulje (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, krivulja koja prelazi svoju ciljanu vrijednost prije nego što se smiri, što nije nativna CSS ključna riječ i uvijek se mora napisati kao cubic-bezier().
Ispod generiranog pravila, tekstualni grafikon ucrtava napredak krivulje u svakoj točki vremenske — od 0 na početku animacije do 1 na kraju, s trakom za svaki uzorak kako bi vidio ubrzanje i bilo koji prebacaj bez otvaranja dev alata. Prebaci na "Prilagođeni cubic-bezier()" i unesi vlastite četiri kontrolne točke kako bi pretvorio krivulju koju ti je netko dao, ili onu koju si kopirao iz alata za dizajn; prva i treća točka moraju ostati u rasponu 0–1 na vremenskoj osi (to je CSS zahtjev), ali y vrijednosti mogu ići izvan 0–1, što je upravo kako funkcioniraju bounce i back easing.
Polje svojstva prima zarezom odvojenu listu — transform, opacity, background-color, ili CSS prilagođeno svojstvo kao --panel-width — i alat piše jedan redak po svojstvu kako bi pravilo ostalo lako čitljivo. Trajanje i kašnjenje su u milisekundama; broj redaka grafa je prilagođljiv od 2 do 41 za grublji ili detaljniji prikaz krivulje.
Sve se izvršava lokalno u tvom pretraživaču: ništa što napišeš se ne šalje nigdje drugdje. Kopiraj rezultat, preuzmi ga kao .txt datoteku, ili pošalji izlaz direktno natrag u unos kako bi nastavio s prilagođavanjem.