CSS easing generaattori
Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
Mikä on easing-funktio CSS:ssä?
Easing-funktio ohjaa tahtia, jolla animaatio tai siirtymä etenee ajan myötä. Elementin ei tarvitse liikkua tasaisella nopeudella: se voi lähteä hitaasti liikkeelle, kiihtyä, lensiä maalin ohi ja asettua. CSS:ssä se asetetaan transition-timing-function- tai animation-timing-function-ominaisuudella.
Mitä cubic-bezier():n neljä lukua tarkoittavat?
cubic-bezier(x1, y1, x2, y2) määrittää käyrän kahden ohjauspisteen avulla. Ensimmäinen piste muotoilee liikkeen alun, toinen lopun. X edustaa aikaa skaalalla 0–1, ja Y edustaa etenemistä: 0 on alkuarvo ja 1 loppuarvo.
Miksi Y saa mennä 0:n ja 1:n ulkopuolelle mutta X ei?
X kuvataan todelliseen aikaan, joten arvo alle 0 tai yli 1 rikkoisi syy-seuraussuhteen, ja määritys kieltää sen. Y on vapaa: yli 1 menee maalin ohi ja alle 0 vetäytyy ensin taaksepäin — näin Back-esiasetukset luovat pompotustuntuman.
Mikä on ero ease-, ease-in- ja ease-out-arvoilla?
ease on selaimen oletusarvo pehmeällä alulla ja pehmeällä laskulla; ease-in lähtee hitaasti ja loppuu nopeasti; ease-out lähtee nopeasti ja hidastuu; ease-in-out yhdistää molemmat. Generaattori sisältää lisäksi sine-, quad-, cubic-, quart-, expo-, back- ja material-esiasetukset — yhteensä 18.
Miten pallo-esikatselu toimii?
Kaksi palloa kiertää silmukkaa asettamasi keston ajan. Ylempi pallo liikkuu aina lineaarisella funktiolla vertailukohtana, alempi seuraa käyrääsi. Niiden välinen etäisyys, joka kasvaa ja kutistuu, näyttää täsmälleen mitä oma easing muuttaa.
Minne luotu arvo liitetään?
Käytä sitä transition-timing-function- tai animation-timing-function-arvona, esimerkiksi transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Työkalu tulostaa puhtaan cubic-bezier(...)-funktion, joka sopii suoraan mihin tahansa sääntöön.
Vaikuttaako easing-funktio animaation suorituskykyyn?
Ajoitusfunktio itsessään on ilmainen: se vain uudelleenkuvaa etenemisen ajan suhteen. Suorituskyky riippuu siitä, mitkä ominaisuudet animoit: transform ja opacity ovat GPU-ystävällisiä, kun taas asettelun ominaisuuksien, kuten width tai top, animointi aiheuttaa kalliita uudelleenasetteluja easingista riippumatta.
Voinko tehdä aidon pomputuksen tai joustotehosteen?
Yksi cubic-bezier voi ylittää maalin kerran, mutta ei tuota aidon bounce- tai joustavan easingin monia pompuja. Siihen ketjuta useita avainkehyksiä @keyframesiin tai käytä Web Animations API:ta; yksi pehmeä ylitys on juuri se, missä cubic-bezier on hyvä ja mitä tämä työkalu tarjoaa.
Ladataanko se, mitä teen tässä, palvelimelle?
Ei. Käyrä piirretään paikalliselle canvasille ja esikatseluanimaatio toimii kokonaan selaimessasi. Mitään ei lähetetä palvelimelle, joten generaattori toimii myös offline-tilassa sivun latauduttua.
Näin käytät työkalua CSS easing generaattori
Veistää CSS:n easing-käyriä visuaalisesti numeroiden arvaamisen sijaan. Vedä ohjauspisteitä, vertaa liikettäsi lineaariseen vertailuun ja kopioi valmis cubic-bezier yhdellä napsautuksella. Kaikki toimii paikallisesti selaimessasi.
- Valitse yksi 18 esiasetuksesta lähtöpisteeksi, esimerkiksi Ease Out, Expo Out tai Back Out.
- Vedä käyrän kahta kahvaa: X-akseli on aika ja sen on pysyttävä 0:n ja 1:n välissä; Y-akseli on etenemä ja saa ylittää.
- Hienosäädä P1:n ja P2:n tarkat koordinaatit numerokentillä, jos tarvitset tarkkuutta.
- Aseta keston liukusäädin ja katso kahta silmukkaa tekevää palloa — ontto on aina lineaarinen, täytetty käyttää käyrääsi.
- Kopioi tuotettu cubic-bezier-arvo transition-timing-function- tai animation-timing-function-ominaisuuteen.
Työnnä yksi Y-kahva yli 1:n itsevarmaan ylitykseen, esimerkiksi cubic-bezier(0.34, 1.56, 0.64, 1) — se saa painikkeet ja kortit tuntumaan joustavilta ilman avainkehyskään.
Aiheeseen liittyvät työkalut
- CSS-liukuvärigeneraattori Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
- CSS-latausindikaattorit Ilmainen CSS-indikaattorigeneraattori: kymmenen latausspinneriä puhtaalla CSS:llä ja suoralla koon, nopeuden, paksuuden ja värin säädöllä sekä valmis HTML ja CSS kopioitavaksi.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.
- CSS clip-path generaattori Ilmainen online CSS clip-path generaattori. Suunnittele polygon-, circle-, ellipse- ja inset-muodot raahattavilla pisteillä, live-esikatselulla ja CSS-koodin kopioinnilla yhdellä klikkauksella.
- CSS-kaunistaja Muotoile ja kaunista CSS-koodi välittömästi. Muunna minifioitu CSS luettavaksi koodiksi muokattavilla vaihtoehdoilla.
- CSS-minifioija Ilmainen online CSS-minifioija. Pakkaa ja optimoi CSS-koodi välittömästi poistamalla välilyönnit, kommentit ja tarpeettomat merkit. Pienennä tiedostokokoa nopeampaa web-suorituskykyä varten.