cubic-bezier生成ツール
cubic-bezier(x1,y1,x2,y2)の4値をスライダーや数値で調整し、SVG曲線と動くプレビューでイージングを確認できます。transition用のCSSコードをそのままコピーして使えます。
曲線
X1
Y1
X2
Y2
プレビュー
translate
scale
opacity / rotate
1.2s
CSSコード
プリセット
CSS標準キーワードと人気のイージングをワンクリックで適用できます。
使い方
1
制御点を調整
スライダーまたは数値入力でX1・Y1・X2・Y2の4つの値を調整します。曲線がリアルタイムに変化します。
2
動きを確認
「再生」ボタンで動くボールのアニメーションを再生し、実際のイージングの加減速を体感できます。
3
プリセットを活用
ease・ease-in-out・bounce風などのプリセットからベースを選び、微調整するとすばやく作成できます。
4
CSSをコピー
生成されたtransition用のCSSコードをコピーボタンでコピーし、そのままスタイルシートに貼り付けて使用します。
cubic-bezierとは
cubic-bezier()はCSSのtransitionやanimationで使うイージング関数を、4つの数値（2つの制御点の座標）で自由に定義する関数です。3次ベジェ曲線の形状が時間に対する進行度を表し、加速・減速・行き過ぎ（オーバーシュート）などの動きを精密に表現できます。このツールはすべてブラウザ内で動作し、入力した値がサーバーに送信されることはありません。
機能・特徴
- リアルタイムプレビュー制御点の変更が即座にSVG曲線と動くボールに反映。加減速の様子を目で確認できます。
- ドラッグ操作対応グラフ上のハンドルを直接ドラッグして、感覚的にイージング曲線を作成できます。
- 豊富なプリセットease系の標準キーワードからオーバーシュートする人気イージングまでワンクリックで適用。
- プライバシー保護すべての処理はブラウザ内で完結。入力データはサーバーに送信されません。
活用シーン
- ボタンやカードのホバーアニメーション調整
- モーダルやメニューの開閉トランジション
- スクロール連動アニメーションのイージング設計
- マイクロインタラクションの加減速チューニング
- UIキットやデザインシステムの動きの統一
よくある質問
cubic-bezier生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
X（横軸）の値が0〜1の範囲に制限されるのはなぜですか？
cubic-bezier()の仕様上、制御点のX座標（X1・X2）は0〜1の範囲でなければ無効になります。一方でY座標（Y1・Y2）は0〜1の範囲を超えても有効で、1を超えるとオーバーシュート（行き過ぎてから戻る）した動きになります。
ease-in-outとease-in-outのcubic-bezierは同じですか？
はい。CSSのキーワード ease は cubic-bezier(0.25, 0.1, 0.25, 1)、ease-in-out は cubic-bezier(0.42, 0, 0.58, 1) と定義されており、同じ動きになります。本ツールのプリセットからも適用できます。
生成したCSSはそのまま使えますか？
はい。出力されるコードはtransitionプロパティの形式で、コピーしてスタイルシートにそのまま貼り付けて使えます。transition-timing-functionやanimation-timing-functionにも同じcubic-bezier()の値を利用できます。
入力したデータはサーバーに送信されますか？
いいえ。このツールはすべての処理をお使いのブラウザ内（JavaScript）で完結します。入力した値や生成したCSSがサーバーに送信・保存されることはなく、安心してご利用いただけます。