📈
無料CSS 立方ベジェ イージング ジェネレーター
制御点をドラッグして CSS イージング カーブを設計し、モーションをライブでプレビューし、cubic-bezier() 値をコピーします。オーバーシュート/バウンスのプリセットが含まれています。
読み込み後はオフラインでも動作
ティールとローズのハンドルをドラッグしてカーブを調整
モーションプレビュー
幅のトランジション
CSS 値
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
プリセット
ローズとティールのハンドルはボックスの外 (Y が 0〜1 の範囲外) に引き出して、back-out や anticipate のようなオーバーシュート/バウンス効果を作れます。X は 0〜1 の範囲内に留まります (時間は逆行しません)。
主な用途
- カスタムCSS遷移イージングホバー効果、メニュー、UI遷移の自然な感じのイージングを設計します。
- バウンスとオーバーシュートアニメーション制御点をボックスの外側に引っ張ってからかう春/バウンス動きを作成します。
- @keyframesアニメーションのイージングCSSキーフレームアニメーション用に正しいanimation-timing-functionを選択します。
- JSアニメーションライブラリのイージング値GSAP、Framer Motion、anime.js等のcubic-bezier値を取得します。
- イージングの仕組みを理解ベジェ曲線とそれが生成する動きの関係を見てください。
使い方
このエディタはReactの状態とSVGを使ってブラウザ内で完全に構築されています — ライブラリが曲線の計算を担うことはありません。2つのドラッグ可能な制御点がSVGの3次ベジェ曲線パスを定義し、ブラウザ自体のCSSアニメーションエンジンが、生成されたcubic-bezier()の値を@keyframesルールに直接注入することで動きのプレビューを実行します。
- 1制御点をドラッグまたは入力する2つのハンドル（P1はティール色、P2はローズ色）がSVGキャンバス上にあります。ドラッグにはsetPointerCapture付きのPointer Events APIが使われるため、ハンドルはSVGの境界外でも指やカーソルを追跡できます。矢印キーでハンドルを微調整したり、x1/y1/x2/y2の数値入力に正確な値を直接入力したりすることもできます。
- 2SVGがリアルタイムに曲線を描く曲線は単一のSVG<path>要素で、そのC（3次ベジェ）コマンドは状態が更新されるたびに4つの制御点座標から再計算されます。canvasも外部ライブラリも不要です — ブラウザのSVGレンダラーがパスを直接描画します。
- 3ブラウザのCSSエンジンがイージングをプレビューする3つのライブアニメーション（スライドするドット、幅のトランジション、スケール）は、インラインで注入されたcubic-bezier()の値を使ってCSSの@keyframesを実行します。ブラウザ自体のアニメーションエンジンが曲線を解釈するため、見えているものが実際のプロダクションCSSが生成するものとまったく同じです。
- 4使用しているフレームワークの構文でスニペットをコピーするタブは同じ4つの数値を、CSSのtransition-timing-function、Tailwindの任意値クラス、Framer Motionのeaseの配列、anime.jsのイージング文字列のいずれかとして整形します。スニペットはnavigator.clipboardでクリップボードに書き込まれます。曲線はURLハッシュ（#b=x1,y1,x2,y2）にもエンコードされ、共有やブックマークができます。