Cubic-bezier -editori

Cubic-bezier -editori – ominaisuudet

• 01

  Vedä käyrää, näe liikettä

  Kaksi vedettävää kättä ohjaavat bezier alusta ja lopusta. Siihen liittyvä pallon animaatio toistaa käyrää valitsemallasi kestolla, joten voit katsella overshoot- ja ease-out-tunnelmaa sivun jättämisen ilman.

• 02

  Kaikki vakioesiasennukset

  Aloita CSS:n sisäänrakennetuista ease, linear, ease-in, ease-out ja ease-in-out -arvoista — sitten hienosäädä. Esiasetus palaa "custom"-asetukseen automaattisesti kun siirrät kättä.

• 03

  Kopioi CSS yhdellä napsautuksella

  Cubic-bezier() arvo päivittyy reaaliajassa kahden desimaalin tarkkuudella, valmis pudotettavaksi transition-timing-function tai animation-timing-function arvoon.

Cubic-bezier -editori – UKK

Miksi Y-arvot voivat mennä yli 1:n tai alle 0:n?

Bezier ohjauspisteen 0–1 alueen ulkopuolella tuottavat overshoot- ja undershoot-efektit — käyrä menee päätepistettään pidemmälle ennen asettumista. Tämä on kuinka "kimmoisat" easing käyrät tehdään; X-akselin on silti pysyttävä 0–1-asetuksessa.

Kuinka käytän tulosta?

Kopioi cubic-bezier(...) merkkijono ja liitä se mihin tahansa CSS transition-timing-function tai animation-timing-function arvoon. Se toimii jokaisessa modernissa selaimessa.

Onko esikatselu tarkka siihen, mitä CSS tekee?

Kyllä — esikatselu animoi pallon 0:sta 100%:iin käyttäen samaa cubic bezier kaavaa, jota selaimet käyttävät siirtymille. Keston liukusäädin antaa sinun tuntea hitaat vs nopeat käyrät ennen sitoutumista.

Mitä ease-in-out tarkoittaa?

Ease-in-out alkaa hitaasti, nopeasti keskellä ja hidastuu jälleen lopussa — cubic-bezier(0.42, 0, 0.58, 1) käyrä. Se on oletus useimmille kiilloitetun UI-liikkeen suhteen, koska se heijastaa kuinka todelliset fyysiset objektit kiihtyvät ja hidastuvat.