What is the default CSS easing?

Transitions and animations default to ease, which equals cubic-bezier(0.25, 0.1, 0.25, 1): a quick start and a gentle finish.

How do I make an overshoot or bounce?

Drag a handle above 1 or below 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), passes the end and settles back. A single cubic Bézier cannot bounce several times; use keyframes or the linear() function for that.

Can I use the same value for animations?

Yes. The value works in transition-timing-function, animation-timing-function and the easing option of the Web Animations API.

Cubic Bezier Generator

Shape CSS easing curves by dragging two handles. Compare the motion with linear timing and copy cubic-bezier() for transitions or Tailwind.

Curve editor

Drag either handle. The dashed line is linear timing.

Motion preview

Your curve

Linear

Position at each tenth of the duration

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Everything stays in your browser.

Format references

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Tool page updated: 2026-10-25

Curve editor

Motion preview

Guide and example

Related tools

Format references