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.