CSS easing editor
Drag the handles to shape a cubic-bezier curve, or switch to Spring to generate bouncy motion as a CSS linear() function. Watch it move, then copy the code.
Settles in 0 ms
Quick answer: A CSS easing function controls how an animation speeds up and slows down. Drag the two handles above to shape a cubic-bezier() curve, or open the Spring tab to generate a bouncy motion as a CSS linear() function, then copy the result into your transition or animation.
Choosing an easing
- ease-out (fast start, slow end) feels natural for elements entering the screen.
- ease-in (slow start, fast end) suits elements leaving the screen.
- ease-in-out works for movement between two points on screen.
- Back and spring curves overshoot the target slightly and add playful energy; use them sparingly.
Typical durations
Small interface changes feel best at about 150 to 300 ms. Larger transitions, such as panels and page elements, work at 300 to 500 ms. Longer than that usually feels slow.
Why spring easing uses linear()
A cubic-bezier curve can overshoot once but cannot oscillate. The CSS linear() function takes a list of points, so it can describe a spring that bounces several times before settling. This tool samples a real spring equation into those points.
Frequently asked questions
What is a cubic-bezier easing?
It is defined by four numbers (x1, y1, x2, y2) that place two control points of a curve. The x values must be between 0 and 1; the y values can go outside that range to make the animation overshoot.
What is CSS linear()?
linear() is a timing function that interpolates between a list of points. Because you control many points, it can express springs and bounces. It is supported in current versions of Chrome, Edge, Firefox and Safari.
What do stiffness, damping and mass do?
Stiffness is how strongly the spring pulls toward the target, damping is how quickly the motion dies out, and mass is how heavy the object feels. Low damping gives more bounce.
How is the spring duration chosen?
It is the time the spring takes to settle within a tiny distance of its target, calculated for you and used in the output.
Can I use my keyboard?
Yes. Focus a handle and use the arrow keys; hold Shift for larger steps.