Visually generate cubic-bezier timing functions for CSS animations. Drag the curve to adjust and preview animations in real-time.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* Or use in animation */ animation: myAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* Or in transition shorthand */ transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
Choose from built-in presets (ease, ease-in, ease-out, etc.) or drag the blue and red control points on the SVG canvas to create your desired curve.
Click the play button to see the box move with the current timing function in real-time. Adjust duration from 0.1s to 3s.
Copy the generated cubic-bezier() code with one click and use it directly in CSS transitions or animations.
Compare multiple timing functions side by side to choose the best animation effect for your project.
Use easeOutBack to create a fun bounce effect on button hover. Effective for catching user attention and encouraging clicks.
easeOutCirc makes modals appear with smooth deceleration. Provides natural, non-abrupt UI/UX.
easeInOutQuad provides smooth acceleration/deceleration for page scrolls or element fade-ins, giving a premium feel.
Use linear or custom curves to create constant-speed rotation animations for loading spinners.
easeOut makes dropdown menus appear quickly then smoothly come to rest.
Cubic Bezier is a cubic curve defined by 4 points (start, two control points, end). In CSS, this curve defines acceleration/deceleration patterns for animations. It's used as cubic-bezier(x1, y1, x2, y2), where x1/y1 is the first control point and x2/y2 is the second.
ease is the default curve that's fast in the middle and slow at start/end. ease-in starts slow and ends fast, natural for disappearing elements. ease-out starts fast and ends slow, good for appearing elements. ease-in-out is slow at both start and end, suitable for bidirectional transitions.
Yes. Y coordinates below 0 or above 1 create 'bounce' effects (easeInBack, easeOutBack, etc.). However, X coordinates must stay between 0~1 because time cannot go backwards.
Yes, cubic-bezier() works with both transition-timing-function and animation-timing-function. You can also include it directly in transition or animation shorthand properties. Example: transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
cubic-bezier() is supported in all major modern browsers (Chrome, Firefox, Safari, Edge). It also works in IE 10+. For complex animations, consider GPU acceleration (using transform, opacity) for better performance.
Activate comparison mode to see animations of multiple timing functions simultaneously. Useful for identifying subtle differences and choosing the best curve for your project. You can compare up to 3 at once.
Currently, you can copy the CSS code and save it separately. Define the copied cubic-bezier() code as a CSS variable or Sass variable in your project for easy reuse. Example: --custom-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
The generated CSS code works in modern browsers. Complex animations may affect performance, so it's recommended to use transform and opacity properties to leverage GPU acceleration. On mobile, keep animation duration short (0.2~0.3s) for best results.
Bezier curves are mathematical curves introduced by Pierre Bézier for automobile design, defined by a start point, end point, and two control points. The CSS cubic-bezier(x1, y1, x2, y2) takes the coordinates of two control points of a cubic Bezier curve to determine animation timing. The x-axis represents time (0~1) and the y-axis represents progress, with the curve shape directly determining the acceleration and deceleration pattern of the animation.
Using cubic-bezier() in CSS transition-timing-function and animation-timing-function provides far more precise timing control than browser keywords like ease and linear. For example, ease is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1), and designers can tune these values directly to create a brand's unique motion language.
For natural UI animations, draw inspiration from physics. Use ease-out (fast start, then decelerate) when elements appear, and ease-in (slow start, then accelerate) when they disappear — this mimics real-world object behavior. When control point y values go outside 0~1, you can create bounce effects (like easeOutBack) perfect for attention-grabbing interactions. Most UI interactions work best at 0.2~0.4s, while screen transitions suit 0.4~0.6s.