TTULAKITO
Designer

Cubic Bezier Editor

Edit CSS cubic-bezier easing curves with a draggable preview.

All tools

Curve

Preview

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Frequently asked questions

What's the difference between ease, ease-in, and ease-out?
ease starts slow, speeds up, then slows down again. ease-in starts slow and accelerates (good for elements leaving the screen), while ease-out starts fast and decelerates (good for elements entering).
Why do my animations feel sluggish even with ease-in-out?
The default ease curves are gentle and can feel mushy at longer durations. Try a sharper curve like cubic-bezier(0.2, 0, 0, 1) or shorten the duration to 150-250ms for UI interactions.
Can cubic-bezier values go outside 0 to 1?
The X axis (time) must stay between 0 and 1, but the Y axis (progress) can exceed it. Values like cubic-bezier(0.5, 1.5, 0.5, 1) create overshoot and bounce effects without needing keyframes.