Spline
cubic-bezier easing editor
drag the handles
curve
cubic-bezier(0.42, 0, 0.58, 1)
type
in-out
overshoot
none
at 50%
0.50
CSS value
CSS declaration
Tailwind arbitrary
Framer Motion
CAMediaTimingFunction
Android PathInterpolator
Bare numbers
SVG path d-attr
Copy
Reset
0
0.5
1
0
0.5
1
time →
↑ progress
x1
y1
x2
y2
accelerating
arc length 1.41
monotonic
Invert
Symmetric
compare with
none
output (
CSS value
)
cubic-bezier(0.42, 0, 0.58, 1)