Question 1

What is a CSS cubic-bezier() timing function?

Accepted Answer

cubic-bezier(x1, y1, x2, y2) is a CSS value used in transition-timing-function or animation-timing-function that describes how a value changes over the duration of an animation. It is a cubic Bezier curve with fixed start and end points at (0, 0) and (1, 1) — the x-axis represents elapsed time as a fraction of the total duration, and the y-axis represents animation progress. You control the two middle control points, P1 = (x1, y1) and P2 = (x2, y2), to shape the acceleration curve.

Question 2

Why are x1 and x2 restricted to values between 0 and 1, but y1 and y2 are not?

Accepted Answer

The x-axis represents time, which always moves forward from 0% to 100% of the animation duration — so x1 and x2 must stay within [0, 1] to keep the curve a valid function of time (one output for every input). The y-axis represents visual progress, which is allowed to overshoot past the final value or dip below the starting value before settling — that is what produces "bounce" or "spring" style effects, so y1 and y2 can be any number.

Question 3

What is the difference between ease, ease-in, ease-out, ease-in-out, and a custom cubic-bezier()?

Accepted Answer

ease, ease-in, ease-out, and ease-in-out are CSS keywords that are shorthand for specific, fixed cubic-bezier() values (for example, ease is exactly cubic-bezier(0.25, 0.1, 0.25, 1)). Writing cubic-bezier() directly lets you fine-tune the curve to any shape you want instead of being limited to those four presets — drag the handles or load a preset below, then tweak it.

Question 4

Does this tool upload or store the curve I create?

Accepted Answer

No. Everything — the curve math, the live preview animation, and the generated CSS — runs entirely in your browser using JavaScript. Nothing you drag or type is ever sent to a server, logged, or saved; refreshing the page resets the tool.

Question 5

What are the Material Design easing curves in the preset list?

Accepted Answer

Material Standard, Material Decelerate, and Material Accelerate are Google's published Material Design motion curves. Standard (cubic-bezier(0.4, 0, 0.2, 1)) is the general-purpose default, Decelerate (cubic-bezier(0, 0, 0.2, 1)) is used for elements entering the screen, and Accelerate (cubic-bezier(0.4, 0, 1, 1)) is used for elements leaving the screen.

Question 6

How do I use the generated CSS value?

Accepted Answer

Copy the cubic-bezier(...) value and use it anywhere CSS accepts a timing function, e.g. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); or as the value of animation-timing-function in a @keyframes animation.

CSS Cubic-Bezier Easing Curve Generator

Curve Editor

CSS Output & Preview

Frequently Asked Questions

What is a CSS cubic-bezier() timing function?

Why are x1 and x2 restricted to values between 0 and 1, but y1 and y2 are not?

What is the difference between ease, ease-in, ease-out, ease-in-out, and a custom cubic-bezier()?

Does this tool upload or store the curve I create?

What are the Material Design easing curves in the preset list?

How do I use the generated CSS value?

Related Tools

UTM Campaign URL Builder

JSON to YAML Converter

QR Code Generator

CSS Clip-Path Generator