CSS-i taga olevad tegelikud numbrid - lihtne sisse-välja
Kujundage kohandatud CSS-i cubic-bezier() ajastusfunktsioon, lohistades kahte kontrollpunkti, kuvage selle reaalajas eelvaade lineaarse viite suhtes ja seejärel kopeerige valmis väärtus.
Tulemus
See leht avab kuupmeetri generaatori, mille x1=0,42, y1=0, x2=0,58, y2=1 on juba laaditud – täpsed kontrollpunktid, milleni CSS-i lihtne sisse-välja märksõna laieneb. Lohistage kas käepidet või redigeerige numbreid otse ning kõver, animatsiooni eelvaade ja kopeeritav string värskendatakse kohe.
easy-in-out on üks viiest sisseehitatud CSS-i ajastuse märksõnast ja see on populaarne just seetõttu, et see kõver kiirendab algusest peale õrnalt, hoiab keskelt üsna ühtlast tempot ja leevendub enne lõppu tagasi – kuju, mis on enamiku kasutajaliidese liikumise puhul loomulik. Kui näete seda märksõna nime asemel selgesõnaliste kontrollpunktidena, on selge, miks: y1 on 0 ja y2 1 lähedal, mõlemad on nende vastavuse x lähedal, nii et kummaski suunas pole ületamist.
Kasutage neid nelja numbrit lähtepunktina, mitte märksõna endana, kui peate tunnet veidi nihutama – tõmmake x1 alla, et alustada kiiremini, või lükake y2 üle 1, et muuta sama kuju õrnaks ülelöögiks. Iga muudatus värskendab koheselt eelvaadet ja kopeeritavat cubic-bezier() rida.