CSS Easing Generator
Design cubic-bezier curves and preview animations.
Ad
cubic-bezier(0.25, 0.10, 0.25, 1.00)
Ad
Frequently Asked Questions
What do the four cubic-bezier values mean? +
The four values (x1, y1, x2, y2) define two control points on a bezier curve. X values represent time (always 0 to 1), while Y values represent progress (can go below 0 or above 1 for bounce/elastic effects). The curve starts at (0,0) and ends at (1,1).
How do I create a bounce or elastic easing effect? +
Set Y values outside the 0-1 range. For a bounce-out effect, try cubic-bezier(0.34, 1.56, 0.64, 1). For elastic feel, use values like cubic-bezier(0.68, -0.55, 0.27, 1.55). The negative and above-1 Y values make the animation overshoot its endpoints.
What is the difference between ease, ease-in, ease-out, and ease-in-out? +
Ease (the default) starts slow, speeds up, then slows down. Ease-in starts slow and accelerates. Ease-out starts fast and decelerates. Ease-in-out combines both, starting and ending slow with speed in the middle. Each corresponds to a specific cubic-bezier value.
Can I use cubic-bezier with CSS keyframe animations? +
Yes. Set animation-timing-function to your cubic-bezier value. It applies between each pair of keyframes, not across the entire animation. You can also set different timing functions for different keyframe segments by declaring animation-timing-function within individual keyframe blocks.
Ad