CSS Cubic-Bezier -generaattori

Tällä työkalulla voit muotoilla mukautetun CSS cubic-bezier() -tasoituskäyrän neljällä liukusäätimellä ja esikatsella sen elävästi ennen koodin kopiointia. Säädä x1-, y1-, x2- ja y2-ohjauspistearvoja, katso käyrän ja liikkuvan esikatseluelementin päivittyvän välittömästi, ja kopioi sitten transition-timing-function: cubic-bezier(...) suoraan tyylitiedostoosi.

Mikä tämä työkalu on?

cubic-bezier() on CSS-ajastusfunktio, joka hallitsee, miten animoitu tai siirtymöity arvo kiihtyy ja hidastuu ajan mittaan, sen sijaan että se liikkuisi tasaisella nopeudella. Se määritellään kahdella ohjauspisteellä — (x1, y1) ja (x2, y2) — jotka taivuttavat käyrää kiinteän alkupisteen (0,0) ja loppupisteen (1,1) välillä. X-arvojen tulee pysyä välillä 0–1, mutta y-arvot voivat mennä tuon alueen ulkopuolelle luodakseen ylitys- tai kimmahdustehosteita.

Käsin kirjoitettuna neljän desimaaliluvun virittäminen tunteeksi, joka ei ole liian äkkinäinen eikä liian veltto, vaatii paljon kokeilua ja erehdystä. Tämä työkalu korvaa tuon arvailun suoralla manipuloinnilla: vedä liukusäädintä, katso käyrän taipuvan ja esikatselupallon liikkuvan sen mukaisesti, ja kopioi CSS, kun liike tuntuu oikealta.

Lähde: CSS Easing Functions Level 1, W3C — spesifikaatio, joka määrittelee cubic-bezier()-funktion ja viisi nimettyä avainsanaa, joihin tämän työkalun mallit perustuvat.

Miksi käyttää sitä?

Live SVG-kaavio näyttää tarkalleen, miten käyräsi taipuu kiinteän alku- ja loppupisteen välillä, molemmat ohjauspisteet ja niiden kahvat piirrettynä selkeyden vuoksi.
Toistopainike animoi esikatseluelementin radan yli tarkalla käyrälläsi, jotta voit tuntea liikkeen etkä vain nähdä staattista kaaviota.
Yhden napsautuksen mallit viidelle standardille nimetylle tasoitusfunktiolle — ease, ease-in, ease-out, ease-in-out ja linear — CSS Easing Functions -spesifikaatiossa dokumentoidun mukaisesti.
Y-arvot voivat mennä alle 0:n tai yli 1:n, mikä mahdollistaa ylitys-/kimmahdustyylisten tasoitusten rakentamisen, joita nimetyt avainsanat eivät pysty tuottamaan.
Tulostaa valmiin liitettävän transition-timing-function-CSS:n — sama arvo toimii myös animation-timing-functionissa.
Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata minnekään. Ilmainen, ei rekisteröitymistä.

Käyttöohje

Vedä x1/y1-liukusäätimiä asettaaksesi ensimmäisen ohjauspisteen, joka muotoilee animaation alkua.
Vedä x2/y2-liukusäätimiä asettaaksesi toisen ohjauspisteen, joka muotoilee animaation loppua.
Katso kaavion mustaa käyrää — käyrä, joka pullistuu diagonaalin yläpuolelle alussa, tarkoittaa nopeaa alkua; käyrä, joka pysyy sen alapuolella, tarkoittaa hidasta alkua.
Napsauta Toista nähdäksesi esikatseluelementin liikkuvan radan yli käyrääsi transition-timing-functionina käyttäen.
Kokeile mallia (ease, ease-in, ease-out, ease-in-out, linear) lähtökohtana, ja säädä sitten liukusäätimiä siitä eteenpäin.
Kopioi luotu CSS ja liitä se transition- tai animation-sääntöön.

Esimerkki

Syöte

x1: 0,25, y1: 0,1, x2: 0,25, y2: 1

Tuloste

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Tämä on standardin CSS ease-avainsanan kirjoittaminen auki eksplisiittisinä ohjauspisteinä — nopea alku, terävä kiihtyvyys, sitten asteittainen hidastuminen loppua kohti.

Miksi y-arvot voivat ylittää 0–1-alueen

Toisin kuin x-akseli, joka edustaa aikaa ja jonka on kuljettava välillä 0–1, y-akseli edustaa animoidun arvon edistymistä eikä sillä ole tällaista rajoitusta. Y1:n asettaminen alle nollan tai y2:n yli yhden saa käyrän sukeltamaan alkuarvon alle tai ampumaan loppuarvon yli ennen asettumista — tämä on ylitys- ja odotustehosteiden perusta, joita käytetään painikkeiden painalluksissa, modaalien avautumisissa ja leikkisissä käyttöliittymän mikrointeraktioissa. Mikään viidestä nimetystä avainsanasta (ease, ease-in, ease-out, ease-in-out, linear) ei pysty tuottamaan tätä; siihen tarvitset mukautetun cubic-bezier()-arvon.

