ZeroTool Workbench

Cubic Bezier ジェネレーター

CSS cubic-bezier() イージング曲線をビジュアル編集。ハンドルをドラッグして調整、リアルタイムでアニメーションをプレビューし、CSS / SCSS / Tailwind コードを出力。完全ブラウザ動作。

100% クライアントサイド データはブラウザ外に出ません 無料 · 登録不要
プリセット
カーブエディタ

塗りつぶしの 2 つの円をドラッグ。値はリアルタイムで更新。

アニメーションプレビュー
ミリ秒
P1
P2
出力 
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

関連ツール

CSS Clip-Path ジェネレーター CSSのclip-path形状をビジュアルで生成。ハンドルをドラッグしてポリゴン・円・楕円・インセットを作成。六角形・星など5種のプリセット付き。リアルタイムプレビュー対応。無料オンラインツール。 Glassmorphism CSS ジェネレーター グラスモーフィズムCSSエフェクトをビジュアルで生成。ブラー・彩度・背景透明度・ボーダー・角丸・シャドウをリアルタイムプレビューで調整。backdrop-filter + -webkit-backdrop-filter 対応。完全ブラウザ完結。 CSS フィルタージェネレーター CSSフィルター効果をビジュアルで生成。blur・brightness・contrast・grayscale・hue-rotate・invert・opacity・saturate・sepiaをスライダーで調整。カスタム画像アップロード対応。無料オンラインツール。 UUID ジェネレーター v4 UUIDを即座に生成。単体またはバッチ対応。 カラーコンバーター HEX・RGB・HSL形式間のカラー変換。ライブプレビュー付き。 正規表現テスター マッチハイライトとキャプチャグループ詳細付きでリアルタイムに正規表現をテスト。

カスタム cubic-bezier が必要な場面

linear / ease / ease-in / ease-out / ease-in-out の 5 つで十分なケースも多いですが、次のようなときはカスタム曲線が必要です：

  • デザインシステムにモーション言語が定義されている — Material の標準曲線 (0.4, 0, 0.2, 1)、iOS のナチュラルなイージング、Tailwind の ease-in-out。
  • overshoot や anticipation が欲しい — モーダルのポップイン、ドロワーのドラッグ、ボタン押下時のフィードバック。
  • Figma や After Effects のタイミング曲線を本番ビルドと完全一致させたい。

曲線の読み方

X 軸は正規化された時間（開始 0、終了 1）。Y 軸はアニメーションの進捗。対角線そのままなら linear。対角線より下に膨らむ曲線は最初は速く、終盤に緩む（ease-in-out 寄り）。上に膨らむ曲線は出だし速く、ゆっくり収束（ease-out 寄り）。0 を下回ったり 1 を超えたりすると「バネ」効果が生まれ、装飾的な UI には合いますが機能フローには邪魔になることもあります。

イージング使い分け早見表

用途推奨カーブ理由
ページ・セクション入場cubic-bezier(0, 0, 0.2, 1)（decelerate）立ち上がり速く、終わりは柔らかく着地。最終状態を視認しやすい。
ページ・セクション退場cubic-bezier(0.4, 0, 1, 1)（accelerate）ゆっくり始まり素早く抜ける。次の画面がキビキビ感じる。
汎用トランジションcubic-bezier(0.4, 0, 0.2, 1)（Material 標準）左右対称でニュートラル。hover、focus、小さな移動に万能。
遊び心のあるポップcubic-bezier(0.68, -0.55, 0.265, 1.55)（back ease）anticipation と overshoot を両立。バッジやトースト、注目喚起向き。
ドラッグ追従cubic-bezier(0.25, 0.46, 0.45, 0.94)滑らかな減速で物理的な慣性を再現。

プライバシー

エディタは完全にブラウザ内で動作します。曲線評価、アニメーションプレビュー、コピー操作はすべて端末上で実行され、制御点の値・時間・生成された CSS はサーバーへ送信されません。

関連ツール

FAQ

cubic-bezier イージング関数とは？

CSS の cubic-bezier(x1, y1, x2, y2) は、経過時間 (0〜1) をアニメーション進捗 (0〜1) にマッピングする曲線を 4 つの数値で定義します。曲線の両端は (0, 0) と (1, 1) に固定され、調整できるのは中間の 2 つの制御点 P1 と P2 のみ。P1.x と P2.x は必ず [0, 1] の範囲内、P1.y と P2.y は 0-1 を超えても構いません（overshoot や anticipation の表現）。

ease / ease-in / ease-out キーワードと何が違う？

CSS のキーワードは cubic-bezier プリセットの別名です。ease は cubic-bezier(0.25, 0.1, 0.25, 1)、ease-in-out は cubic-bezier(0.42, 0, 0.58, 1)。形状は 4 種類だけ。カスタム曲線にすれば、デザインシステムの標準（Material / iOS / Tailwind）に合わせる、特定のトランジションだけ手触りを微調整する、CSS / SCSS / Tailwind 設定で同じ数値を再利用する、といったことが可能になります。

なぜ P1.y / P2.y は 0-1 を超えてよい？

Y がマイナスだと anticipation（先に逆方向へ引いてから動き出す）、1 を超えると overshoot（行き過ぎてから戻る）になります。代表例の cubic-bezier(0.68, -0.55, 0.265, 1.55) は両方を使った back-out 曲線です。X 軸は時間なので、CSS の有効なタイミング関数として動かすには [0, 1] の範囲を保つ必要があります。

Tailwind CSS でどう使う？

tailwind.config.js の theme.extend.transitionTimingFunction にエントリを追加します。例：smooth-out: 'cubic-bezier(0.4, 0, 0.2, 1)'。これで ease-smooth-out というユーティリティクラスが使えるようになります。本ツールの Tailwind 出力モードはこのスニペットをそのまま生成してくれます。

設定は保存される？

制御点の位置、プレビュー時間、出力フォーマットは ZeroTool 共通の永続化レイヤーで端末の localStorage に保存されます。サーバー送信は一切ありません。ページ上の Clear ボタンで ease-in-out のデフォルトに戻せます。