CSS Tools/Easing Function Editor
Easing Function Editor
Design custom cubic-bezier easing functions for smooth animations
Curve Editor
Drag control points to adjust curve
Controls
1s
Animation Preview
Presets
CSS Code
Loading...CSS Easing Function Guide
Learn how to create smooth and natural animations
What is Easing?
Easing functions specify the rate of change of an animation over time. The cubic-bezier function defines a curve with four control points, allowing you to create custom acceleration and deceleration patterns. This makes animations feel more natural and engaging than linear motion.
How to Use This Tool
- Drag the control points on the curve to adjust the easing
- Use preset buttons for common easing functions
- Preview the animation to see the effect in action
- Copy the cubic-bezier value to use in your CSS
Pro Tips
- Use ease-out for entering animations and ease-in for exiting
- Values outside 0-1 on the Y axis create overshoot effects
- Linear easing works best for opacity and color transitions
Browser Support
The cubic-bezier() function is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the CSS transitions and animations specifications with excellent compatibility.
Frequently Asked Questions
What do the four numbers in cubic-bezier mean?
cubic-bezier(x1, y1, x2, y2) defines a curve with two control points. x1,y1 is the first control point and x2,y2 is the second. The X values (0-1) represent time progression, Y values represent output value. Y values outside 0-1 create overshoot effects (bouncing past the end state).
When should I use ease-in vs ease-out vs ease-in-out?
Use ease-out for elements entering the screen (they arrive fast, slow down at destination). Use ease-in for elements leaving (slow start, fast exit - feels like acceleration away). Use ease-in-out for elements that stay on screen but move (like a slide transition). Linear is best for opacity or color changes.
How do I create a bounce effect?
Use Y values greater than 1 to overshoot the final state: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'. The negative Y1 creates a slight pullback before moving, and Y2 > 1 overshoots the endpoint before settling. Adjust values to control bounce intensity.
Can I use steps() instead of cubic-bezier?
Yes, steps() creates discrete frame-by-frame animations instead of smooth curves. 'steps(5)' divides the animation into 5 equal jumps. Use it for sprite animations, typewriter effects, or retro/mechanical aesthetics. Combine with 'steps(4, jump-end)' to control when jumps occur.
What's the difference between timing-function in transitions vs animations?
Both use the same easing functions, but transitions apply the curve across the entire state change, while animations can have different timing for each @keyframe segment. In animations, 'animation-timing-function' at a keyframe affects the transition TO the next keyframe, not from it.