Race eight CSS easing curves side by side instead of previewing one at a time, so you can actually feel the difference between linear, ease-in-out, back, bounce and your own custom cubic-bezier curve, then copy the value you like.
transition-timing-function: linear;Most easing tools show a single curve at a time. Here, every named easing and your own custom curve run together on the same track, so subtle differences in speed and overshoot become obvious.
Linear, ease, ease-in, ease-out, ease-in-out, back, bounce and your custom curve, all racing together.
Four sliders reshape a real SVG cubic-bezier path so you can see the curve, not just imagine it.
Click any lane to select it, then copy its ready-to-use transition-timing-function CSS.
Set up a race, compare the results, then take the curve you like.
A CSS easing function decides how an animation's progress maps to time. A linear curve moves at a constant speed and can feel robotic, while curves like ease-in-out slow down at the start and end for a more natural motion. Under the hood, every named keyword such as ease or ease-in-out is really shorthand for a specific cubic-bezier() function with four control values between two fixed endpoints. Building your own curve means choosing where those two control points sit, which is exactly what the sliders and graph in this tool let you do, with an instant visual result instead of trial and error in a stylesheet.
A cubic-bezier curve always starts at (0,0) and ends at (1,1). The x1,y1 and x2,y2 values position two control points that pull the curve, controlling acceleration and deceleration.
The x values must stay between 0 and 1 because they represent time, but y values can go negative or above 1, producing the overshoot used by back and bounce style effects.
Keywords like ease-out are convenient presets. A custom cubic-bezier value is useful when a design needs a very specific, brand-tuned feel that no keyword quite matches.
The same value works as transition-timing-function on a CSS transition or as animation-timing-function on a keyframe animation, including per-keyframe overrides.
An easing function controls how an animation's speed changes over time, using keywords like ease-in-out or a cubic-bezier() curve with four control values.
Instead of previewing one curve at a time, this visualizer races several named easings and your own custom cubic-bezier curve side by side so you can compare how each one actually feels.
Drag the four x1, y1, x2 and y2 sliders to reshape the curve graph. The custom lane animates with that exact cubic-bezier value in real time.
Yes. The y1 and y2 control points can go below 0 or above 1, which is exactly what creates overshoot effects like the back and bounce presets.
Yes, it is completely free and every animation runs locally in your browser. Your last duration and custom curve are optionally saved to local storage for convenience.
Keep building smooth, custom motion with these free online CSS tools.