·web
Cubic-Bezier Tester
Shape a cubic bezier curve with two control points, scrub the timeline, watch how easing *distorts* time. Copy the CSS value, done.
css · animation · easing
Shape a cubic bezier curve with two control points, scrub the timeline, watch how easing *distorts* time. Copy the CSS value, done.
css · animation · easing
Is ease-in-out enough, or do you need cubic-bezier(0.68, -0.55, 0.27, 1.55)? cubic-bezier.com is nice but visually limited. This lab shows the curve and a moving dot on a timeline side by side, so you feel how easing bends time.
cubic-bezier(0.400, 0.000, 0.200, 1.000)linear easing — time progress equals animation progresslinear, the stronger the easingOvershoot and undershoot. For cubic-bezier(0.68, -0.55, 0.27, 1.55):
y1 = -0.55 → animation goes backward at the start (rebound effect)y2 = 1.55 → animation passes the target then settles backThis creates the "bouncy" / "spring" feel — mobile OSes use this for overshoot animations.
.element {
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}Or as an animation timing function:
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}| Preset | Value | Feel |
|---|---|---|
linear | (0, 0, 1, 1) | Robotic |
ease | (0.25, 0.1, 0.25, 1) | Default — balanced |
ease-in | (0.42, 0, 1, 1) | Slow start |
ease-out | (0, 0, 0.58, 1) | Fast start, slow end (best for UI) |
ease-in-out | (0.42, 0, 0.58, 1) | Soft on both ends |
| Material standard | (0.4, 0, 0.2, 1) | Google Material guidelines |