cubic-bezier() is a CSS timing function that defines the acceleration pattern of an animation or transition. It uses a cubic Bézier curve defined by 4 points: P0(0,0), P1(x1,y1), P2(x2,y2), and P3(1,1). The x-axis represents time (0 to 1), and the y-axis represents the animation progress. By adjusting the two control points (P1 and P2), you can create smooth, custom easing effects — from gentle fades to dramatic bounces. This tool lets you visually adjust those control points and instantly see the result.

ease (default): Starts slow, speeds up, then slows down — great for most UI transitions. cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: Starts slow and speeds up — ideal for elements entering the screen. cubic-bezier(0.42, 0, 1, 1)
ease-out: Starts fast and slows down — perfect for elements leaving or settling. cubic-bezier(0, 0, 0.58, 1)
ease-in-out: Slow at both ends, fast in the middle — smooth for continuous animations. cubic-bezier(0.42, 0, 0.58, 1)

steps(n, jump-term) creates a stepped (staircase) animation with n discrete intervals instead of smooth transitions. It's perfect for sprite animations, typewriter effects, and frame-by-frame animations. The jump-end value (default) means the step happens at the end of each interval. Other options include jump-start, jump-none, and jump-both. Use steps when you need discrete, frame-like motion rather than fluid movement.

Yes! The y-values of control points can extend beyond [0, 1], which creates overshoot or "back" effects. For example, cubic-bezier(0.175, 0.885, 0.32, 1.275) (easeOutBack) has y2=1.275, causing the animation to briefly go past its target before settling — creating a playful, elastic feel. Similarly, negative y-values (as in easeInBack) cause the animation to dip below the starting point before moving forward. This tool visualizes these overshoots clearly.

UI micro-interactions (button hovers, toggles): Use ease-out or Material Design decelerated for quick, responsive feedback.
Page transitions / modals: Use ease-in-out or standard for balanced, polished motion.
Attention-grabbing animations: Try easeOutBack for a bouncy reveal effect.
Loading spinners: linear for constant rotation.
Sprite sheets: Use steps() for frame-perfect playback.
Always test with real content — the best easing feels natural and doesn't distract.

CSS easing via cubic-bezier() and steps() is hardware-accelerated by the browser, requires zero JavaScript, and is perfect for simple transitions and keyframe animations. JavaScript libraries (like GSAP or anime.js) offer more advanced easing curves (elastic, bounce, custom equations) and finer control over complex animation sequences. For most web UI work, CSS easing is sufficient and performs better. Use this tool to find the perfect CSS curve before reaching for JavaScript.