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.