CSS animáció és átmenet generátor
Hozz létre egy CSS átmenet szabályt görbe előbeállításból vagy egyedi cubic-bezier pontokból, szöveg grafikonnal a mozgáshoz.
CSS animáció és átmenet generátor
Válassza ki az animálandó tulajdonságokat, állítsa be az időtartamot és a késleltetést, és ez az eszköz meghozza az átmenet szabályt — egyszerű CSS-ként vagy Tailwind konfigurációs blokkként, amelyet behelyezhet a tailwind.config.js fájlba. A gyakori elnevezett görbéket tartalmazza (linear, ease, ease-in, ease-out, ease-in-out), valamint az ease-out-back görbét, amely túllépi a célt, mielőtt lezárulna — ezt nem natív CSS kulcsszó, és mindig teljes cubic-bezier() függvényként kell kiírni.
A generált szabály alatt egy szöveg grafikon ábrázolja a görbe előrehaladását az idő minden pontján — 0-tól az animáció kezdetén 1-ig a végén, minden mintavételi ponthoz egy sávval, hogy az gyorsulást és túlszaladást is láthassa anélkül, hogy megnyitná a fejlesztőeszközöket. Válassza az "Egyedi cubic-bezier()" lehetőséget, és adjon meg négy vezérlőpontot egy valakitől kapott görbe megtekintéséhez, vagy amit tervezési eszközből másolt; az első és harmadik pont az időtengelyen 0–1 között kell maradjon (ez CSS követelmény), de az y értékek 0–1 kívül is lehetnek, amely pontosan az, ahogyan az ugrálás és vissza animációk működnek.
A tulajdonságok mező vesszővel elválasztott listát vesz — transform, opacity, background-color vagy CSS egyéni tulajdonság, például --panel-width — és az eszköz egy sort ír tulajdonságonként, hogy a szabály könnyen olvasható maradjon. Az időtartam és a késleltetés milliszekundumban van; a grafikon sorok száma 2-től 41-ig állítható finomabb vagy durvább görbekiolvasáshoz.
Mindenki helyileg fut a böngészőben: amit beír, nem kerül sehol továbbküldésre. Másolja a risultátumot, töltse le szövegfájlként, vagy küldje vissza az eredményt közvetlenül a bemenetre, hogy további módosítások végezzen.