Overshoot i undershoot — bouncy curves. X musi być 0–1.

Skopiuj cubic-bezier(...) w CSS transition-timing-function.

Tak — preview używa CSS formula.

Zaczyna powoli, przyspieszaj, spowalnia — cubic-bezier(0.42, 0, 0.58, 1).

Dla programistówZa darmoDziała lokalnie

Edytor cubic-bezier

Projektuj CSS cubic-bezier krzywe — przeciągnij handles, podejrzyj, skopiuj CSS.

CSS

cubic-bezier(0.25, 0.1, 0.25, 1)

Podgląd

Preset

P1 x

P1 y

P2 x

P2 y

Czas podglądu (ms)

Przeciągnij zielone uchwyty lub użyj suwakiów, aby dostosować krzywą.

O Edytor cubic-bezier

Edytor cubic-bezier Handytool craft CSS easing przeciągając control points. Zacznij od presetu, tune, live ball playback — czuj timing.

01
Przeciągnij curve, widz motion
Dwa handles kontrolują bezier. Ball animation pokazuje ruch.
02
Standard presety
ease, linear, ease-in, ease-out, ease-in-out — tune z nich.
03
Skopiuj CSS
cubic-bezier() live update, gotowy do transition.

Y > 1 lub < 0?: Overshoot i undershoot — bouncy curves. X musi być 0–1.
Użyj output?: Skopiuj cubic-bezier(...) w CSS transition-timing-function.
Czy dokładny?: Tak — preview używa CSS formula.
ease-in-out?: Zaczyna powoli, przyspieszaj, spowalnia — cubic-bezier(0.42, 0, 0.58, 1).