Use the free Easing Curve Visualizer below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Motion Has Timing, Not Just Speed
Two animations can travel the same distance in the same time and still feel completely different. One may jump forward at once and then crawl to a stop. Another may creep forward slowly and then rush at the end. The difference is easing: the curve that maps time to progress. A straight line means constant speed, which looks mechanical. A curved line means the motion speeds up and slows down, which looks natural, because real objects accelerate and brake. The tool above lets you draw that curve and feel it, with a ball that moves exactly along it.
Every easing curve on the web can be written as a cubic-bezier with four numbers. The first and third numbers control the horizontal handles, and the second and fourth control the vertical handles. The tool gives you sliders for all four, plus presets for the standard curves. The canvas draws the curve from bottom left to top right, and the ball below replays it. When you change a slider, both the drawing and the ball change at once, so you can connect the shape of the curve to the feeling of the motion.
How to Use the Visualizer
Start with the presets. Ease starts fast and ends gently, ease-in starts slowly and speeds up, ease-out starts fast and slows down, and ease-in-out does both: slow start, fast middle, gentle stop. Press Play animation after each preset and watch the ball. Ease-in feels like something waking up. Ease-out feels like something gliding to rest. Ease-in-out feels balanced and is the safest default for most interface motion, such as menus sliding in or cards appearing.
Then move the sliders yourself. Y1 shapes the start of the motion and Y2 shapes the end. A low Y1, near zero, means a slow start. A high Y1, near one, means a fast start. A low Y2 means the motion finishes slowly, and a high Y2 means it rushes to the end. X1 and X2 shift the handles sideways and fine-tune where the speeding up and slowing down happen. If you push Y above one or below zero, the ball overshoots its target and comes back, which feels springy. That overshoot suits playful elements, like a button that pops, but it looks wrong for serious motion, like a modal appearing.
Reading the Curve Like a Story
Read the curve from left to right, where left is the start of the animation and right is the end. The height is progress: how far the element has moved. A steep section means fast movement, because a lot of progress happens in a short time. A flat section means slow movement, because little progress happens. A curve that is steep at the start and flat at the end starts fast and brakes gently. A curve that is flat at the start and steep at the end creeps, then rushes.
Pairing Easing With Duration
Easing and duration work together, and neither fixes a bad choice of the other. A beautiful curve at the wrong duration still feels wrong. Short motions, under 200 milliseconds, feel instant and are good for hover states and small feedback. Medium motions, around 300 to 500 milliseconds, suit menus, dialogs, and cards. Long motions, above one second, suit page transitions and storytelling, but they test patience if they block interaction. The ball in the tool runs for 1.2 seconds so you can study the timing; on a real site you would usually use a shorter duration.
Accessibility and Motion Sensitivity
Some people experience motion sickness or discomfort from animation. Respect the prefers-reduced-motion setting in your CSS, and turn off non-essential motion for users who ask for it. Easing does not fix a harmful animation; it only shapes it. If an animation moves a large area, flashes, or loops forever, consider removing it for reduced-motion users entirely. Also avoid using motion as the only signal: pair a moving highlight with a colour or text change, so the meaning survives when motion is off.
Frequently Asked Questions
What do the four cubic-bezier numbers mean? They are the two control points of the curve. The first pair shapes the early part of the motion and the second pair shapes the late part. The tool draws the curve, so you do not need to calculate anything by hand.
Why does my curve go above the top line? That means a Y value is above one, so the animation overshoots its target and settles back. It is a deliberate effect, not an error, and it feels springy.
Can I copy the curve into my CSS? Yes. The code box shows transition-timing-function with your exact numbers, plus an example rule. Paste it into your stylesheet and change the property and duration to suit your element.
Shape a curve above, play it with the ball, and copy the numbers that feel right. Good timing is invisible when it works, and that is exactly the point.
Related tools
- Visualizador de Curvas de Animación (Spanish version)
- Keyframe Animation Generator
- Loading Spinner Maker