Cubic Bezier-generator

At indtaste cubic-bezier(x1, y1, x2, y2) i hånden og genindlæse siden for at tjekke fornemmelsen er en langsom måde at finjustere en animation på. Denne generator lukker den løkke: træk i et af kontrolpunkternes håndtag på kurven, eller indtast eksakte tal i felterne for x1/y1/x2/y2, og kurven, den kopierbare CSS-streng og den levende forhåndsvisning af animationen opdateres ved hver ændring — intet byggetrin, ingen genindlæsning.

De to akser fungerer forskelligt med vilje. x1 og x2 forbliver fastlåst mellem 0 og 1, fordi det er hvad CSS-specifikationen faktisk kræver af en cubic-bezier()-timingfunktion — en værdi uden for det interval er simpelthen ugyldig. y1 og y2 har ingen sådan grænse: træk et håndtag over toppen af kassen eller under bunden, og kurven overshooter forbi sin start eller sin slutning, hvilket er præcis sådan fjedrende og bounce-agtige effekter bygges fra en enkelt easingkurve.

At se et tal er ikke det samme som at se bevægelsen, så forhåndsvisningen kører to identiske kugler side om side i en løkke: den ene bevæger sig ved hjælp af din egen kurve, den anden bevæger sig i et almindeligt konstant lineært tempo. At se dem dyste er den hurtigste måde at afgøre om en easingkurve rent faktisk producerer den fornemmelse du ønsker, før den nogensinde når et stylesheet. De forudindstillede sider — de reelle tal bag CSS's eget ease-in-out-nøgleord, en ærlig overshoot-tilnærmelse som nogle kalder et bounce, og Googles publicerede Material Design-standardkurve — er færdige udgangspunkter du kan trække videre fra i stedet for tomme kontrolpunkter.

Alt kører lokalt i din browser: ingen upload, ingen konto, ingen tur til serveren, og generatoren fortsætter med at virke offline når siden først er indlæst.