CSS Cubic Bezier -generaattori
Muotoile kevennyskäyrää vetämällä kahta kahvaa, seuraa pisteen liikettä suhteessa tasaisen nopeaan ja kopioi cubic-bezier()-arvo.
cubic-bezier(0.25, 0.1, 0.25, 1)Käyrä piirretään suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.
UKK
Mitä kaksi kahvaa ja neljä numeroa tarkoittavat?
Käyrä kulkee alavasemmasta (alku) yläoikeaan (loppu), jossa aika kulkee vasemmalta oikealle ja edistyminen pystysuunnassa ylöspäin. Kaksi kahvaa ovat ohjauspisteitä, jotka taivuttavat sitä – kummallakin on X- ja Y-koordinaatit, joten yhdessä ne muodostavat cubic-bezier(x1, y1, x2, y2). X pysyy välillä 0 ja 1, kun taas Y voi mennä yläreunan yli tai alareunan alle luoden ylityksen tai vetäytymisen ennen asettumista.
Miten käytän arvoa CSS-koodissani?
Kopioi cubic-bezier() ja sijoita se minne tahansa, missä käytetään ajoitustoimintoa – transition-timing-function, animation-timing-function tai lyhennemuoto, esim. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Avainsanat ease, ease-in, ease-out ja ease-in-out ovat vain kiinteitä cubic-bezier-käyriä, joten jonkin näistä esiasetuksista valitseminen näyttää tarkan arvon avainsanan takana.
Voiko sillä tehdä pomppivan tai joustavan tehosteen?
Ei sellaisenaan. Yksittäinen cubic-bezier voi ennakoida ja ylittää rajan – "back"-esiasetukset vetävät yhtä kahvaa laatikon ulkopuolelle juuri tämän tekemiseksi – mutta se voi liikkua vain yhteen suuntaan ja sitten asettua. Pomppivat (bounce) ja joustavat (elastic) tehosteet vaihtavat suuntaa useita kertoja, mitä yksittäinen cubic-bezier ei pysty ilmaisemaan; niihin tarvitaan CSS-keyframeja tai linear()-funktiota useilla pisteillä.