Tikrieji skaičiai, esantys už CSS, lengviau įvesti
Sukurkite pasirinktinę CSS cubic-bezier() laiko nustatymo funkciją vilkdami du valdymo taškus, peržiūrėkite ją tiesiogiai pagal tiesinę nuorodą, tada nukopijuokite paruoštą reikšmę.
Rezultatas
Šiame puslapyje atidaromas kubinio dydžio generatorius su jau įkeltu x1=0,42, y1=0, x2=0,58, y2=1 – tikslūs valdymo taškai, iki kurių išplečiamas CSS lengvo įvedimo raktinis žodis. Vilkite rankenėlę arba redaguokite skaičius tiesiogiai, o kreivė, animacijos peržiūra ir kopijuojama eilutė iškart atnaujinami.
„ease-in-out“ yra vienas iš penkių integruotų CSS laiko nustatymo raktinių žodžių ir jis populiarus būtent dėl to, kad ši kreivė švelniai įsibėgėja nuo pradžios, išlaiko gana tolygų tempą per vidurį ir palengvėja prieš pabaigą – tokia forma atrodo kaip natūrali daugeliui vartotojo sąsajos judesių. Matant, kad tai yra aiškūs valdymo taškai, o ne raktinio žodžio pavadinimas, tampa akivaizdu, kodėl: y1 yra šalia 0, o y2 yra šalia 1, abu yra arti jų atitikimo x, todėl nėra jokio viršijimo nė viena kryptimi.
Naudokite šiuos keturis skaičius kaip pradinį tašką, o ne patį raktinį žodį, kai reikia šiek tiek pastumti jausmą – patraukite x1 žemyn, kad pradėtumėte smarkiau, arba paspauskite y2 virš 1, kad tą pačią figūrą paverstumėte švelniu viršijimu. Kiekvienas pakeitimas akimirksniu atnaujina peržiūrą ir kopijuojamą cubic-bezier() eilutę.