A CSS mögötti valós számok egyszerűsíthetők
Tervezzen meg egy egyéni CSS cubic-bezier() időzítési függvényt két vezérlőpont húzásával, tekintse meg élőben a lineáris referenciával szemben, majd másolja a kész értéket.
Eredmény
Ez az oldal megnyitja a cubic-bezier generátort, ahol x1=0,42, y1=0, x2=0,58, y2=1 már betöltött – a pontos vezérlőpontok, amelyekre a CSS easy-in-out kulcsszó kiterjeszti. Húzza el a fogantyút, vagy szerkessze közvetlenül a számokat, és a görbe, az animáció előnézete és a másolható karakterlánc azonnal frissül.
Az easy-in-out az öt beépített CSS-időzítési kulcsszó egyike, és éppen azért népszerű, mert ez a görbe enyhén felgyorsul az elejétől kezdve, meglehetősen egyenletes tempót tart a közepén, és a vége előtt enyhül vissza – ez a forma a legtöbb felhasználói felület mozgásánál természetesnek tűnik. Ha a kulcsszó neve helyett explicit vezérlőpontnak tekintjük, akkor nyilvánvaló, hogy miért: y1 0 közelében, y2 1 közelében helyezkedik el, mindkettő közel a megfelelő x-hez, így nincs túllövés egyik irányban sem.
Használja ezt a négy számot kiindulási pontként, nem pedig magát a kulcsszót, amikor kissé meg kell tolnia az érzést – húzza le az x1-et a lendületesebb kezdéshez, vagy nyomja meg az y2-t 1 fölé, hogy ugyanezt az alakzatot finom túllépéssé változtassa. Minden változtatás azonnal frissíti az előnézetet és a másolható cubic-bezier() sort.