transition-timing-function vs. animation-timing-function

Tämän työkalun luoma cubic-bezier()-arvo toimii identtisesti molemmissa ominaisuuksissa. Käytä transition-timing-functionia, kun liike käynnistyy tilan muutoksesta (kuten hoverista tai luokan vaihdosta), ja animation-timing-functionia @keyframes-ohjatussa animaatiosäännössä, kun tarvitset saman tasoitustunteen sovellettuna automaattisesti tai silmukassa.

Yleisiä tasoituskuvioita

Napakka käyttöliittymäpalaute (painikkeet, kytkimet): pidä ohjauspisteet lähellä diagonaalia hienoisella ease-out-painotuksella, esim. cubic-bezier(0.4, 0, 0.2, 1).
Material Designin vakiokäyrä: cubic-bezier(0.4, 0, 0.2, 1) — nopea alku, pehmeä lopetus, laajasti käytössä paneeli- ja korttisiirtymissä.
Kimmahdus/ylitys: työnnä y2 yli 1:n, esim. cubic-bezier(0.34, 1.56, 0.64, 1), leikkisää pop-in-tunnetta varten.
Odotus ennen liikettä: työnnä y1 alle nollan, jotta elementti vetäytyy hieman taaksepäin ennen eteenpäin liikkumista.
Sulava ease-in-out silmukka-animaatioihin: pidä käyrä lähes symmetrisenä keskikohdan ympärillä.

Yhdistäminen muihin CSS-työkaluihin

Tasoituskäyrä harvoin seisoo yksin — sitä sovelletaan yleensä elementtiin, joka tarvitsee myös varjoja, pyöristettyjä kulmia tai liukuvärejä. Luo visuaalinen tyylitys muilla CSS-työkaluilla ja lisää sitten tämän työkalun ajastusfunktio samaan sääntöön tai transition-/animation-määritykseen.

→ Box Shadow -generaattori · Border Radius -generaattori

Usein kysytyt kysymykset

Mitä cubic-bezier()-funktion neljä lukua oikeasti tarkoittavat?

Ne ovat kahden ohjauspisteen, (x1, y1) ja (x2, y2), koordinaatit, jotka taivuttavat Bézier-käyrän kiinteästä alkupisteestä (0,0) kiinteään loppupisteeseen (1,1). X-akseli edustaa kulunutta aikaa (0–1) ja y-akseli sitä, kuinka pitkälle animoitu ominaisuus on edennyt, minkä vuoksi x1:n ja x2:n on pysyttävä välillä 0–1, kun taas y1 ja y2 voivat mennä tuon alueen ulkopuolelle.

Mitä eroa on ease-, ease-in-, ease-out- ja ease-in-out-avainsanoilla?

ease (CSS-oletus) alkaa nopeasti ja tasoittuu sitten pehmeästi. ease-in alkaa hitaasti ja kiihtyy loppua kohti, hyödyllinen ruudulta poistuville elementeille. ease-out alkaa nopeasti ja hidastuu, hyödyllinen ruudulle saapuville elementeille. ease-in-out on hidas molemmissa päissä ja nopeampi keskellä, mikä antaa sulavan, symmetrisen tunteen.

Voinko käyttää samaa cubic-bezier()-arvoa sekä siirtymissä että animaatioissa?

Kyllä. transition-timing-function ja animation-timing-function hyväksyvät täsmälleen saman cubic-bezier()-syntaksin ja tuottavat saman tasoituskäyrän — ainoa ero on, mihin CSS-ominaisuuteen (siirtymään vai keyframes-animaatioon) tuo ajastusfunktio on liitetty.

Miksi käyräni näyttää rikkinäiseltä, kun y1 tai y2 on hyvin suuri tai negatiivinen?

Tämä on odotettua — y-arvojen työntäminen kauas 0–1-alueen ulkopuolelle luo voimakkaan ylityksen, jossa animoitu arvo heilahtaa selvästi tavoitteensa yli ennen asettumista. Se on validi ja usein tarkoituksellinen efekti, mutta jos se näyttää ei-toivotulta, tuo y1 ja y2 lähemmäs 0–1-aluetta.

Onko mukautettu käyrä parempi kuin pelkkien nimettyjen avainsanojen käyttö?

Ei välttämättä — viisi avainsanaa (ease, ease-in, ease-out, ease-in-out, linear) kattavat useimmat arkiset tarpeet ja ovat helpompia lukea koodissa. Tavoittele mukautettua cubic-bezier()-arvoa, kun tarvitset tietyn tunteen, jota avainsanat eivät tarjoa, kuten kimmahduksen, terävämmän napsahduksen tai tietyn suunnittelujärjestelmän liikespesifikaation täsmäytyksen.