CSS easing generátor
Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
Mi az easing függvény a CSS-ben?
Az easing függvény szabályozza, hogy egy animáció vagy átmenet milyen tempóban halad az időben. Az elemnek nem kell állandó sebességgel mozognia: lassan indulhat, gyorsulhat, túllőhet a célon, majd megnyugvhat. CSS-ben a transition-timing-function vagy animation-timing-function tulajdonsággal állítod be.
Mit jelentenek a négy szám a cubic-bezier()-ben?
A cubic-bezier(x1, y1, x2, y2) egy görbét definiál két kontrollponttal. Az első pont a mozgás kezdetét, a második a végét formálja. Az X az időt jelöli 0 és 1 skáláján, az Y a haladást: a 0 a kezdőérték, az 1 a végérték.
Miért lehet az Y 0 és 1 közé eső tartományon kívül, az X miért nem?
Az X a valós időre képződik le, ezért a 0 alatti vagy 1 feletti érték megtörné az ok-okozatot, és a specifikáció tiltja. Az Y szabad: 1 felett túllő a célon, 0 alatt először hátrál — így kapják a Back előbeállítások a pattanó érzetet.
Mi a különbség az ease, ease-in és ease-out között?
Az ease a böngésző alapértelmezése, finom indulattal és finom landolással; az ease-in lassan indul és gyorsan véget ér; az ease-out gyorsan indul és lassul; az ease-in-out mindkettőt ötvözi. A generátor tartalmazza a sine, quad, cubic, quart, expo, back és material előbeállításokat is — összesen 18-at.
Hogyan működik a labda-előnézet?
Két labda jár körbe a beállított időtartamig. A felső labda mindig lineáris függvénnyel mozog viszonyításként, az alsó a te görbédet követi. Közöttük táguló és szűkülő rés pontosan megmutatja, mit változtat az easinged.
Hová illessztem a legenerált értéket?
Használd a transition-timing-function vagy animation-timing-function értékeként, például: transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Az eszköz a csupasz cubic-bezier(...) függvényt adja ki, amely bármely szabályba beilleszthető.
Az easing függvény befolyásolja az animáció teljesítményét?
Maga az időzítő függvény ingyenes: csak az időhöz viszonyított haladást képezi át. A teljesítmény azon múlik, mely tulajdonságokat animálod: a transform és az opacity GPU-barát, míg a width vagy top jellegű elrendezési tulajdonságok easingtől függetlenül drága reflow-okat okoznak.
Készíthetek igazi pattanó vagy rugalmas effektet?
Egyetlen cubic-bezier egyszer tud túllőni, de nem tudja a valódi bounce vagy rugalmas easing többszörös pattanásait. Ahhoz több keyframe-et fűzz a @keyframes-ben, vagy használd a Web Animations API-t; az egyszeri, sima túllövés pedig pontosan az, amit a cubic-bezier jól tud és amit ez az eszköz kínál.
Feltöltődik szerverre, amit itt csinálok?
Nem. A görbe helyi canvasra rajzolódik, az előnézeti animáció pedig teljesen a böngésződben fut. Semmi nem kerül szerverre, így a generátor az oldal betöltése után offline is működik.
A(z) CSS easing generátor használata
Csípje formára a CSS easing-görbéket vizuálisan, számok tippelése helyett. Húzza a vezérlőpontokat, hasonlítsa mozgását lineáris referenciához, és másolja ki a kész cubic-bezier-t egy kattintással. Minden helyben fut a böngészőjében.
- Válasszon ki a 18 preset közül egyet kiindulási pontként, például Ease Out, Expo Out vagy Back Out.
- Húzza a görbe két fogantyúját: az X tengely az idő, és 0 és 1 között kell maradnia; az Y tengely a haladás, és túlléphet.
- Finomhangolja a P1 és P2 pontos koordinátáit a számbeviteli mezőkkel, ha precizitásra van szüksége.
- Állítsa az időtartam csúszkáját, és figyelje a két köröző golyót — az üres mindig lineáris, a teli az Ön görbéjét használja.
- Másolja a generált cubic-bezier értéket a transition-timing-function vagy az animation-timing-function mezőbe.
Toljon egy Y-fogantyút 1 fölé magabiztos túllövéshez, például cubic-bezier(0.34, 1.56, 0.64, 1) — a gombok és kártyák rugalmasan fognak élni egyetlen keyframe nélkül is.
Kapcsolódó eszközök
- CSS Színátmenet Generátor Hozzon létre lenyűgöző CSS színátmeneteket vizuálisan. Lineáris, radiális és kúp színátmeneteket generálhat több színállomással, szögekkel és pozíciókkal. Azonnal másolhatja a gyártásra kész CSS kódot.
- CSS loader generátor Ingyenes CSS loader generátor: tíz betöltésjelző tiszta CSS-ből, élő méret-, sebesség-, vastagság- és színbeállítással, valamint használatra kész HTML és CSS másolással.
- Border-radius Generátor Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS szövegárnyék generátor Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.
- CSS clip-path generátor Ingyenes online CSS clip-path generátor. Tervezzen polygon, circle, ellipse és inset alakzatokat húzható pontokkal, élő előnézettel és egy kattintásos CSS-kód másolással.
- CSS szépítő CSS kód azonnali formázása és szépítése. Minimalizált CSS átalakítása olvasható kóddá testreszabható beállításokkal.
- CSS Minimalizáló Ingyenes online CSS minimalizáló. Azonnal tömörítse és optimalizálja CSS kódját a szóközök, megjegyzések és felesleges karakterek eltávolításával. Csökkentse a fájlméretet a gyorsabb webteljesítményért.