What do the four cubic bezier numbers mean?

The numbers represent two control points on a curve: (x1, y1) and (x2, y2). The x-values control timing (when acceleration happens), and y-values control progress (how much movement happens). Values outside 0-1 create overshoot or bounce effects.

Can I use cubic bezier in JavaScript animations?

Yes. Most JavaScript animation libraries (GSAP, Framer Motion, Anime.js) accept cubic bezier arrays or CSS syntax. The Web Animations API natively supports cubic-bezier() strings in the easing property. The syntax is identical to CSS.

What is the difference between cubic-bezier and steps()?

Cubic bezier creates smooth, continuous motion by interpolating between keyframes. The steps() function jumps between values without interpolation, creating frame-by-frame effects like sprite animations. Use bezier for smooth transitions and steps for intentionally choppy effects.

How do I make an animation bounce at the end?

Set the second y-value (y2) above 1. For example, cubic-bezier(0.68, -0.55, 0.27, 1.55) produces an overshoot. The higher the value, the more pronounced the bounce. Values above 1.8 usually feel exaggerated.

Do all browsers support cubic bezier timing functions in 2026?

Yes. Cubic bezier has been supported in all major browsers since 2012. No vendor prefixes are needed. The syntax works in transition-timing-function, animation-timing-function, and the Web Animations API easing property.

How do I choose the right cubic bezier curve for my animation?

Start with a preset (ease, ease-in-out) and adjust if it feels wrong. Use ease-out for elements entering the screen, ease-in for elements leaving, and ease-in-out for state changes like hover. Test on real devices—curves that feel smooth on desktop can feel sluggish on slower mobile hardware.

Cubic-Bezier Easing Visualizer

This tool lets you design CSS animation timing functions by dragging two control points on a bezier curve graph. The curve determines how an animation progresses over time: a straight diagonal is linear (constant speed), an S-curve starts slow and ends slow, and a steep initial rise means the animation fires quickly and decelerates. Drag the handles, watch a live animation preview, and copy the cubic-bezier() value into your CSS. Everything runs in your browser. No data is sent anywhere.

How does the Cubic-Bezier Easing Visualizer work step by step?

A cubic bezier curve maps time (horizontal axis) to progress (vertical axis). When you apply cubic-bezier(0.4, 0, 0.2, 1) to a CSS transition, the browser calculates the current animation progress at each frame by following the curve. If the curve starts steep, the animation accelerates quickly. If it flattens at the end, it decelerates smoothly.

What does a typical Cubic-Bezier Easing Visualizer result look like?

A springy menu uses P1 at (0.34, 1.56) and P2 at (0.64, 1) so the curve overshoots past 1 on the y-axis, then settles. The preview shows the overshoot before you paste the timing function into CSS.

Frequently asked questions

What do the four cubic bezier numbers mean?
The numbers represent two control points on a curve: (x1, y1) and (x2, y2). The x-values control timing (when acceleration happens), and y-values control progress (how much movement happens). Values outside 0-1 create overshoot or bounce effects.
Can I use cubic bezier in JavaScript animations?
Yes. Most JavaScript animation libraries (GSAP, Framer Motion, Anime.js) accept cubic bezier arrays or CSS syntax. The Web Animations API natively supports cubic-bezier() strings in the easing property. The syntax is identical to CSS.
What is the difference between cubic-bezier and steps()?
Cubic bezier creates smooth, continuous motion by interpolating between keyframes. The steps() function jumps between values without interpolation, creating frame-by-frame effects like sprite animations. Use bezier for smooth transitions and steps for intentionally choppy effects.
How do I make an animation bounce at the end?
Set the second y-value (y2) above 1. For example, cubic-bezier(0.68, -0.55, 0.27, 1.55) produces an overshoot. The higher the value, the more pronounced the bounce. Values above 1.8 usually feel exaggerated.
Do all browsers support cubic bezier timing functions in 2026?
Yes. Cubic bezier has been supported in all major browsers since 2012. No vendor prefixes are needed. The syntax works in transition-timing-function, animation-timing-function, and the Web Animations API easing property.
How do I choose the right cubic bezier curve for my animation?
Start with a preset (ease, ease-in-out) and adjust if it feels wrong. Use ease-out for elements entering the screen, ease-in for elements leaving, and ease-in-out for state changes like hover. Test on real devices—curves that feel smooth on desktop can feel sluggish on slower mobile hardware.