CSS Cubic Bézier 생성기
「CSS Cubic Bézier 생성기」는 코드, 데이터 및 QR 작업을 위한 브라우저 도구입니다. 입력과 결과는 일반적으로 이 기기에서 처리되며 가입이 필요하지 않습니다.
TIMING CURVE
Horizontal axis: elapsed time. Vertical axis: animation progress.
LIVE COMPARISON
사용 방법
사용 방법
- Choose a familiar easing preset or enter x1, y1, x2, and y2 directly.
- Watch the timing curve and compare the custom motion against linear animation.
- Copy the cubic-bezier() value for a CSS transition or animation timing function.
A timing curve, not a path curve
CSS cubic Bézier values describe animation progress over elapsed time. The horizontal axis is time and the vertical axis is progress, so this tool does not draw a geometric path for an object to follow. The live comparison moves the same sample with linear timing and your custom timing function.
Why x values are constrained
CSS requires x1 and x2 to be between 0 and 1. That keeps the time coordinate moving forward through the curve and makes progress solvable for every animation moment. This generator enforces that range. y1 and y2 may extend from -2 to 3, which allows anticipation below the start or overshoot beyond the finish.
Copy-ready browser CSS
The copied value is a standard cubic-bezier() timing function with up to two decimal places. It can be used with transition-timing-function, animation-timing-function, or their shorthand properties. The graph and animation run locally in your browser and do not represent physical motion or a guarantee of the same perceived speed in every interface.
자주 묻는 질문
더 알아보기
What do x1, y1, x2, and y2 mean?
They are the two control points of a cubic Bézier timing curve. The curve always starts at 0,0 and ends at 1,1; you choose the two points between them.
Can y be below 0 or above 1?
Yes. A negative y can briefly anticipate movement before progressing, while a y above 1 can overshoot the final value. This tool allows y values from -2 to 3.
Why can’t x be outside 0 to 1?
CSS cubic-bezier timing functions require both x control values in that interval. Outside it, time can fold backward and the timing function is invalid.
Does this create an SVG or motion path?
No. It creates a CSS timing function only. Use CSS motion-path or SVG path tools when you need an element to travel along a geometric route.