Realni brojevi iza CSS-a jednostavnost ulaska
Dizajnirajte prilagođenu CSS cubic-bezier() funkciju mjerenja vremena povlačenjem dviju kontrolnih točaka, pregledajte je uživo u odnosu na linearnu referencu, zatim kopirajte gotovu vrijednost.
Rezultat
Ova stranica otvara generator cubic-bezier s već učitanim x1=0,42, y1=0, x2=0,58, y2=1 — točnim kontrolnim točkama na koje se proširuje CSS ključna riječ za jednostavno ulaženje. Povucite bilo koju ručicu ili izravno uredite brojeve, a krivulja, pregled animacije i niz koji se može kopirati odmah se ažuriraju.
ease-in-out jedna je od pet ugrađenih CSS ključnih riječi za mjerenje vremena, a popularna je upravo zato što ova krivulja blago ubrzava od početka, održava prilično ujednačen tempo kroz sredinu i lagano se spušta prije kraja — oblik koji se čita kao prirodan za većinu pokreta korisničkog sučelja. Gledajući to kao eksplicitne kontrolne točke umjesto naziva ključne riječi, postaje očito zašto: y1 se nalazi blizu 0, a y2 se nalazi blizu 1, obje blizu njihovog odgovarajućeg x, tako da nema prekoračenja u oba smjera.
Upotrijebite ova četiri broja kao početnu točku, a ne samu ključnu riječ kad god trebate malo potaknuti osjećaj - povucite x1 prema dolje za brži početak ili gurnite y2 iznad 1 da ovaj isti oblik pretvorite u nježno prekoračenje. Svaka promjena trenutno ažurira pregled i liniju cubic-bezier() koja se može kopirati.