Todelliset luvut CSS:n takana on helppokäyttöinen
Suunnittele mukautettu CSS-ajoitusfunktio cubic-bezier() vetämällä kahta ohjauspistettä, esikatsele sitä livenä lineaarista viittausta vasten ja kopioi sitten valmis arvo.
Tulos
Tämä sivu avaa kuutio-bezier-generaattorin, jossa x1=0.42, y1=0, x2=0.58, y2=1 on jo ladattu – tarkat ohjauspisteet, joihin CSS-help-in-out-avainsana laajenee. Vedä joko kahvaa tai muokkaa numeroita suoraan, jolloin käyrä, animaation esikatselu ja kopioitava merkkijono päivittyvät välittömästi.
ease-in-out on yksi viidestä sisäänrakennetusta CSS-ajoitusavainsanasta, ja se on suosittu juuri siksi, että tämä käyrä kiihtyy varovasti alusta, pitää melko tasaisen vauhdin keskeltä ja helpottaa takaisin ennen loppua – muoto, joka on luonnollinen useimmille käyttöliittymän liikkeille. Kun se nähdään selkeänä ohjauspisteenä avainsanan nimen sijaan, käy selväksi, miksi: y1 on lähellä 0:ta ja y2 lähellä 1:tä, molemmat lähellä vastaavaa x:ää, joten kumpaankaan suuntaan ei ole ylitystä.
Käytä näitä neljää numeroa aloituskohtana itse avainsanan sijaan aina, kun haluat hieman työntää tunnetta – vedä x1 alaspäin saadaksesi kiihkeämmän alun, tai paina y2 arvon 1 yläpuolelle muuttaaksesi saman muodon lempeäksi ylitykseksi. Jokainen muutos päivittää esikatselun ja kopioitavan cubic-bezier()-rivin välittömästi.